WCAG Contrast Checker
Check foreground/background contrast ratios for WCAG 2.1 compliance with color blindness simulation.
rgb(26, 26, 46)
rgb(234, 234, 234)
Contrast ratio
WCAG AAALarge text (24px+)
Bold text at 18.66px (14pt bold)
Normal body text — the quick brown fox jumps over the lazy dog.
Small text for captions and footnotes.
Extra small text at 12px.
About this tool
- 1
Enter two colors
Input foreground (text) and background colors using hex codes, RGB values, or the color picker.
- 2
View the contrast ratio
See the calculated contrast ratio displayed alongside WCAG AA and AAA pass/fail results.
- 3
Test different text sizes
Toggle between normal text and large text modes, which have different minimum contrast requirements.
- 4
Adjust until compliant
Use the suggested color adjustments to find the nearest compliant color if your current pair fails.
- WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular).
- WCAG AAA is stricter at 7:1 for normal text - aim for this level when possible for maximum accessibility.
- Test your colors against both light and dark backgrounds if your site supports a theme switcher.
- Do not rely solely on color to convey information - add icons, patterns, or labels as redundant indicators.
- Real-time contrast ratio calculation as you adjust colors
- WCAG 2.1 AA and AAA compliance indicators for normal and large text
- Color picker with hex, RGB, and HSL input support
- Nearest compliant color suggestions when contrast fails
- Live text preview showing your color combination in context
- Validate brand color combinations meet accessibility standards before a design system rollout
- Check text readability on colored backgrounds during UI design
- Audit an existing website for WCAG color contrast compliance
- Ensure data visualization colors are distinguishable for color-blind users