Laboratoire de contraste WCAG 2.2

Vérifiez n’importe quelle paire de couleurs, texte et fond.

Saisissez deux couleurs sRGB opaques pour calculer leur rapport de contraste, vérifier les seuils WCAG AA et AAA du texte, examiner la combinaison et copier le CSS exact.

01 / Rapport de contraste

Un rapport, quatre seuils pour le texte.

Les rapports WCAG sont des seuils : un résultat insuffisant ne doit pas être arrondi à la hausse. Un grand texte mesure au moins 24 pixels CSS en graisse normale, ou environ 18,7 pixels CSS en gras.

5,43:1

Conforme

AA · texte normal

Seuil 4,5:1

Conforme

AA · grand texte

Seuil 3:1

Non conforme

AAA · texte normal

Seuil 7:1

Conforme

AAA · grand texte

Seuil 4,5:1

Mise en œuvre

Transférez la paire vérifiée dans votre CSS.

Les propriétés personnalisées conservent les valeurs opaques exactes du calcul. Vérifiez chaque état et chaque surface où cette combinaison apparaît réellement.

--text-color: #000000;
--background-color: #2F80ED;
color: var(--text-color);
background-color: var(--background-color);

Critères publiés

Ce que cette vérification démontre — et ses limites.

Le calcul applique les règles WCAG 2.2 de luminance relative et de rapport de contraste pour les couleurs sRGB. Un résultat numérique apporte une preuve pour cette paire, mais ne certifie pas à lui seul une page ou un produit.

1.4.3

Contraste minimal du texte

Au niveau AA, le texte normal exige au moins 4,5:1 et le grand texte, 3:1.

Lire les explications du W3C

1.4.6

Contraste renforcé du texte

Au niveau AAA, le texte normal exige au moins 7:1 et le grand texte, 4,5:1.

Lire les explications du W3C

1.4.11

Contraste non textuel

Les contrôles, états et objets graphiques essentiels exigent généralement 3:1 par rapport aux couleurs adjacentes, mais leurs limites réelles doivent être vérifiées en contexte.

Lire les explications du W3C