WCAG Contrast Checker
Check color contrast ratio against WCAG 2.1 in real time. Verify AA/AAA compliance for text and background colors and get color improvement suggestions.
Last updated:
How to Use
Expand how to useCollapse how to use
- 1
Enter Colors
Enter foreground (text) and background colors using HEX codes or the color picker.
- 2
Check Contrast Ratio
The contrast ratio is calculated automatically, showing WCAG AA/AAA compliance status.
- 3
Review Suggestions
If non-compliant, an improved color meeting AA criteria is suggested. Click "Apply" to use it.
Contrast Ratio: 12.63:1,Normal Text AA: Pass,Large Text AA: Pass
Preview
Normal sized text will appear like this. This applies to font sizes of 16px or smaller.
Large text (18pt+ / 14pt bold+)
WCAG Compliance
| AA | AAA | |
|---|---|---|
| Normal TextMin 4.5:1 | Pass | Pass |
| Large TextMin 3:1 | Pass | Pass |
Improvement Suggestion
The current color combination meets AA criteria.
About WCAG Contrast Checker
WCAG Contrast Checker calculates the contrast ratio between any two colors using the WCAG 2.1 relative luminance formula and instantly shows AA and AAA compliance status for both normal and large text. Brand colors, Tailwind grays, and Material Design palette shades frequently look fine on a calibrated monitor but fail the 4.5:1 threshold on cheaper displays — or get flagged in automated Lighthouse audits. Enter your text and background HEX values, confirm compliance before committing to your design system tokens, and use the auto-fix suggestion to get the nearest passing foreground color when a pair fails. Dark mode color pairs can be verified independently to catch contrast regressions before they reach production.
Key Features
- Real-time contrast ratio calculation for foreground and background colors
- WCAG AA/AAA compliance check for normal and large text
- Automatic color improvement suggestions when non-compliant
- Text preview to see actual appearance
Use Cases
- Verify Tailwind CSS or Material Design color pairs (e.g., text-gray-500 on white) before committing design token changes
- Check light and dark mode color combinations independently to catch contrast regressions introduced by theme updates
- Validate placeholder text and disabled state colors in form components against WCAG 1.4.3
- Fix Lighthouse accessibility audit failures by finding the nearest passing foreground color without drifting from the brand hue
- Confirm AA/AAA compliance for government, healthcare, or educational web apps where accessibility is a legal requirement
- Review text-on-image overlays or button label colors in marketing landing pages before handing off to QA
FAQ
What is the difference between WCAG AA and AAA?
AA is the minimum required standard (normal text 4.5:1, large text 3:1), while AAA is a higher standard (normal text 7:1, large text 4.5:1). AA compliance is generally recommended.
What qualifies as large text?
Text at 18pt (24px) or larger, or bold text at 14pt (approximately 18.66px) or larger is considered "large text" and has a more lenient contrast requirement.
How is the contrast ratio calculated?
It uses the relative luminance formula defined in WCAG 2.0: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color's relative luminance.
How is the suggested improvement color determined?
The tool incrementally adjusts the lightness of your foreground color until it meets the AA threshold (4.5:1), choosing the result closest to your original input. This lets you preserve as much of your brand color tone as possible while still passing.
Does the contrast requirement apply to placeholder text in form fields?
Yes. WCAG success criterion 1.4.3 applies to placeholder text as well. Common Tailwind placeholder colors like placeholder:text-gray-400 (#9CA3AF) on a white background only achieve around 2.85:1 — well below the 4.5:1 AA threshold. Test placeholder colors explicitly.
How should I check colors for dark mode?
Enter the dark-mode text and background colors separately. A color pair that passes in light mode often fails in dark mode — for example, primary blue text on a dark gray card can drop below 4.5:1 when the background shifts. Verify both themes independently and consider automating the check with a tool like axe-core in your Storybook or Playwright test suite.