Online Tool Store
· 3 min read
How to Check WCAG Color Contrast
Heshan Fernando
Co-founder & COO
That soft gray text may look elegant on your monitor, but can everyone read it? Color contrast is one of the easiest accessibility issues to miss because the design can look fine to the person who made it.
An accessibility contrast checker compares text and background colors against WCAG AA and AAA thresholds, including the different rules for large text, and can suggest a nearby passing color.
What WCAG contrast checking involves
WCAG contrast ratio compares the relative luminance of foreground and background colors. The ratio helps decide whether text has enough contrast for readability.
Normal text and large text have different thresholds. Large text can pass with a lower ratio because its size and weight make it easier to read.
Why people get stuck here
Design tools can make low-contrast combinations look attractive on a bright display. Real users may see the same colors on older screens, outside, with visual impairments, or at smaller text sizes.
Another issue is checking color pairs without considering font size. A color pair may pass for large text and fail for body copy.
| Text Type | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI context | Check purpose | Do not rely on color alone |
| Suggested color | Nearby fix | Recheck final pair |
What a good contrast check looks like
Foreground and background are tested together
A color is not accessible by itself. Contrast depends on the pair.
Font size is included
Body text and large headings use different thresholds. Check the actual use case.
Fixes stay close when possible
A nearest passing color can preserve the design direction while making the text readable.
Common mistakes to avoid
- Checking only brand colors without the actual background.
- Assuming large-heading contrast applies to body text.
- Relying on personal eyesight and monitor brightness.
- Using color alone to communicate state or meaning.
- Forgetting hover, disabled, and secondary text states.
How to do it with Accessibility Contrast Checker
Online Tool Store’s Accessibility Contrast Checker checks text and background colors against WCAG AA and AAA, marks the applicable threshold, and suggests a nearest passing color.
- Open the Accessibility Contrast Checker.
- Enter or pick the text color.
- Enter or pick the background color.
- Set the relevant font size or text type.
- Review AA and AAA pass/fail results.
- Use the nearest passing color suggestion if needed.
- Recheck the final design state.
It is useful for websites, apps, slides, design systems, and quick brand color checks.
Frequently asked questions
What is WCAG contrast ratio?
It is a numeric comparison between text and background luminance used to judge readability accessibility.
Does large text need the same contrast?
No. WCAG allows lower contrast thresholds for large text than for normal body text.
Is passing contrast enough for accessibility?
It is important, but not everything. Also consider font size, spacing, language clarity, keyboard access, and not relying on color alone.
Final thought
Check contrast before the design is finished. It is much easier to nudge a color early than rebuild a palette after users struggle to read it.