Le ratio 4,5 est le minimum requis par WCAG 2.1 pour du texte normal en niveau AA, afin d’assurer une bonne lisibilité pour les personnes ayant une vision normale ou modérément déficiente.
Le ratio de contraste mesure la différence de luminosité entre la couleur du texte et celle de son arrière-plan. Il est exprimé sous la forme X:1, où X représente la clarté du texte par rapport au fond.
Exemple concret d’un ratio 4,5:1
- Texte #767676 (gris foncé) sur fond #FFFFFF (blanc) → Ratio ≈ 4,5:1
- Texte #000000 (noir) sur fond #AAAAAA (gris clair) → Ratio ≈ 4,5:1
💡 Si le ratio est inférieur à 4,5:1, le texte risque de ne pas être suffisamment lisible pour certains utilisateurs, notamment ceux ayant une déficience visuelle.
Les WCAG (Web Content Accessibility Guidelines) définissent des niveaux précis pour le contraste entre le texte et l’arrière-plan :
| Niveau WCAG | Ratio minimum exigé |
|---|---|
| AA (Texte normal, ≤ 18pt) | 4,5:1 |
| AA (Texte large, ≥ 18pt en gras ou 24px normal) | 3,0:1 |
| AAA (Texte normal, ≤ 18pt) | 7,0:1 |
| AAA (Texte large, ≥ 18pt en gras ou 24px normal) | 4,5:1 |
Echelle de contraste
Minimum : 1:1 → Aucune différence de contraste (ex : blanc sur blanc).
Maximum : 21:1 → Noir pur (#000000) sur blanc pur (#FFFFFF).
21:1 est la valeur maximale théorique, correspondant au contraste le plus élevé entre deux couleurs visibles.