Dans quelle mesure le jaune doit-il être plus foncé pour obtenir le même contraste que les autres couleurs?
De combien la couleur jaune doit-elle être assombrie pour obtenir les mêmes valeurs de contraste que les autres couleurs affichées sur un écran d'ordinateur?
C'est quelque chose que je ferais de vue, mais je me demandais s'il n'y avait pas de règles à ce sujet.
J'ai créé 6 rangées de blocs de 6 couleurs différentes. Chaque ligne a un bloc clair, normal, sombre et texte.
Le deuxième bloc de chaque ligne est la référence de couleur et est la couleur dans sa forme la plus brillante (# FF0000, # FF00FF, # 0000FF, ...).
Les premiers blocs sont des codes de couleur plus clairs et les troisièmes blocs sont des codes de couleur plus foncés. Chacun d'eux est plus clair ou plus foncé avec la même quantité que les autres couleurs.
Le quatrième bloc est le même que le premier bloc avec du texte dans la couleur du bloc de référence.
Comme vous pouvez le voir, le jaune a le plus petit contraste par rapport aux autres couleurs, même si les couleurs sont proportionnelles.
Pour obtenir un texte jaune proche du même contraste que le vert par exemple, vous devez déjà changer la couleur du texte de (255,255,0) à (245,245,0).
Pourquoi le jaune sur le blanc est-il si peu contrasté et de combien doit-on assombrir le jaune pour obtenir le même contraste que les autres couleurs?
Correspondance de la luminosité de deux couleurs différentes
Vous pouvez calculer la luminosité d'échelle de gris perçue d'une couleur sur un moniteur "typique" avec la formule suivante:
Y = 0.2126 * (R/255)^2.2 + 0.7151 * (G/255)^2.2 + 0.0721 * (B/255)^2.2
Ainsi, par exemple, le vert pur à haute saturation (0, 255, 0) a une luminosité de:
Y = 0.2126 * (0/255)^2.2 + 0.7151 * (255/255)^2.2 + 0.0721 * (0/255)^2.2
Y = 0.7151
Pour les nuances de jaune, je suppose que vous voulez dire des couleurs où R = G et B = 0. Soit X = R = G. La luminosité du jaune est donc:
Y = 0.2126 * (X/255)^2.2 + 0.7151 * (X/255)^2.2 + 0.0721 * (0/255)^2.2
Y = (0.2126 + 0.7151) * (X/255)^2.2
Y = 0.9277 * (X/255)^2.2
Résolution pour X:
X = ((Y/0.9277) ^ 0.4545) * 255
Donc, pour faire correspondre la luminosité du vert (Y = 0,7151):
R = G = X = ((0.7151/0.9277) ^ 0.4545) * 255 = 227
Ou, un RVB de 227, 227, 0. Assez proche de ce que vos globes oculaires vous ont dit. Ce n'est jamais exact en tout cas parce que les moniteurs varient de l'un à l'autre.
Correspondance du contraste entre deux paires de couleurs
Deux couleurs avec la même valeur Y apparaissent également lumineuses (sauf pour les variations du moniteur). Pour obtenir deux paires couleurs avec une luminosité égale contraste (par exemple, pour que le texte vert sur un fond verdâtre soit aussi lisible que le texte jaune sur un fond jaunâtre) , vous devez calculer et comparer le contraste de chaque paire. Pour obtenir le contraste, calculez les Y pour chaque couleur d'une paire (appelez-les Y1 et Y2) et calculez le rapport de luminosité C pour chaque paire:
C = (Y1 + 0.05) / (Y2 + 0.05)
Pour comparer les rapports de luminosité, placez toujours la couleur la plus claire (Y plus grand) sur le dessus.
Pour faire correspondre les contrastes, ajustez les couleurs jusqu'à ce que le C des deux paires soit égal. Vous avez quatre couleurs, il y a donc beaucoup d'options. Par exemple, dans votre tableau, le "Foo" rouge est 255, 0, 0, donc Y2 = 0,2126. Son arrière-plan rouge pâle est 255, 221, 221, donc Y1 = 0,7873. Le rapport de luminosité est:
C = (0.7873 + 0.05) / (0.2126 + 0.05) = 3.19
Pour le "Foo" jaune (255, 255, 0) sur le fond jaune pâle (255, 255, 221):
C = (0.9804 + 0.05) / (0.9278 + 0.05) = 1.05
Plus le contraste est faible, plus il est difficile à lire, c'est pourquoi votre jaune sur jaune pâle est plus difficile à voir que votre rouge sur rouge pâle.
Une façon de faire correspondre le contraste du jaune au rouge est, comme vous le suggérez, d'assombrir le jaune. Couper et essayer (parce que je suis trop paresseux pour dériver une autre formule) constate que 146, 146, 0 fait le travail:
C = (0.9804 + 0.05) / (0.2720 + 0.05) = 3.20
Le Y du jaune foncé (0,2720) est plus lumineux que le Y du rouge (0,2126) car vous affichez le jaune sur un fond plus clair (0,9804 contre 0,7873)
BTW, pour l'accessibilité, W3C recommande C de texte sur un fond soit au moins 3.0.
Pourquoi le jaune est-il si brillant?
L'œil humain a évolué pour être le plus sensible aux fréquences lumineuses les plus fortes trouvées sur Terre pendant la journée. Ce serait la lumière du soleil. Le Soleil est le plus fort autour des fréquences jaunes (c'est pourquoi il a l'air jaune), c'est pourquoi le jaune nous apparaît le plus brillant. En plus, les écrans LCD rendent le jaune en faisant passer la lumière à travers deux sous-pixels plutôt qu'un (par exemple, comme le fait le vert). Les fréquences les plus lumineuses sont les deux plus proches du jaune, du vert, du cyan et de l'orange. Les fréquences les plus éloignées du jaune, du bleu et du rouge apparaissent les plus sombres et leurs valeurs de saturation élevées contrastent relativement bien sur les couleurs pâles et mal sur les sombres.
J'ai plus de détails sur les couleurs et le contraste sur Breaking the Color Code .