Color Contrast Checker (WCAG)
Check whether two colors meet WCAG 2.1 contrast minimums.
Contrast and accessibility
WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios for readable text. AA level — the standard most sites target — requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA is stricter at 7:1. Failing these makes your site unreadable for users with low vision or older screens.
Contrast ratios aren't intuitive. Red on black might look punchy but only hits 5.25:1 — barely passing AA. Pale gray on white backgrounds, common in modern 'minimal' designs, often fails entirely. This calculator shows the ratio and which WCAG levels each color pair passes.
Frequently asked questions
What is WCAG and what are the contrast requirements?
WCAG (Web Content Accessibility Guidelines) is the standard for web accessibility. The contrast requirements: AA level requires 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA (more stringent) requires 7:1 and 4.5:1 respectively. Most sites target AA.
How is contrast ratio calculated?
By comparing the relative luminance of two colors: ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker. White-on-black is 21:1 (the maximum). Pure red (#FF0000) on pure black is only 5.25:1 — red is perceptually dimmer than you'd expect.
Why do some color pairs look fine but fail?
Your eyes adjust to context. Gray-on-gray can feel readable to someone with perfect vision in good lighting, while failing for users with low vision, older monitors, sunlight glare, or color-blindness. WCAG ratios are minimums that work across the widest audience — not the 'looks OK to me' standard.
What about non-text elements?
WCAG 2.1 added the 1.4.11 guideline: UI components and graphical objects need 3:1 contrast against adjacent colors. That includes form borders, icons, charts, and focus indicators. Subtle light-gray borders on white backgrounds fail this — a common issue in modern minimalist designs.
Advertisement
728 × 90