WCAG Contrast Checker

You probably arrived here asking a version of the same question: is this text actually readable on this background? Accessibility guidelines (WCAG 2.1) answer it with a single number — the contrast ratio between two colours, running from 1:1 (identical) to 21:1 (black on white). This tool measures that ratio for any pair and tells you exactly which standards it passes.

The thresholds are 4.5:1 for normal body text (level AA), 7:1 for enhanced readability (AAA), and 3:1 for large text (18 pt+, or 14 pt+ bold), icons and form borders. Clearing them keeps your interface usable for people with low vision or colour blindness — and, increasingly, keeps you on the right side of accessibility law.

How to use it

1. Set your two colours — type or paste a HEX value, or click a swatch to pick one visually.
2. Read the big ratio and the AA / AAA badges; they update the instant you change either colour.
3. Use the live text preview to judge the pair with your own eyes, not just the number.
4. If it fails, open Accessible Alternatives for tuned shades of the same hue that pass — so you keep your colour, just at a usable lightness.
5. Check the Colour Blindness simulation to be sure the two stay distinguishable for the most common types of colour vision.

Good to know

• Large text gets a lower bar (3:1) because thicker strokes read more easily — but don't lean on that for long paragraphs.
• Contrast is only half the job: never rely on colour alone to carry meaning — pair it with icons, labels or underlines.