Formule pour le contraste des couleurs entre le texte et l'arrière-plan
Dans mon Android, un utilisateur peut choisir la couleur d'un élément. Cette couleur est ensuite affichée en arrière-plan avec un texte dessus. Je veux afficher le texte en noir ou blanc - selon la couleur de fond.
Existe-t-il une formule pour calculer quand il est préférable d'afficher un texte en blanc et non en noir? Je suppose que je recherche l'obscurité d'une couleur et la valeur exacte lorsqu'elle est plus noire que blanche.
Oui, il existe une formule. J'ai écrit n article sur les couleurs à contraste élevé récemment qui représente la variation du noir ou du blanc (en fait blanc cassé # f0f0f0 et blanc cassé # 101010) comme couleur de premier plan avec le rapport de contraste le plus élevé, pour les plages des couleurs de fond.
Il y a aussi un version SVG interactive avec des info-bulles des taux de contraste
rapport de contraste est calculé comme (L1 + 0,05)/(L2 + 0,05), où
L1 est: luminance relative du plus clair des couleurs, et
L2 est la luminance relative de la plus sombre des couleurs.
Les graphiques que j'ai créés sont ci-dessous, ainsi que certaines de mes notes de l'article ci-dessus.
Chaque cellule de couleur a un cercle:
- Cercles pleins: rapport de contraste <= 4,5
- Cercles épais: rapport de contraste> 4,5 (conforme WCAG 2.0 AA pour le texte 14 pt)
- Cercles minces: rapport de contraste> 7 (conforme WCAG 2.0 AAA pour le texte 14 points)
Dans le premier graphique, la luminosité est une constante 128, tandis que la teinte et la saturation varient:
Il est intéressant de voir que le noir est généralement bien meilleur que le blanc, sauf dans les bleus et les rouges. Il n'y avait pas de jaunes et de verts où le blanc était meilleur et le noir a un rapport de contraste supérieur à 7 pour une grande partie de ces jaunes et verts, tandis que le blanc a du mal à obtenir un rapport supérieur à 7, sauf dans les bleus profonds les plus purs. L'écart dans les violets où le noir excelle à nouveau intrigue aussi.
Dans le deuxième graphique, la saturation est une constante 255, tandis que la teinte et la luminosité varient:
Sans surprise, le blanc fonctionne sur le noir et le noir fonctionne sur le blanc, mais encore une fois le noir domine globalement sauf dans le blues. Les noirs dominent le plus contre les jaunes. Il n'y a pas beaucoup de surprises ici, mais c'est fascinant de voir les preuves présentées comme ceci. Contrairement à la saturation variable, ici une grande majorité des rapports dépassent 7 (les cercles minces).
Vous devez choisir la couleur du texte de telle sorte que critère de succès 1.4.3, Contraste (minimum), des WCAG soit respecté. Il s'avère que le rapport de contraste requis de 4,5 peut être satisfait avec n'importe quel choix de couleur d'arrière-plan, et un algorithme pour faire le choix du texte blanc contre noir est assez simple.
Étape 1 : Convertissez la couleur d'entrée (arrière-plan dans votre cas) en HSL. En fait, vous n'avez besoin que de la luminance (ou de la légèreté). Voir définition de la luminance relative dans WCAG 2. pour une formule à convertir à partir de l'espace RVB.
Étape 2 : La formule de rapport de contraste donnée dans la définition WCAG 2. peut être réorganisée si nous savons que le texte sera noir (luminance = 0) ou blanc (luminance = 1). Donc, laissez la luminosité de la couleur d'entrée être L, puis:
- Si L ≥ 0,175, le texte noir est correct.
- Si L ≤ 0,1833, le texte blanc est correct.
Il y a une petite plage de couleurs où l'un ou l'autre choix répondrait à l'exigence de contraste, donc l'utilisation d'une valeur de coupure où le rapport de contraste est égal dans les deux cas est logique, ce qui se produit à 0,1791 ( solution Wolfram alpha ). Alternativement, vous pouvez légèrement éviter d'utiliser du noir pur et du blanc pur, mais vous devrez refaire l'algèbre.
Notez qu'il s'agit d'une simple preuve algébrique du résultat obtenu dans la réponse donnée par @ roger-attrill. Il y a beaucoup plus de couleurs avec une légèreté supérieure à 0,175 que inférieure à 0,1833, donc le noir est généralement le meilleur choix.