Tool
WCAG color contrast checker
Enter a text (foreground) and background color to see the WCAG contrast ratio and whether it passes for normal text, large text, and UI components.
Normal body text sample — the quick brown fox jumps over the lazy dog.
How it works
Contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). We compute luminance per the WCAG 2.x formula and divide the lighter by the darker value. Higher ratios are easier to read.
Common mistakes
- Light-grey text on white — looks elegant, fails AA for body copy.
- Saturated colored text (e.g. yellow) on white — often below 4.5:1.
- Relying on color alone — pair color with text or icons for state.
Need accessible colors? Generate a full palette and tune shades in the palette generator.
Frequently asked questions
What contrast ratio do I need?
For normal body text, aim for at least 4.5:1 (WCAG AA) or 7:1 (AAA). Large text (about 24px, or 18.66px bold) and UI components need at least 3:1.
Does passing contrast make my site accessible?
It’s an important part, but not the whole picture. Contrast is one WCAG criterion among many — test with real users and assistive tech for full accessibility.
Which colors should be foreground vs background?
Foreground is your text or icon color; background is what sits behind it. The ratio is the same either way, but the preview helps you judge readability.