Pourquoi le contraste des couleurs est important
Environ 8% des hommes et 0,5% des femmes souffrent d'une forme de daltonisme. Des millions d'autres ont une sensibilite au contraste reduite due au vieillissement, a la cataracte ou aux conditions de lecture (plein soleil, vieux moniteurs). Un texte a faible contraste n'est pas un inconvenient mineur, il rend le contenu illisible pour une part significative de votre audience.
Le WCAG (Web Content Accessibility Guidelines) fournit la norme internationale pour le contraste des couleurs accessible, referencee dans les legislations mondiales (RGAA en France, EN 301 549 en UE, ADA aux Etats-Unis).
Qu'est-ce que le ratio de contraste ?
Le ratio de contraste mesure la difference de luminance entre deux couleurs. Il s'exprime de 1:1 (memes couleurs, aucun contraste) a 21:1 (texte noir sur fond blanc, contraste maximal).
La formule compare la luminance relative (mesure ponderee de la luminosite percue) de la couleur de premier plan par rapport au fond :
Ratio = (L1 + 0,05) / (L2 + 0,05)
Ou L1 est la luminance de la couleur la plus claire et L2 celle de la plus sombre. Vous n'avez pas besoin de calculer cela manuellement, les verificateurs de contraste s'en chargent.
Exigences WCAG 2.1
Niveau AA (exigence standard)
| Type de contenu | Ratio minimum |
|---|---|
| Texte normal (< 18pt / 14pt gras) | 4,5:1 |
| Grand texte (>= 18pt ou >= 14pt gras) | 3:1 |
| Composants UI et elements graphiques | 3:1 |
Niveau AAA (renforce)
| Type de contenu | Ratio minimum |
|---|---|
| Texte normal | 7:1 |
| Grand texte | 4,5:1 |
Ce qui est exempte
- Texte purement decoratif
- Texte dans les logos et noms de marque
- Composants desactives
- Contenu image pur
Comment verifier le contraste
Dans les outils de developpement
Chrome et Firefox ont des verificateurs de contraste integres. Dans DevTools, selectionnez un element de texte, regardez l'onglet Accessibilite, le ratio de contraste est affiche avec les indicateurs de reussite/echec.
Outil dedie
Le Verificateur de contraste des couleurs de ce site vous permet d'entrer n'importe quelle couleur (HEX, RGB ou HSL) et affiche instantanement le ratio de contraste, les resultats WCAG AA/AAA et un apercu du texte a plusieurs tailles.
Echecs courants et corrections
Texte gris clair sur fond blanc, extremement frequent, echoue presque toujours. Assombrissez le texte ou eclaircissez le fond.
Texte blanc sur couleur de saturation moyenne, echoue souvent pour les petits textes meme si ca semble correct pour les grands. Verifiez a la taille de police reelle.
Texte de placeholder, la couleur par defaut des navigateurs est tres claire et echoue presque toujours au WCAG AA. Utilisez color: #767676 ou plus sombre pour le placeholder.
Icones sans label, une icone sans texte est un element graphique et doit atteindre le ratio 3:1 contre son fond.
Information transmise par la couleur seule, ne transmettez jamais une information uniquement par la couleur (ex. "les erreurs sont en rouge"). Cela echoue au WCAG 1.4.1 meme si le contraste est suffisant.
WCAG 3.0 et APCA
WCAG 3.0 (en cours de developpement) introduit APCA (Advanced Perceptual Contrast Algorithm), qui tient compte de la graisse et la taille de la police, et du contexte de visualisation. Il produit moins de faux positifs et faux negatifs que le ratio actuel 4,5:1. Suivez son evolution pour les projets futurs, la norme 2.1 reste la reference legale.
En resume
WCAG 2.1 exige au minimum un ratio de contraste de 4,5:1 pour le texte normal et de 3:1 pour le grand texte et les composants UI (niveau AA). Testez tot dans le processus de design, adapter les choix de couleurs apres coup est bien plus difficile que de les definir correctement des le depart.