WCAG (Web Content Accessibility Guidelines) is an international standard published by the W3C that defines how to make web content accessible to people with disabilities. The contrast requirements in WCAG 2.1 ensure that text is readable by people with low vision or color blindness.

Why does color contrast matter?

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. People with low vision also struggle with low-contrast text. Sufficient contrast ensures your content is readable by the widest possible audience and is often legally required for public-facing websites.

What is the difference between AA and AAA?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Level AA is the widely adopted legal standard; AAA provides the highest level of accessibility.

What is the difference between WCAG AA and AAA?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal standard in most jurisdictions. AAA is recommended for accessibility-critical contexts like medical or government sites.

Does contrast ratio apply to all text?

WCAG applies to text and images of text. Decorative text, logos, and inactive UI components are exempt. Large text (18pt+ regular or 14pt+ bold) has a lower threshold (3:1 AA) because larger type is easier to read at lower contrast. The checker flags which standard applies based on your selection.

What contrast ratio do I need to pass WCAG AA?

For standard body text (under 18pt regular / under 14pt bold), you need a minimum contrast ratio of 4.5:1. For large text (18pt regular or 14pt bold and above), the minimum is 3:1. A common accessible combination: dark gray (#333333) on white (#FFFFFF) gives a ratio of 12.6:1 — well above both thresholds.

Is white text or black text more readable on a colored background?

It depends on the background's luminance. A simple rule: if the background color's relative luminance is below 0.18 (the darker half of the luminance scale), use white text; above 0.18, use black text. Many design systems (Material Design, Bootstrap) use this threshold to automatically select text color for dynamic backgrounds.

Vérificateur de contraste WCAG — AA & AAA 2.1

Comment fonctionne le vérificateur de contraste

Entrez les couleurs du premier plan (texte) et de l'arrière-plan en valeurs HEX, ou cliquez sur les pastilles de couleur pour ouvrir un sélecteur natif. L'outil calcule la luminance relative WCAG 2.1 pour chaque couleur et dérive le ratio de contraste. L'aperçu en direct montre vos couleurs appliquées au texte normal, au grand texte et à un carré de composant UI.

Cinq badges PASS/FAIL montrent votre conformité à chaque critère WCAG 2.1. Utilisez les préréglages pour les combinaisons courantes rapides, ou cliquez sur « Inverser les couleurs » pour vérifier immédiatement la paire inverse.

Comprendre les exigences de contraste WCAG 2.1

WCAG (Web Content Accessibility Guidelines) est un ensemble de normes internationales développées par le W3C pour rendre le web accessible aux personnes handicapées. Les exigences de contraste garantissent la lisibilité pour les utilisateurs ayant une déficience visuelle, un daltonisme ou des yeux vieillissants. WCAG définit deux niveaux de conformité qui importent pour le contraste : Niveau AA (la norme légale largement adoptée) et Niveau AAA (accessibilité améliorée).

L'algorithme : décomposez la couleur HEX en canaux RVB (0–1), appliquez la correction gamma (c ≤ 0,04045 → c/12,92, sinon ((c+0,055)/1,055)^2,4), puis calculez la luminance relative comme 0,2126R + 0,7152G + 0,0722B. Le ratio de contraste est (L_clair + 0,05) / (L_foncé + 0,05). Un ratio de 21:1 est le maximum (noir sur blanc) ; 1:1 est le minimum (même couleur). Le grand texte est défini comme 18pt (24px) normal ou 14pt (18,67px) gras. « Composants UI » couvre les indicateurs de focus, les champs de formulaire et les objets graphiques.

Choisir des combinaisons de couleurs accessibles

Atteindre la conformité AA (4,5:1 pour le texte normal) est plus facile qu'il n'y paraît. Le noir (#000000) sur blanc (#ffffff) donne un ratio de 21:1 — le maximum théorique. Le texte foncé sur fond clair est presque toujours accessible. Les défis surviennent avec les couleurs de marque : un bleu moyen sur blanc peut donner seulement 3,5:1, ce qui échoue AA pour le texte normal mais passe pour le grand texte.

Conseils pratiques : assombrissez votre couleur de marque de 20 à 30 % pour le texte du corps sur des fonds clairs, ou utilisez une version très foncée pour les petits éléments de texte comme les légendes. Pour le mode sombre, éclaircissez considérablement votre couleur de marque — le même bleu qui échoue sur blanc à 3,5:1 peut atteindre 7:1 sur un fond sombre. Testez les combinaisons mode clair et mode sombre. Le texte gris sur blanc est l'un des échecs d'accessibilité les plus courants dans les systèmes de design modernes.

Exigences de contraste WCAG expliquées

Le niveau AA de WCAG 2.1 est le minimum légal dans de nombreux pays. Pour le texte normal (moins de 18pt normal / moins de 14pt gras), le ratio requis est de 4,5:1. Pour le grand texte (18pt normal ou 14pt gras et plus), le minimum descend à 3:1. Les composants UI tels que les bordures de formulaires, les indicateurs de focus et les objets graphiques exigent également 3:1.

Le niveau AAA de WCAG 2.1 est la cible améliorée, recommandée pour les contenus critiques tels que les sites médicaux ou gouvernementaux. Le texte normal doit atteindre 7:1 ; le grand texte doit atteindre 4,5:1. La formule du ratio de contraste utilise la luminance relative (L) : ratio = (L_clair + 0,05) / (L_foncé + 0,05). Blanc sur noir = 21:1 (maximum) ; même couleur sur elle-même = 1:1 (minimum).

Contexte juridique : WCAG est référencé par l'Americans with Disabilities Act (ADA, États-Unis), la Loi sur l'accessibilité pour les personnes handicapées de l'Ontario (LAPHO, Canada), la norme européenne EN 301 549, et l'Equality Act du Royaume-Uni. Le non-respect peut entraîner des poursuites judiciaires et des audits d'accessibilité.

Outils connexes : Sélecteur de couleur, Générateur de palette, et Terrain de jeu CSS.

Quand le contraste seul ne suffit pas

Les personnes daltoniennes représentent environ 8 % des hommes et 0,5 % des femmes dans le monde. La formule de contraste WCAG suppose une perception des couleurs standard, elle ne prend pas en compte les utilisateurs qui perçoivent le contraste différemment en raison d'une déficience de la vision des couleurs. La règle clé : ne jamais s'appuyer uniquement sur la couleur pour transmettre un sens. Toujours associer la couleur à des icônes, des étiquettes, des motifs ou d'autres indices visuels.

La forme la plus courante de daltonisme est le rouge-vert (deutéranopie et protanopie). Même si une combinaison de texte rouge sur vert ou vert sur rouge passe techniquement le ratio de contraste WCAG, les utilisateurs atteints de deutéranopie peuvent percevoir les deux couleurs à une luminance presque identique, rendant le texte pratiquement invisible. Évitez ces paires de couleurs pour le texte, quel que soit le résultat du ratio.

Mode sombre : une conception qui passe le contraste en mode clair peut échouer en mode sombre. De nombreuses équipes ne testent qu'un seul mode et livrent une accessibilité défaillante dans l'autre. Vérifiez toujours les deux thèmes — la même paire premier plan/arrière-plan inversée donne un ratio différent.

L'APCA (Advanced Perceptual Contrast Algorithm) est une approche plus récente et plus précise sur le plan perceptuel, en cours de développement pour WCAG 3.0. Contrairement à la formule de luminance relative de WCAG 2.1, l'APCA prend en compte le poids de la police, la taille de la police et le contexte de visualisation plus précisément. Ce n'est pas encore une norme publiée, mais les concepteurs travaillant sur l'accessibilité de nouvelle génération peuvent suivre son développement.

Questions fréquentes

Qu'est-ce que WCAG ?

WCAG (Web Content Accessibility Guidelines) est une norme internationale publiée par le W3C qui définit comment rendre le contenu web accessible aux personnes handicapées. Les exigences de contraste garantissent la lisibilité pour les personnes malvoyantes ou daltoniennes.

Pourquoi le contraste des couleurs est-il important ?

Environ 8 % des hommes et 0,5 % des femmes ont une forme de déficience de la vision des couleurs. Les personnes malvoyantes ont également du mal avec le texte à faible contraste. Un contraste suffisant garantit que votre contenu est lisible par le plus large public possible et est souvent légalement requis pour les sites web publics dans de nombreux pays.

Quelle est la différence entre AA et AAA ?

Le niveau AA de WCAG 2.1 exige un ratio de contraste minimum de 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. AA est le minimum légal largement adopté ; AAA offre le niveau d'accessibilité le plus élevé mais peut être difficile à atteindre avec des palettes de couleurs de marque.

Quelle est la différence entre WCAG AA et AAA ?

Le niveau AA de WCAG 2.1 exige un ratio de contraste minimum de 4,5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. AA est la norme légale dans la plupart des pays. AAA est recommandé pour les contextes où l'accessibilité est critique, comme les sites médicaux ou gouvernementaux.

Le ratio de contraste s'applique-t-il à tout le texte ?

WCAG s'applique au texte et aux images de texte. Le texte décoratif, les logos et les composants UI inactifs sont exemptés. Le grand texte (18pt+ normal ou 14pt+ gras) a un seuil plus bas (3:1 AA) car les caractères plus grands sont plus lisibles à faible contraste. Le vérificateur indique quelle norme s'applique selon votre sélection.

Quel ratio de contraste faut-il pour passer WCAG AA ?

Pour le texte courant (moins de 18pt normal / moins de 14pt gras), vous avez besoin d'un ratio de contraste minimum de 4,5:1. Pour le grand texte (18pt normal ou 14pt gras et plus), le minimum est de 3:1. Une combinaison accessible courante : gris foncé (#333333) sur blanc (#FFFFFF) donne un ratio de 12,6:1 — bien au-dessus des deux seuils.

Le texte blanc ou noir est-il plus lisible sur un fond coloré ?

Cela dépend de la luminance du fond. Une règle simple : si la luminance relative de la couleur de fond est inférieure à 0,18 (la moitié plus sombre de l'échelle de luminance), utilisez du texte blanc ; au-dessus de 0,18, utilisez du texte noir. De nombreux systèmes de design (Material Design, Bootstrap) utilisent ce seuil pour sélectionner automatiquement la couleur du texte sur des fonds dynamiques.

Vous pourriez aussi avoir besoin de

Voir tous les outils →

Outils complémentaires basés sur ce que vous faites

🎨

Sélecteur de couleursChoisissez et convertissez des couleurs

🎨

Générateur de palette de couleursGénérez des palettes harmonieuses

🎨

Atelier CSSDessinez votre CSS visuellement

📋

Formateur JSON & ValidateurPlus d'outils dev

Par Bam's Thinkery — Mis à jour le 2 mai 2026