Developer tools
Color Contrast Checker
Check WCAG 2 contrast ratios between foreground and background hex colors.
- Mobile Friendly
- Accessibility Tested
- SEO Optimized
- Fast Loading
- Responsive
Version 1.0.0 · Last reviewed
Color Contrast Checker
WCAG 2 contrast ratios for foreground text on a background.
Sample headline
Body text preview for contrast on this background.
17.74: 1
AA normal: PassAA large: PassAAA normal: PassAAA large: Pass
How it worksShow guideHide guide
Introduction
Measure relative luminance contrast for text and UI colors against WCAG 2.1 AA and AAA thresholds.
Step-by-step
- Enter foreground and background hex colors
- Read the contrast ratio
- See AA / AAA pass or fail for normal and large text
Worked example
Black-ish #111 on white yields a high ratio that passes AAA for normal text.
Use cases
- Validate brand colors for body text
- Check large-title contrast quickly
- Audit dark-mode palettes
Frequently asked questions
What counts as large text?
WCAG treats 18pt+ (or 14pt bold) as large text, which allows a lower ratio (3:1 for AA).
Related tools
Popular tools
Was this helpful?
Your feedback stays on this device only — it is not sent to the mySutra team yet.