Accessibility · WCAG 2.x

WCAG COLOR
CONTRAST CHECKER

Enter a text color and a background color. You get the exact WCAG contrast ratio and whether it passes AA and AAA — for normal text, large text, and UI — with a live preview. Runs entirely in your browser.

Large heading text
The quick brown fox jumps over the lazy dog. Body text at a normal reading size.
21:1
contrast ratio · 1:1 to 21:1
What this is — and isn't. This computes the WCAG 2.x contrast ratio exactly, the same formula browsers and auditors use. It checks one success criterion — color contrast. It is not a full accessibility audit: WCAG conformance also covers keyboard access, focus, alt text, semantics and more. Contrast is also a different axis from colorblind-safety — a design needs both.
Method. Contrast ratio = (Llighter + 0.05) / (Ldarker + 0.05), where L is WCAG relative luminance from linearized sRGB (0.2126 R + 0.7152 G + 0.0722 B). Thresholds: normal text AA 4.5, AAA 7; large text (≥18pt or 14pt bold) AA 3, AAA 4.5; UI & graphics 3. Same engine as our published colorblind-safe method — opticquiz-cvd on npm and PyPI.

QUESTIONS

What is a good WCAG contrast ratio?

AA wants at least 4.5:1 for normal text and 7:1 for AAA. Large text (≥18pt, or 14pt bold) needs 3:1 for AA and 4.5:1 for AAA. UI components and meaningful graphics need at least 3:1. Higher is always more legible; 21:1 is the max — black on white.

How is it calculated?

Each color is linearized from sRGB and weighted 0.2126 red, 0.7152 green, 0.0722 blue to get its relative luminance. The ratio is (lighter + 0.05) / (darker + 0.05). This page runs that exact formula on your device — nothing is uploaded.

Does passing contrast make my site WCAG compliant?

No. Contrast is one criterion among many. Use this to fix color legibility early, and a full review for conformance.

Is this the same as the contrast sensitivity test?

No. This is a design tool for text/background legibility. The contrast sensitivity test measures your own eyes' ability to detect faint letters — a different thing entirely.

Colorblind-Safe Palette Checker → the other color axis The published method behind the engine → All OpticQuiz vision & color tests →