web-dev-qa-db-fra.com

La meilleure façon d'assombrir une couleur jusqu'à ce qu'elle soit lisible?

Quelle est la meilleure façon d'assombrir une couleur jusqu'à ce qu'elle soit lisible?

J'ai une série de titres qui ont une couleur associée, mais certaines de ces couleurs sont très claires et tout texte qui y est dessiné est illisible. J'ai joué avec HSB et je n'arrive pas à obtenir un algorithme qui assombrit la couleur sans la rendre argentée.

Je pense que je veux aussi modifier la saturation. Existe-t-il une manière standard de procéder?

accessibilitycolorlegibilitycontrast
4
Mark

Avec HSB, vous réduisez généralement B pour obtenir une version plus sombre d'une couleur donnée, et augmentez éventuellement S au fur et à mesure si la couleur semble trop terne. Cela fonctionne pour la plupart des couleurs sauf le jaune (il se termine comme une couleur boueuse laide), mais seulement parce qu'il n'y a pas de "jaune foncé".

Je ne sais pas pourquoi vous deviendriez argenté à moins que votre couleur de départ soit blanche, mais il est juste de dire que l'argent est "blanc foncé", tout comme le brun est "orange foncé".

Si vous n'aimez toujours pas les résultats, ne changez pas vos couleurs mais utilisez plutôt du texte noir sur fond clair et du texte blanc sur fond sombre. Voir Choix dynamique de la couleur du texte à contraste élevé (par rapport à la couleur d'arrière-plan) .

4
Michael Zuschlag

Si vous convertissez la couleur dans un autre espace colorimétrique, par ex. YIQ, YUV ou mieux encore CIE-L * ab, CIE-L * CH, puis au lieu des canaux RVB rouge vert et bleu, vous vous retrouvez avec trois canaux différents, dont l'un est l'intensité.

Dans YIQ, YUV, le canal Y se rapproche de l'intensité et dans Lab et LCH le canal L fait cela.

Vous pouvez ensuite facilement réduire le canal d'intensité, puis reconvertir en RVB.

Pour un contraste élevé, je recommande de changer l'intensité jusqu'à ce que vous ayez au moins la moitié d'un contraste de gamme entre le premier plan et l'arrière-plan.

Par exemple. si votre plage est 0 ... 255, alors au moins 127 différence de canal d'intensité.

Remarque: YIQ a la conversion la plus simple de et vers RVB:

Y = 0.299 * R + 0.587 * G + 0.114 * B
I = 0.596 * R - 0.274 * G - 0.322 * B
Q = 0.212 * R - 0.523 * G + 0.311 * B

R = 1.0 * Y + 0.956 * I + 0.621 * Q
G = 1.0 * Y - 0.272 * I - 0.647 * Q
B = 1.0 * Y - 1.105 * I + 1.702 * Q

Edit: Utilisation de la directive W3C

Rapport de contraste: (L1 + 0,05)/(L2 + 0,05)
où L1 est la luminance relative du plus clair des couleurs et L2 est la luminance relative du plus sombre des couleurs.

Contraste (minimum): Pour le texte normal 4.5: 1, pour le texte à grande échelle 3: 1

Si l'arrière-plan est plus lumineux, utilisez le canal Y de l'arrière-plan comme L1 et le canal Y de l'avant-plan comme L2.

Si le premier plan est plus lumineux, utilisez le canal Y du premier plan comme L1 et le canal Y de l'arrière-plan comme L2.

Remarques:

  1. Si vous utilisez une plage de 0 ... 255 pour les canaux RVB, divisez-les (ou Y) par 255 avant d'utiliser la formule de contraste, car la formule semble être pour la plage normalisée de 0 ... 1

  2. La formule de contraste montre que plus les couleurs sont foncées, plus la différence entre les couleurs doit être faible pour obtenir un contraste élevé. (Les couleurs vives sur le noir sont plus faciles à percevoir que les couleurs claires sur le blanc.)

8
Danny Varod

WCAG2.0 a une norme bien documentée et internationalement reconnue pour ce qui constitue un contraste acceptable, éliminant la subjectivité mentionnée par Bevan.

Il y a un très bon vérificateur ici qui vous permet de modifier les couleurs via les curseurs jusqu'à ce qu'elles atteignent le niveau minimum requis. Vous visez un "oui" du côté droit, selon le niveau de conformité AA/AAA que vous visez.

http://snook.ca/technical/colour_contrast/colour.html

Il y a un lien là-bas pour plus de détails sur la formule utilisée pour calculer le niveau acceptable.

1
Ian Hamilton

"Lisible" est une mesure quelque peu subjective, qui dépend de paramètres tels que les paramètres du moniteur, le sexe (la plupart des carences de couleur concernent les hommes) et l'âge.

Vous pouvez adopter une approche légèrement "brutale" en préservant la teinte, forçant la saturation à 1,0 et la luminosité à 0,5.

(Si je me souviens d'un article que j'ai lu il y a quelques années, la quantité de lumière traversant la cornée d'un homme de 60 ans est inférieure à 25% de ce qui se passait à l'âge de 18 ans. Selon un article que j'ai trouvé - ici , le chiffre est encore pire - la transmission de la lumière varie entre un maximum de 16% (1/6) et un minimum de 6% (1/16) selon les conditions.)

0
Bevan