Contraste de la couleur
Le contraste de la couleur (angl.) entre l'arrière-plan et le contenu de premier plan (généralement du texte) doit être suffisamment prononcé pour garantir la lisibilité.
Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants :
| Type de contenu | Ratio minimum (Note AA) | Ratio amélioré (Note AAA) |
|---|---|---|
| Corps | 4,5:1 | 7:1 |
| Texte grande échelle (120-150% plus large que le corps) | 3:1 | 4,5:1 |
| Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques | 3:1 | Non défini |
Ces ratios ne s'appliquent pas au texte « accessoire », comme les contrôles inactifs, les logotypes ou le texte purement décoratif.
Voir la section Solution ci-dessous pour plus d'informations.
Un bon contraste des couleurs sur votre site profite à tou·te·s vos utilisateur·ice·s, mais cela est particulièrement important pour les utilisateur·ice·s souffrant de certains types de daltonisme ou d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à distinguer des couleurs proches. Ces utilisateur·ice·s ne perçoivent pas les zones claires et sombres aussi facilement que celles et ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.
Un design attrayant ne sert à rien si vos utilisateur·ice·s ne peuvent pas lire votre contenu.
Exemples
Jetons un coup d'œil à un code HTML et CSS simple :
<div class="bon">Bon contraste</div>
<div class="mauvais">Mauvais contraste</div>
div {
/* Styles généraux de div ici */
}
.good {
background-color: #5a80a9;
}
.bad {
background-color: #400064;
}
Les deux textes ont leur couleur noire par défaut. La « bonne » <div> a un fond violet clair, ce qui rend le texte facile à lire :
Bon constraste
<div class="bon">Bon contraste</div>
div {
font-family: sans-serif;
text-align: center;
font-size: 2rem;
font-weight: bold;
width: 250px;
padding: 30px;
border-radius: 20px;
box-shadow: 4px 4px 4px black;
}
.bon {
background-color: #5a80a9;
}
Mauvais constraste
La « mauvaise » <div>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire :
<div class="mauvais">Mauvais contraste</div>
div {
font-family: sans-serif;
text-align: center;
font-size: 2rem;
font-weight: bold;
width: 250px;
padding: 30px;
border-radius: 20px;
box-shadow: 4px 4px 4px black;
}
.mauvais {
background-color: #400064;
}
Solution
Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste. Faites en sorte que le contraste des couleurs soit aussi élevé que possible dans vos contraintes de conception : visez idéalement la note AAA (voir paragraphe 1.4.6 ci-dessous), mais respectez au moins la note AA (voir paragraphe 1.4.3 ci-dessous).
Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (voir ci-dessous).
Pour vérifier le contraste lors du choix de vos couleurs, vous pouvez utiliser le Vérificateur de Contraste des Couleurs (angl.) de WebAIM.
Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox : consultez notre guide de l'Inspecteur de l'accessibilité (angl.), et en particulier la section Vérifier les problèmes d'accessibilité (angl.). Essayez de les utiliser sur les exemples dans la section de description.
Critères de réussite associés aux WCAG
- 1.4.3 Contraste minimum (AA) (angl.)
-
Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité :
- Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 4,5:1.
- Le texte d'en-tête (ou simplement « plus grand ») doit avoir un ratio d'au moins 3:1. Le texte « plus grand » est défini comme au moins 18pt, ou 14pt en gras.
- 1.4.6 Contraste amélioré (AAA) (angl.)
-
Cela suit et s'appuie sur le critère 1.4.3.
- Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 7:1.
- Le texte d'en-tête (ou simplement « plus grand ») doit avoir un ratio d'au moins 4,5:1.
- 1.4.11 Contraste non textuel (AA) (angl.)
-
Il doit y avoir un ratio de contraste de couleur minimum de 3:1 pour les composants de l'interface utilisateur et les objets graphiques.