🎨 Color Contrast Checker — WCAG AA/AAA

Check foreground/background color contrast ratios against WCAG AA and AAA accessibility standards. Instant pass/fail results for normal and large text. Free color contrast checker.

Foreground (Text)

Background

The quick brown fox jumps over the lazy dog

Normal body text — can you read this clearly?

Large Text (24px bold)

—

Contrast Ratio

—

AA Normal ≥4.5:1

—

AA Large ≥3:1

—

AAA Normal ≥7:1

—

AAA Large ≥4.5:1

How to Use

Pick your colors

Use the color pickers or type HEX codes for both the foreground (text) color and background color.

Read the contrast ratio

The tool instantly calculates the contrast ratio and shows Pass/Fail for all four WCAG 2.1 standards (AA/AAA × normal/large text).

Adjust until you pass

Tweak colors until you reach the standard you need. The preview text updates in real time so you can see the actual readability.

Frequently Asked Questions

What contrast ratio does WCAG require? +

WCAG 2.1 Level AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text? +

Large text is defined as 18pt (24px) or larger, or 14pt bold (18.67px bold) or larger. Below these sizes the stricter AA 4.5:1 requirement applies.

How is the contrast ratio calculated? +

The tool calculates relative luminance for each color using the WCAG formula, then divides the lighter luminance by the darker: (L1 + 0.05) / (L2 + 0.05).

Can I check transparent overlays? +

This tool checks opaque colors. For semi-transparent text, first compute the final rendered color by blending with the background, then paste that result into the checker.

Guide : Vérificateur de Contraste des Couleurs

Qu'est-ce que c'est ?

Le Vérificateur de Contraste calcule le ratio de contraste entre deux couleurs et indique si elles satisfont les critères WCAG 2.1 AA (4.5:1) et AAA (7:1) pour l'accessibilité.

Un contraste insuffisant rend le texte difficile à lire pour les personnes malvoyantes ou daltoniennes.

Comment utiliser

Choisissez la couleur du texte et la couleur de fond.
Le ratio de contraste s'affiche immédiatement.
Vérifiez les résultats WCAG AA et AAA pour le texte normal et grand.
Ajustez les couleurs jusqu'à atteindre le niveau d'accessibilité souhaité.

Conseils professionnels

Visez WCAG AA au minimum — AAA est préférable pour les interfaces accessibles.
Le texte de grande taille (>18px normal ou >14px gras) requiert seulement un ratio de 3:1.