Color contrast checker
Enter a text color and a background color to get the WCAG contrast ratio, pass/fail results for AA and AAA, the APCA lightness contrast, and a live preview. If a pair fails, one click adjusts the lightness until it passes — without changing the hue.
12.10:1 — #1B264F text on #F4E9CD passes WCAG AA and AAA for normal and large text.
How to use the contrast checker
- Pick or paste the text (foreground) color.
- Pick or paste the background color — use ⇄ to swap them.
- Read the ratio and the pass/fail badges for AA, AAA and UI components.
- If it fails, click “Adjust text to AA” or “Adjust background to AA” for the closest passing color.
- Copy the URL to share the exact pair — it updates as you edit.
What contrast ratio do I need?
WCAG 2.2 level AA requires 4.5:1 for normal text and 3:1 for large text (at least 24px, or 18.66px bold) and for user-interface components like input borders and icons. Level AAA raises this to 7:1 for normal text and 4.5:1 for large text. The ratio runs from 1:1 (no contrast) to 21:1 (black on white).
How the ratio is calculated
Each color is converted to relative luminance: the sRGB channels are linearised, then weighted 21.26% red, 71.52% green and 7.22% blue, because our eyes are most sensitive to green. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.
What is APCA?
APCA (Accessible Perceptual Contrast Algorithm) is the contrast model proposed for WCAG 3. It reports a lightness contrast value (Lc) that accounts for polarity — light text on dark reads differently from dark on light — and for font size. Roughly, |Lc| 75+ suits body text, 60+ content text and 45+ large headings. WCAG 2.2 remains the legal standard; APCA is shown as extra guidance.
Frequently asked questions
What is a good color contrast ratio?
At least 4.5:1 for body text (WCAG AA). 7:1 or higher (AAA) is better for long reading and low-vision users. Large text and UI components need at least 3:1.
Does the contrast checker work for color-blind users?
Contrast ratio is based on luminance, which color-blind users perceive normally, so a passing pair stays readable. To check hue-based differences, use the color-blindness preview in the palette generator.
Is this contrast checker free?
Yes. It is completely free with no account, no limits and no ads.
Can I check a whole palette at once?
Yes. Open the palette in the generator and use the Contrast panel: it scores every color pair and can fix failing pairs automatically.