Les couleurs moyennes présentées dans la palette ci-dessous permettent de composer des nuanciers fonctionnels de 3 couleurs avec le noir et le blanc. Un nuancier est dit fonctionnel quand l'échelle des valeurs de gris des couleurs du nuancier est régulièrement étagée. Ici, l'échelle est la suivante : noir 100 % > environ 50 % > blanc 0 %.
Dans un nuancier fonctionnel, le ratio de contraste entre deux couleurs voisines sur l'échelle des gris est toujours le même. Ici, ce ratio est proche de 4,56, conforme à la norme d'accessibilité AA pour toutes tailles de texte. Les ratios de contraste entre deux couleurs voisines des nuanciers sont mesurables avec les applications en ligne contrast-ratio ou colorable.
|
Norme d'accessibilité |
Aperçu |
Code couleur |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#757575 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#6f767b |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#6e7873 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#757765 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#76785a |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#7d7561 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#897255 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#8e6e6c |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#8b6c81 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#906798 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#ac50b9 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#ba3bcc |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#9f49e8 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#9940ff |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#8950ff |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#6f5ff0 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#6568de |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#606ecf |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#5070d3 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#4466ff |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#346fe7 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#2077d0 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#2a7ab0 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#307d9a |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#27818a |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#188472 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#40806a |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#058560 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#008856 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#46824f |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#537f50 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#41843f |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#368730 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#5a803a |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#647f00 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#7a780e |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#887522 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#927116 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#927030 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#9f6b3f |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#a76537 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#a96526 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#a86620 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#bb5900 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#bf5720 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#d44000 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#df3000 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#e22929 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#e32030 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#d04046 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#b35b5b |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#a76363 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#a06666 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#bb5566 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#cf3f60 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#e21474 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#db1b94 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#d511b1 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#c43fa0 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#af549a |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#a16092 |
|
AA/noir - AA/blanc |
Texte noir ★ Texte blanc |
#996688 |
Les normes d'accessibilité Web
Les règles pour l'accessibilité des contenus Web
L'étagement des contrastes dans un nuancier fonctionnel
Le nuancier aux valeurs régulièrement étagées du World Color Survey
Les couleurs étagées du système de design Web du gouvernement des États-Unis
La démarche des designers d'IBM pour étager et normaliser leurs palettes de couleurs
Le système Carbon, proposé par IBM, en appui sur leurs travaux de normalisation
Le système de design d'IBM avec ses palettes étagées normalisées