QuickATools

Outils développeur · Free browser tool

Vérificateur de contraste de couleurs WCAG

Vérifiez les ratios de contraste texte/fond en temps réel. Contrôlez la conformité WCAG 2.1 AA et AAA instantanément pour un design web accessible.

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

Quels ratios de contraste WCAG 2.1 exige-t-il vraiment ?

Le critère de succès WCAG 2.1 1.4.3 (Contrast Minimum) exige un ratio d’au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte au niveau AA. Le niveau AAA (1.4.6 Contrast Enhanced) relève ces planchers à 7:1 pour le texte normal et 4,5:1 pour le grand texte. Les ratios sont calculés à partir de la luminance relative de chaque couleur et vont de 1:1 (couleurs identiques) à 21:1 (noir pur sur blanc pur).

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

AA est la cible de conformité la plus courante pour sites publics, services gouvernementaux et produits commerciaux — elle équilibre lisibilité et flexibilité de design. AAA est un niveau renforcé plus strict quand vous avez besoin d’une lisibilité maximale (par ex. lecture longue ou audiences à basse vision significative). Atteindre AAA pour chaque élément UI est souvent peu pratique, donc beaucoup d’équipes visent AA globalement et AAA pour le corps de texte critique.

Qu’est-ce qui compte comme « grand texte » sous WCAG ?

Le grand texte est défini comme au moins 18 points (typiquement ~24 px) en graisse normale, ou au moins 14 points (typiquement ~18,66 px) en gras. Titres et copy hero se qualifient souvent ; les paragraphes de corps en général non. Le grand texte a un seuil de contraste plus bas car les glyphes plus grands restent lisibles à contraste plus faible — mais vous devez toujours vérifier la taille réellement rendue dans votre CSS, pas seulement le fichier de design.

Pourquoi le contraste de couleurs compte-t-il tant pour l’accessibilité ?

Le faible contraste est l’un des échecs d’accessibilité les plus courants. Utilisateurs à basse vision, adultes âgés, personnes sur écrans sombres ou lavés par le soleil, et beaucoup avec déficience de vision des couleurs s’appuient tous sur une différence de luminance suffisante — pas seulement la teinte — pour lire le texte. Vérifier le contraste tôt évite de livrer des interfaces poliées en conditions idéales mais inutilisables pour une grande part des visiteurs réels.

Autres outils utiles

Découvrez d’autres utilitaires gratuits dans le navigateur pour vendeurs, créateurs et professionnels.

Pourquoi le contraste de couleurs est non négociable pour des interfaces accessibles

Le design sans barrières n’est pas une étape de polish optionnelle — c’est ce qui permet aux personnes à basse vision, déficience de vision des couleurs ou éblouissement extérieur de lire encore votre UI. WCAG 2.1 définit des ratios de contraste minimum entre le texte et son fond pour que le contenu reste lisible pour une bien plus large gamme d’utilisateurs. Manquer ces seuils exclut discrètement des gens des formulaires, docs, tableaux de bord et pages marketing qui paraissent corrects aux designers sur moniteurs calibrés.

Sites gouvernementaux, produits entreprise et beaucoup d’apps grand public mondiales sont censés atteindre au moins WCAG AA. Vérifier le contraste dans le navigateur — avec la même formule de luminance relative que la spécification — permet de valider les décisions de palette avant livraison, sans uploader les couleurs de marque à un service tiers. Échangez texte et fond, prévisualisez grand vs texte normal, et partagez un lien de palette avec l’équipe quand une combinaison passe.

AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte ; AAA relève ces barres à 7:1 et 4,5:1. Le grand texte signifie en général 18 pt (environ 24 px) regular ou 14 pt (environ 18,66 px) bold. Utilisez cet outil comme gate rapide en revue design, puis confirmez l’UI finale en contexte — icônes, dégradés et overlays peuvent changer le contraste effectif même quand deux hex plats passent.

Plus d’utilitaires développeur sur ce site : validez des motifs de formulaire avec le Testeur Regex, inspectez des jetons d’auth dans le Décodeur JWT, rangez des design tokens en JSON avec le Formateur et validateur JSON, ou encodez des assets via Encoder/décoder Base64. Pour les photos produit marketplace, le Vérificateur de fond photo produit réutilise la même mathématique de luminance sur de vraies images.