Color Contrast Checker
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
WCAG Compliance
Normal Text
Large Text (18pt+ or 14pt+ bold)
UI Components & Graphics
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
How Our Color Contrast Checker Works
Enter your foreground and background colors using RGB hex values, or pick them directly with the Color Picker.
You can:
- Adjust Alpha to change how transparent the foreground color is.
- Use the Lightness slider to make the color look lighter or darker.
Our tool then calculates the contrast ratio and checks it against WCAG guidelines:
- WCAG 2.0 Level AA
- At least 4.5:1 for normal body text
- At least 3:1 for large text
- WCAG 2.1 (UI & graphics)
- At least 3:1 for icons, borders, and other interface components
- WCAG Level AAA
- At least 7:1 for normal text
- At least 4.5:1 for large text
Large text means either:
- 14 pt (about 18.66 px) and bold, or
- 18 pt (about px) or larger
You can use the eyedropper in the Color Picker to grab exact colors from anything on your screen. It makes it easy to test real designs, buttons, or backgrounds.
For links that rely on color alone to stand out, use our color contrast checker to be sure they meet accessibility standards and stay easy to read for everyone.
API Documentation Coming Soon
Documentation for this tool is being prepared. Please check back later or visit our full API documentation.