WCAG contrast checker
Enter a text color and a background color to see the exact contrast ratio and whether it passes WCAG AA and AAA, for both normal and large text. The preview updates as you type.
Large heading sample
This is body text at a normal size. Good contrast keeps it readable for everyone, including people with low vision.
19.14 : 1Why contrast matters
Contrast is the difference in brightness between text and its background. When it is too low, text becomes hard or impossible to read, especially for people with low vision, aging eyes, or anyone on a phone in bright sunlight. The Web Content Accessibility Guidelines set clear numeric thresholds so this is not a matter of opinion.
The thresholds, in plain terms
- AA normal text: 4.5 to 1. This is the baseline most projects should meet for body copy.
- AA large text: 3 to 1. Headings and large labels get a lower bar because they are easier to read.
- AAA normal text: 7 to 1. A stricter target for content that must be readable in tough conditions.
- AAA large text: 4.5 to 1. The strict target for large text.
Fixing a failing combination
If a pair fails, you rarely need to change the hue. Usually adjusting lightness is enough. Darken the text or lighten the background, one step at a time, and watch the ratio climb. The color converter makes this easy: switch to HSL and move the lightness slider while keeping the hue and saturation you designed around.
A common trap is light grey text on white, a look that reads as elegant but often fails AA. If you love the muted look, keep the hue and saturation but push the lightness darker until the ratio clears 4.5.
Frequently asked questions
What contrast ratio do I need to pass WCAG?
For normal text, WCAG AA requires a ratio of at least 4.5 to 1, and AAA requires 7 to 1. Large text, roughly 24px or 18.66px bold and up, needs 3 to 1 for AA and 4.5 to 1 for AAA.
How is the contrast ratio calculated?
It compares the relative luminance of the two colors. HueKit computes luminance with the official WCAG 2.1 formula, then divides the lighter value plus 0.05 by the darker value plus 0.05.
What counts as large text?
WCAG defines large text as at least 18 point, which is about 24px, or 14 point bold, about 18.66px bold. Large text has a lower contrast requirement because bigger shapes are easier to read.
Does contrast matter for more than text?
Yes. Interactive elements and meaningful graphics also have contrast requirements. As a rule, anything a user needs to see clearly should have strong contrast against what surrounds it.