Construction de nuanciers répondant aux normes AA et AAA
Une palette étagée accessible permet de créer des nuancier de couleurs répondant autant que possible aux normes du WCAG. Les palettes proposées ci-dessous étagent 5 teintes, entre le blanc et le noir. Les valeurs et les teintes sont les 2 axes pris en compte dans cette matrice de couleurs (valeurs en axe vertical et teintes en axe horizontal). La rangée 1 présente une seul case, celle du blanc. La rangée 7 présente une seule case, celle du noir.
L'étagement normalisé du nuancier permet de garantir la norme AAA pour toutes les couleurs de rang n et n+4. La norme AA est garantie pour toutes les couleurs de rang n et n+3. La norme AA-large (texte normal supérieur à 18pt — 24px — ou texte gras supérieur à 14pt — 19px) est garantie pour toutes les couleurs de rang n et n+2, sauf si n est égal à 3.
Si les couleurs des rangées 3 et 5 sont utilisées l'une sur l'autre, elles ne passent aucune norme d'accessibilité. Les couleurs light-medium, medium et dark-medium (les couleurs des 3 rangées centrales) ne fonctionnent pas ensemble. Les normes AAA et AA-large sont garanties pour les couleurs des rangées 3 et 7 puis 1 et 5, sur le noir et le blanc, sous réserve d'une légère modification des couleurs (code hexadécimal indiqué entre parenthèses). En effet, quand une couleur présente un ratio de contraste de 7 sur le noir, elle présente un ratio de contraste de 2,99 sur le blanc. De même, si une couleur présente un ratio de contraste de 3 sur le noir, elle présente alors un ratio de contraste de 6.99 sur le blanc.
Dans cette palette de couleurs, l'échelle des ratios de contraste des couleurs sur le blanc est la suivante :1 - 1.51 - 3 - 4.58 - 7 - 13.83 - 21.
Les 7 valeurs de gris (ou d'obscurité) obtenues en prenant en compte la luminosité des couleurs en mode HSLuv sont :
0% - 16% - 38% - 51% - 62% - 82% - 100%
Ces valeurs d'obscurité sont obtenues en effectuant la différence entre 100 et la valeur de luminosité indiqué en mode HSLuv.
Les couleurs ont été déterminées en utilisant, dans un premier temps, l'application en ligne Leonardo Color. Les résulats obtenus ont été affinés en utilisant l'application Colour Contrast Checker. Le choix des couleurs présenté est indicatif. D'autres couleurs clés (key color) peuvent être choisies dans l'application Leonardo Color. L'espace colorimétrique HSLuv a été choisi dans Leonardo Color pour obtenir des couleurs plus saturées. Cependant, les couleurs de base choisies dans Leonardo Color ont parfois été assourdies ou désaturées, pour harmoniser l'accord des couleurs d'une palette.
Les palettes présentées ici sont des exemples. En téléchargeant la page Web et ses dépendances sur votre ordinateur, vous pouvez personnaliser les palettes (voir plus bas). Construisez des nuanciers répondant aux normes du WCAG en utilisant 3 couleurs seulement. Les possibilités sont nombreuses : faites-vous plaisir !
Un clic sur chaque couleur de la palette permet d'agrandir et fixer le rectangle de présentation de la couleur. Il est ainsi facile de déterminer visuellement un nuancier. Un second clic annule l'effet de zoom (... pensez alors à ne plus survoler la zone de couleur).
#fff White
0% (100%)
W 1 • M 4.58 • B 21
no • AA • AAA
#d0d2d2 Light
16% (84%)
W 1.51 • M 3.01 • B 13.83
no • AA-large • AAA
#aed7f7
16% (84%)
Hue a
Light
#84e0f1
16% (84%)
Hue b
Light
#7ee4d0
16% (84%)
Hue c
Light
#efcd99
16% (84%)
Hue d
Light
#ffc88a
16% (84%)
Hue e
Light
#959594 Light-medium
38% (62%)
W 2.99 (3) • M 1.52 • B 7 (6,99)
no (AA-large) • no • AAA (AAA-large)
#4c97f1 (#4c97f0)
38% (62%)
Hue a
Light-medium
#00a4b8 (#00a4b7)
38% (62%)
Hue b
Light-medium
#00a983 (#00a982)
38% (62%)
Hue c
Light-medium
#c08d00 (#c08c00)
38% (62%)
Hue d
Light-medium
#db7e10 (#db7e00)
38% (62%)
Hue e
Light-medium
#777574 Medium
51% (49%)
W 4.58 • M 1 • B 4.58
AA • no • AA
#0077d4
51% (49%)
Hue a
Medium
#00828e
51% (49%)
Hue b
Medium
#00856d
51% (49%)
Hue c
Medium
#996e00
51% (49%)
Hue d
Medium
#bc591b
51% (49%)
Hue e
Medium
#5a5956 Dark-medium
62% (38%)
W 7 (6.99) • M 1.52 • B 2.99 (3)
AAA (AAA-large) • no • no (AA-large)
#005aa4 (#005aa5)
62% (38%)
Hue a
Dark-medium
#00636b (#00636c)
62% (38%)
Hue b
Dark-medium
#00664a (#00664b)
62% (38%)
Hue c
Dark-medium
#755300 (#75530f)
62% (38%)
Hue d
Dark-medium
#914200 (#914300)
62% (38%)
Hue e
Dark-medium
#2f2c2c Dark
82% (18%)
W 13.83 • M 3.01 • B 1.51
AAA • AA-large • no
#002d59
82% (18%)
Hue a
Dark
#00323a
82% (18%)
Hue b
Dark
#003327
82% (18%)
Hue c
Dark
#3c2a00
82% (18%)
Hue d
Dark
#41260c
82% (18%)
Hue e
Dark
#000 Black
100% (0%)
B 21 • M 4.58 • N 1
AAA • AA • no
#fff White
0% (100%)
W 1 • M 4.58 • B 21
no • AA • AAA
#d0d2d2 Light
16% (84%)
W 1.51 • M 3.01 • B 13.83
no • AA-large • AAA
#fbcd00
16% (84%)
Hue f
Light
#c4dd50
16% (84%)
Hue g
Light
#a9d7fe
16% (84%)
Hue h
Light
#cbd2e5
16% (84%)
Hue i
Light
#d2cfec
16% (84%)
Hue j
Light
#959594 Light-medium
38% (62%)
W 2.99 (3) • M 1.52 • B 7 (6,99)
no (AA-large) • no • AAA (AAA-large)
#b59110 (#b58f40)
38% (62%)
Hue f
Light-medium
#8a9d4d (#8a9d46)
38% (62%)
Hue g
Light-medium
#129fdb (#129fd9)
38% (62%)
Hue h
Light-medium
#8294c8 (#8294c4)
38% (62%)
Hue i
Light-medium
#958cd6 (#958cd4)
38% (62%)
Hue j
Light-medium
#777574 Medium
51% (49%)
W 4.58 • M 1 • B 4.58
AA • no • AA
#8d7300
51% (49%)
Hue f
Medium
#6d7b4b
51% (49%)
Hue g
Medium
#0b7db1
51% (49%)
Hue h
Medium
#6175a3
51% (49%)
Hue i
Medium
#766abf
51% (49%)
Hue j
Medium
#5a5956 Dark-medium
62% (38%)
W 7 (6.99) • M 1.52 • B 2.99 (3)
AAA (AAA-large) • no • no (AA-large)
#6c5626 (#6c5700)
62% (38%)
Hue f
Dark-medium
#525e2c (#525e2f)
62% (38%)
Hue g
Dark-medium
#065f87 (#065f88)
62% (38%)
Hue h
Dark-medium
#495880 (#495882)
62% (38%)
Hue i
Dark-medium
#5949af (#5949b0)
62% (38%)
Hue j
Dark-medium
#2f2c2c Dark
82% (18%)
W 13.83 • M 3.01 • B 1.51
AAA • AA-large • no
#362b00
82% (18%)
Hue f
Dark
#292f13
82% (18%)
Hue g
Dark
#013047
82% (18%)
Hue h
Dark
#242c41
82% (18%)
Hue i
Dark
#2c2360
82% (18%)
Hue j
Dark
#000 Black
100% (0%)
B 21 • M 4.58 • N 1
AAA • AA • no
#fff White
0% (100%)
W 1 • M 4.58 • B 21
no • AA • AAA
#d0d2d2 Light
16% (84%)
W 1.51 • M 3.01 • B 13.83
no • AA-large • AAA
#cbcefd
16% (84%)
Hue k
Light
#dec8fe
16% (84%)
Hue l
Light
#fabdff
16% (84%)
Hue m
Light
#fbc4c6
16% (84%)
Hue n
Light
#e5cdc0
16% (84%)
Hue o
Light
#959594 Light-medium
38% (62%)
W 2.99 (3) • M 1.52 • B 7 (6,99)
no (AA-large) • no • AAA (AAA-large)
#7f8cfb (#7e8bfc)
38% (62%)
Hue k
Light-medium
#bb74fb (#b875fc)
38% (62%)
Hue l
Light-medium
#f63dff (#f63bff)
38% (62%)
Hue m
Light-medium
#f5666f (#f7646b)
38% (62%)
Hue n
Light-medium
#b48d76 (#b38d77)
38% (62%)
Hue o
Light-medium
#777574 Medium
51% (49%)
W 4.58 • M 1 • B 4.58
AA • no • AA
#5067f3
51% (49%)
Hue k
Medium
#a934fc
51% (49%)
Hue l
Medium
#d602bb
51% (49%)
Hue m
Medium
#e52032
51% (49%)
Hue n
Medium
#8f6f5a
51% (49%)
Hue o
Medium
#5a5956 Dark-medium
62% (38%)
W 7 (6.99) • M 1.52 • B 2.99 (3)
AAA (AAA-large) • no • no (AA-large)
#1844e5 (#1945e4)
62% (38%)
Hue k
Dark-medium
#8514ce (#8611d1)
62% (38%)
Hue l
Dark-medium
#9e01a4 (#9e00a7)
62% (38%)
Hue m
Dark-medium
##af1a27 (#b01926)
62% (38%)
Hue n
Dark-medium
#695548 (#6a5547)
62% (38%)
Hue o
Dark-medium
#2f2c2c Dark
82% (18%)
W 13.83 • M 3.01 • B 1.51
AAA • AA-large • no
#0a2278
82% (18%)
Hue k
Dark
#460272
82% (18%)
Hue l
Dark
#540057
82% (18%)
Hue m
Dark
#5f060e
82% (18%)
Hue n
Dark
#3a2920
82% (18%)
Hue o
Dark
#000 Black
100% (0%)
B 21 • M 4.58 • N 1
AAA • AA • no
Les couleurs sont paramétrées en tant que variables dans la feuille de style de la page Web. Dans la mesure où vous savez modifier un fichier CSS, il vous est donc possible de modifier les palettes présentées.
Une première méthode consiste à utiliser l'application en ligne Leonardo Color. Dans un premier temps, il vous faut paramétrer Leonardo Color pour obtenir une échelle de couleurs dont les ratios sont successivement 1.51, 3, 4.58, 7 et 13.83 (à partir de la couleur de base de votre choix). Une étape laborieuse doit ensuite être franchie : vérifier les contrastes des couleurs fournies par Leonardo Color sur le blanc et sur le noir. Utilisez pour cela Color Contrast Checker ou Contrast Ratio. Des ajustements sont nécessaires pour que les normes d'accessibilité soient réellement atteintes (en particulier pour les rangées 3 et 5). Copiez ensuite les codes des couleurs obtenues à la place de ceux des couleurs a, b, c, ... n ou o, en tête de la feuille de style. Il vous faudra aussi modifier le nom des couleurs dans l'index HTML. Attention à ne pas vous tromper de palette : appuyez-vous sur les commentaires insérés dans le code source !
Une seconde méthode consiste à utiliser l'application en ligne disposnible sur hsluv.org. Il s'agit premièrement, dans cette application, de fixer la luminosité à l'une des valeurs souhaitées (84, 62, 49, 38 ou 18%). Faites ensuite varier la teinte et la saturation jusqu'à ce que vous obteniez la couleur souhaitée. Le plus simple est de déplacer le curseur dans la zone des couleurs de hsluv.org. Une fois la teinte fixée, paramétrez la luminosité pour déterminer les autres couleurs de la gamme. Ne touchez pas à la saturation et utilisez les valeurs de luminisité suivantes : 84, 62, 49, 38 et 18%. Je vous suggère de partir d'une valeur de luminosité de 49% et de déterminer d'abord toutes les couleurs de valeur moyenne. Déterminez ensuite les couleurs correspondant aux autres valeurs de luminosité. L'étape des contrôles reste indispensable. Pour l'intégration des couleurs dans la page Web, les étapes sont les mêmes que précédemment.
Les valeurs des couleurs des trois palettes présentées ont toutes été contrôlées. Dans une même gamme de couleurs, de très légères variantes de teinte (Hue) ont toutefois été tolérées afin de préserver au mieux l'exactitude des ratios de contraste affichés.