Online Color Contrast Checker & Analyzer
Test foreground and background text contrast against WCAG 2.1 AA and AAA standards in real time. Check ratios for normal text, large text, and UI components — plus a one-click accessible fix suggestion when a pair fails.
Check your text and background colors
Enter hex codes or use the pickers — the ratio, WCAG badges, and a fix suggestion update instantly.
needs 3:1
Recent checks
Contrast passes — but is your markup production-ready?
Verified colors on a page whose HTML is still messy? Run your markup through our HTML Formatter to beautify it for review, or minify it to shave bytes off every page load. Live responsive preview included.
Colors that already pass WCAG contrast
Tap any pair to load it straight into the checker above and see the exact ratio for your own text.
Weak contrast vs. good contrast
The same message, styled two ways. Low contrast is hard to read at a glance — especially for low-vision users, older readers, and bright-daylight screens.
Body copy
Call to action
Error message
More than a pass/fail light
Live WCAG 2.1 math
Ratios come from the true relative-luminance formula, computed the moment you change a color.
Normal & large text
See both threshold sets side by side, since large text gets a more relaxed AA/AAA bar.
UI component check
Covers the 3:1 minimum WCAG 1.4.11 requires for icons, borders, and interactive controls.
One-click accessible fix
If a pair fails, get a suggested text color that clears AA with the smallest possible shift.
Check history
Save pairs you've tested and jump back to any of them without re-entering hex codes.
Copy as report or CSS
Export a plain-text summary for a design review, or grab ready-to-paste CSS variables.
Three steps to an accessible pair
Enter your colors
Type hex codes or use the pickers for your text and background colors.
Read the verdict
Check the ratio against normal text, large text, and UI component thresholds at once.
Fix or export
Apply the suggested fix if needed, then copy a report or CSS variables for your team.
Common questions about color contrast
Ratios and thresholds last verified against WCAG 2.1 (Success Criteria 1.4.3, 1.4.6, 1.4.11) — August 2026.
What contrast ratio do I need for body text?
WCAG 2.1 AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt or larger, or bold 14pt or larger). AAA raises those thresholds to 7:1 and 4.5:1.
What counts as large text?
Text at 18pt (24px) or larger, or bold text at 14pt (18.66px) or larger, qualifies for the more relaxed large-text thresholds of 3:1 for AA and 4.5:1 for AAA.
Does contrast apply to icons and buttons too?
Yes. WCAG 1.4.11 requires a 3:1 contrast ratio for the visual boundaries of active UI components and for meaningful graphics, not just for text. This includes focus indicators, form field borders, and icon-only buttons.
How does the accessible-fix suggestion work?
The tool shifts the lightness of your text color up or down in small 2% HSL steps until the pair reaches at least 4.5:1 against your background, then suggests whichever direction required the fewest changes.
Is my check history saved anywhere online?
No. Your check history is stored only in your browser's local storage and is never sent to any server. Clearing your browser data will also clear the history.