La couleur à l'écran, ce sont trois nombres : la quantité de lumière rouge, verte et bleue à mélanger, chacune de 0 à 255. Tout le reste, codes hexadécimaux, HSL et rapports de contraste, n'est qu'une autre façon d'écrire ou de juger ces trois nombres.
Hex, RGB et HSL désignent la même couleur
#3366cc est l'hexadécimal du rouge 0x33 = 51, du vert 0x66 = 102 et du bleu 0xCC = 204 ; c'est donc aussi rgb(51, 102, 204). Chaque canal a 256 niveaux, soit 256³ = 16 777 216 couleurs. Un hexadécimal à trois chiffres comme #36c double chaque chiffre (#3366cc). Convertissez entre les formes avec le Convertisseur de Couleurs et le Convertisseur RGB vers HEX.
HSL décrit la même couleur par teinte, saturation et luminosité : #3366cc vaut hsl(220, 60%, 50%). La teinte est la position sur le cercle chromatique en degrés (0 rouge, 120 vert, 240 bleu) ; la décaler de 180° donne la complémentaire : ici #cc9933, un orange. HSL facilite la création de variantes plus claires, plus sombres ou moins saturées.
Contraste : est-ce lisible ?
WCAG définit le contraste comme (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre, somme pondérée des canaux linéarisés (0,2126 R + 0,7152 G + 0,0722 B ; le vert pèse le plus car l'œil y est le plus sensible). Le rapport va de 1:1 (identiques) à 21:1 (noir sur blanc).
| Niveau | Texte normal | Grand texte et éléments d'interface |
|---|---|---|
| AA | au moins 4,5:1 | au moins 3:1 |
| AAA | au moins 7:1 | au moins 4,5:1 |
Le grand texte fait environ 24px ou 19px en gras. Quelques valeurs réelles : noir sur blanc donne 21:1 ; le gris #767676 sur blanc 4.54:1, le gris neutre le plus clair qui passe AA pour le texte courant, tandis que #777777 donne 4.48:1 et échoue ; le bleu de Bootstrap #0d6efd sur blanc donne 4.50:1, tout juste à la limite. Testez vos propres paires avec le Vérificateur de Contraste des Couleurs.
Ne comptez pas sur la couleur seule. Ajoutez un second indice (icône, soulignement ou libellé) pour les erreurs et les liens, et choisissez des paires qui restent distinguables pour les personnes daltoniennes. Environ 1 homme sur 12 et 1 femme sur 200 ont une déficience rouge-vert ; le Simulateur de Daltonisme montre comment une image leur apparaît.
Construire et trouver des palettes
- Complémentaire : teinte + 180°. Analogue : teintes à moins d'environ 30° les unes des autres. Triadique : teintes espacées de 120°.
- Choisissez une couleur de base dans une photo avec le Sélecteur de Couleur d'Image ou extrayez toute une palette d'une image avec l'Extracteur de Palette de Couleurs d'Image.
- Générez des idées avec le Générateur de Palette de Couleurs Aléatoire, puis vérifiez le contraste de chaque paire texte et fond.
- Les dégradés mélangent deux couleurs ; créez-en un avec le Générateur de Dégradé CSS et gardez un contraste de texte élevé aux deux extrémités.
Erreurs fréquentes
- Texte gris clair sur blanc. C'est élégant et illisible pour beaucoup de gens.
- Ne vérifier que le fond. Un texte sur photo ou dégradé se vérifie à son pire point.
- Miser sur rouge contre vert. Ajoutez des formes ou des libellés.
- Oublier le mode sombre. Testez la palette dans les deux thèmes.