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?
4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold).
What about AAA?
7:1 for normal text, 4.5:1 for large text.
Does it check UI components?
Enter colors for text and background; non-text UI needs 3:1 for AA.
Source notes
- WCAG 2.1 contrast requirements (W3C).
- Large text: 18pt+ regular or 14pt+ bold.
Related tools
Last reviewed: 2026-05-23