Color Contrast Checker

Pick a text color and a background color to get the WCAG contrast ratio, with pass/fail badges for AA and AAA at both normal and large text sizes, and a live preview so you can see the result.

Pick two colors to see the contrast ratio.

How contrast is measured

The WCAG contrast ratio compares the relative brightness (luminance) of two colors. It ranges from 1:1 (identical) to 21:1 (pure black on pure white). Each color's relative luminance is computed by linearizing its red, green and blue channels and weighting them by how the eye perceives each:

ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

where L is relative luminance. The 0.05 terms account for ambient screen glare. Because the ratio uses perceived brightness, two colors that look different can still have poor contrast if their luminances are close.

Worked example

Slate text #475569 on white #ffffff:

Luminance: white ≈ 1.0, slate ≈ 0.12.
Ratio: (1.0 + 0.05) ÷ (0.12 + 0.05) ≈ 7.1:1.
Result: passes AA and AAA for normal text — comfortably readable.

WCAG thresholds

The Web Content Accessibility Guidelines set minimums: AA requires 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). The stricter AAA level requires 7:1 for normal and 4.5:1 for large text. The checker shows pass/fail badges for each combination so you can tell at a glance whether your color pair is accessible — and the live preview lets you sanity-check it with your own eyes.

Tip: building a palette? Use the color palette generator, or convert values with the hex to RGB converter and the color picker.

Frequently asked questions

What contrast ratio do I need?

WCAG AA — the common legal baseline — needs 4.5:1 for normal text and 3:1 for large text. AAA, the stricter level, needs 7:1 and 4.5:1. Higher is always more readable, especially for low-vision users.

What counts as large text?

Large text is at least 18pt (about 24px) regular, or 14pt (about 18.66px) bold. It gets a lower contrast requirement because bigger, heavier letterforms are easier to read at the same ratio.

Why do similar-looking colors fail?

Contrast is about luminance, not hue. Two colors can look distinct yet have very close brightness — like medium blue on medium green — so they fail even though they're 'different' colors. The ratio reflects how readable the pair actually is.

Does the 0.05 in the formula matter?

Yes, slightly. The 0.05 added to each luminance models ambient screen reflection, which lifts the effective brightness of dark colors. It keeps very dark-on-dark pairs from scoring unrealistically high ratios.

MB
Mustafa Bilgic · Editor, Calcool
Uses the official WCAG 2.1 relative-luminance and contrast-ratio formulas. Everything runs in your browser — nothing you enter is uploaded, logged or stored.

Related calculators

🎨 Color Palette Generator🌈 Hex to RGB Converter🎯 Color Picker🌅 CSS Gradient Generator