Nuanciers fonctionnels de 3 couleurs
répondant à la norme d'accessibilité AA

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.

Les couleurs moyennes présentées ci-dessous ont également un ratio de contraste sur noir et sur blanc conforme à la norme d'accessibilité AAA pour les textes gras de plus de 14 pt et pour les textes normaux de plus de 18 pt.

Norme d'accessibilité

Aperçu
Texte gras - 14 pt (18,66 px)

Code couleur
Texte normal - 18 pt (24 px)

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#757575

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#6f767b

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#6e7873

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#757765

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#76785a

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#7d7561

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#897255

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#8e6e6c

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#8b6c81

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#906798

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#ac50b9

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#ba3bcc

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#9f49e8

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#9940ff

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#8950ff

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#6f5ff0

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#6568de

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#606ecf

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#5070d3

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#4466ff

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#346fe7

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#2077d0

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#2a7ab0

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#307d9a

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#27818a

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#188472

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#40806a

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#058560

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#008856

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#46824f

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#537f50

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#41843f

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#368730

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#5a803a

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#647f00

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#7a780e

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#887522

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#927116

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#927030

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#9f6b3f

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#a76537

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#a96526

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#a86620

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#bb5900

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#bf5720

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#d44000

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#df3000

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#e22929

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#e32030

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#d04046

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#b35b5b

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#a76363

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#a06666

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#bb5566

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#cf3f60

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#e21474

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#db1b94

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#d511b1

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#c43fa0

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#af549a

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#a16092

AA/noir - AA/blanc
pour toutes tailles de texte

Texte noir    Texte blanc

#996688

Liens utiles

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