Color Contrast Checker — WCAG AA & AAA Accessibility Checker Free
Check if your color combinations meet WCAG accessibility standards. Get the contrast ratio, pass/fail status for AA and AAA levels, and suggested colors if failing. 100% browser-based — no data sent anywhere.
WCAG Contrast Requirements Explained
| Level | Normal text | Large text (18pt+ or 14pt bold) | UI components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | — |
Frequently Asked Questions
What is WCAG color contrast?
WCAG (Web Content Accessibility Guidelines) specifies minimum contrast ratios between text and background colors to ensure readability for people with visual impairments. WCAG 2.1 Level AA requires a 4.5:1 ratio for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as "large text" in WCAG?
Large text is defined as 18pt (24px) or larger for regular weight text, or 14pt (approximately 18.67px) or larger for bold text. Large text has a lower contrast requirement (3:1 for AA) because it is inherently easier to read.
What is relative luminance?
Relative luminance is a measure of how bright a color appears to the human eye, on a scale from 0 (absolute black) to 1 (absolute white). The contrast ratio is calculated from the relative luminance of the two colors using the formula: (L1 + 0.05) / (L2 + 0.05).
What contrast ratio do UI components need?
Non-text UI components (icons, form fields, focus indicators, charts) require a 3:1 minimum contrast ratio against adjacent colors under WCAG 2.1 Level AA.
Does this tool work offline?
Yes. All contrast ratio calculations happen entirely in your browser using pure math. No network request is needed. The tool works offline once the page has loaded.
What does the contrast ratio number mean?
The contrast ratio ranges from 1:1 (identical colors, no contrast) to 21:1 (black on white, maximum contrast). Higher numbers mean better readability. WCAG AA requires at least 4.5:1 for normal body text.