Color Contrast Checker
Check if your text and background colors meet WCAG 2.1 accessibility standards.
The quick brown fox jumps over the lazy dog. (Normal text — 16px)
Large text sample (24px bold)
Small text (12px) — harder to read, higher contrast needed
Suggested adjustments to pass AA:
Frequently Asked Questions
What is WCAG contrast compliance?▼
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with low vision or color blindness. Level AA is the legal requirement in most countries; AAA is the enhanced standard. Ratio 4.5:1 is required for normal text at AA level.
What counts as 'large text'?▼
WCAG defines large text as 18pt (24px) or larger, or 14pt (approximately 19px) bold or larger. Large text has a lower contrast requirement (3:1 for AA) because bigger characters are easier to read at lower contrast.
Why does color blindness affect contrast requirements?▼
Color blindness affects ~8% of males and 0.5% of females. Red-green color blindness (deuteranopia) is most common — sufferers cannot distinguish red from green. Good contrast ratios use luminance differences, not just color differences, ensuring readability regardless of color perception.
Does the contrast ratio apply to icons and images?▼
WCAG 1.4.11 (Non-text Contrast) requires a 3:1 minimum ratio for UI components like icons, focus indicators, and form field borders against adjacent colors. It does not apply to decorative images or logos. This is a AA-level requirement.