Color Contrast Checker
Check contrast ratio. WCAG compliance.
▶About this tool
This tool checks foreground/background contrast ratio in one click. Three features: 1) Select colors for instant contrast ratio, 2) WCAG 2.1 AA/AAA compliance for normal/large text, 3) Useful for accessibility and UI color selection.
Tool interface
Sample text Aa 123
Contrast Ratio —
WCAG AA (Normal text 4.5:1) —
WCAG AA (Large text 3:1) —
WCAG AAA (Normal text 7:1) —
Usage
- Select foreground and background colors with picker
- Contrast ratio is displayed instantly
- Check WCAG 2.1 AA/AAA compliance
When to use
Accessibility compliance, UI color selection, text readability, WCAG verification.
Examples
White on black = 21:1, #666 on #fff = 5.74:1.
FAQ
What is WCAG?
Web Content Accessibility Guidelines. Int'l standard for web accessibility by W3C. Referenced in legal requirements.
Good contrast ratio?
WCAG 2.1: normal text 4.5:1 (AA), 7:1 (AAA). Large text 3:1 (AA), 4.5:1 (AAA).
AA vs AAA?
AA = minimum accessibility. AAA = stricter (e.g. 7:1 contrast). Most sites aim for AA.
How is contrast ratio calculated?
(L1+0.05)/(L2+0.05). L1=brighter relative luminance, L2=darker. Max 21:1 (white/black), min 1:1 (same color).
Related tools
Color & Design Set