Color Contrast Checker
Check WCAG AA / AAA contrast between any two colors. Great for accessible text and UI components.
WCAG requires text to meet a minimum contrast ratio against its background — 4.5:1 for normal text, 3:1 for large text. This checker computes the exact ratio for any two colors and tells you, in plain language, whether the pair passes.
How to use the wcag color contrast checker
- Set the foreground (text) color and the background color.
- The contrast ratio and the WCAG result update as you type.
- Use the ratio to decide whether the pair is readable, and by how much you would need to adjust it.
- Aim for at least 4.5:1 for body text and 3:1 for large text (18pt, or 14pt bold).
Frequently asked questions
What counts as good contrast?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
What is large text?
Under WCAG, large text is 18pt regular or 14pt bold (roughly 24px regular or 18.7px bold).
How is the ratio calculated?
It is the relative luminance of the lighter color divided by the darker one, using the standard sRGB formula. Higher means more readable.
Does this account for transparency or images behind text?
This checker works with solid colors. Text over a photo or gradient needs a different approach, such as a semi-transparent overlay behind the text.