Le ratio de contraste WCAG est une mesure qui évalue la différence de luminance entre une couleur de texte et son arrière-plan afin d’assurer une lisibilité optimale, notamment pour les personnes ayant des déficiences visuelles.
📌 Formule simplifiée
ratios WCAG = L claire +0.05 / L sombre +0.05où L est la luminance relative d’une couleur.
🔹 Exemples de ratios WCAG :
Conformité AAA (accessibilité renforcée) → 7:1.
Texte normal (moins de 18pt ou 24px) → 4.5:1 (minimum AA)
Texte grand format (≥ 18pt ou 24px, ou ≥ 14pt/19px en gras) → 3:1
Deux types de ratios de contraste différents
Contraste des écrans (5000:1, 1000:1, etc.)
Ce ratio concerne la capacité d’un écran à afficher des noirs profonds et des blancs lumineux.
- Exemple : Un écran avec un ratio de 5000:1 peut afficher un blanc 5000 fois plus lumineux que son noir le plus sombre.
- Plus ce chiffre est élevé, plus l’écran offre un contraste profond et des images plus nettes.
➡️ C’est une caractéristique matérielle, liée à l’affichage et mesurée en candelas/m² (nits).
Les ratios de contraste des écrans (5000:1, 1000:1, etc.) sont des mesures physiques basées sur la luminosité pure.
Contraste des couleurs en accessibilité (4.5:1, 3:1, etc.)
Ici, on parle du contraste entre deux couleurs affichées sur un site web, notamment entre le texte et son arrière-plan.
- Exemple :
- Un texte noir sur fond blanc a un contraste élevé (~21:1).
- Un texte gris foncé sur fond gris clair a un contraste plus faible (~4.5:1).
Le contraste est calculé différemment :
- On utilise la luminance relative (une mesure de la perception de la luminosité par l’œil humain).
- La formule WCAG prend en compte la perception du contraste des couleurs plutôt que la capacité d’un écran à afficher du noir et du blanc.
➡️ Les valeurs comme 4.5:1 ou 3:1 sont des ratios spécifiques à l’accessibilité web, qui garantissent que le texte reste lisible pour tout le monde, y compris les personnes malvoyantes.
Les ratios WCAG (4.5:1, 3:1, etc.) sont basés sur la perception humaine et comparent la clarté entre deux couleurs.
Accessibilité web (WCAG)
Les WCAG (Web Content Accessibility Guidelines) sont un ensemble de recommandations visant à rendre le web accessible à tous, y compris aux personnes ayant des déficiences visuelles.
Le contraste des couleurs est un critère essentiel pour assurer la lisibilité du texte et des éléments graphiques sur un site. Il est mesuré à l’aide d’un ratio de contraste, qui compare la luminance des couleurs du texte et de son arrière-plan.
Niveau AA (Accessibilité minimale)
Le niveau AA est le minimum recommandé pour la conformité aux normes d’accessibilité.
Exigences pour le texte :
- Texte normal (moins de 18pt ou 24px) : Ratio minimum 4.5:1
- Grand texte (≥ 18pt ou 24px, ou en gras ≥ 14pt/19px) : Ratio minimum 3:1
Cela garantit que la plupart des personnes ayant une déficience visuelle modérée peuvent lire le texte sans difficulté.
Niveau AAA (Accessibilité améliorée)
Le niveau AAA est plus exigeant et vise une accessibilité optimale.
Exigences pour le texte :
- Texte normal : Ratio minimum 7:1
- Grand texte : Ratio minimum 4.5:1
Ces ratios garantissent une lisibilité maximale, même pour les personnes ayant une forte déficience visuelle.
Composants d’interface et éléments graphiques
Les éléments interactifs et graphiques essentiels (boutons, liens, icônes informatives, etc.) doivent aussi respecter un contraste suffisant.
Exigences :
- Ratio minimum de 3:1 entre un élément d’interface (ex. : bouton) et son arrière-plan.
- Exemple : Un bouton clair sur un fond blanc doit avoir une bordure ou un texte suffisamment contrasté.
- Un ratio minimum de 3:1 est recommandé pour les composants d’interface utilisateur et les éléments graphiques importants.
Voir aussi : ratio de contraste écran
Synonyme : rapport de contraste