Tool
Contrast Checker
Check WCAG contrast ratios for text and backgrounds.
Design Tools
What this tool does
Compare foreground and background hex colors for WCAG AA and AAA readability ratios.
How to use
- Enter text (foreground) color.
- Enter background color.
- View contrast ratio and WCAG pass/fail.
Examples
Black on white
Input: text #000000, bg #FFFFFF
Output: 21:1 ratio, passes AAA
Maximum contrast for body text.
Common use cases
- Validate accessible text colors
- Check button label contrast
- Audit design system palettes
FAQ
What ratio is required for AA?
WCAG 2.2 Success Criterion 1.4.3 requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold).
What about AAA?
WCAG 2.2 AAA is 7:1 for normal text and 4.5:1 for large text.
Does it check UI components?
WCAG 2.2 SC 1.4.11 requires 3:1 for non-text UI against adjacent colors. Enter those color pairs here.
Source notes
- W3C WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum).
- W3C WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast.
- Large text: 18pt+ regular or 14pt+ bold.
Related tools
Last reviewed: 2026-05-23