Contrast Ratio Checker
Enter foreground and background colors (HEX, RGB, or HSL) and instantly see the WCAG 2.1 contrast ratio. Shows pass/fail for Normal Text (AA: 4.5:1, AAA: 7:1) and Large Text (AA: 3:1, AAA: 4.5:1). Includes color pickers and suggestions to improve failing ratios.
Loading tool...Loading tool...
Common Use Cases
- Verify text accessibility before shipping
- Check button label contrast
- Audit design system color pairs
- Meet WCAG compliance requirements
Frequently Asked Questions
What is WCAG AA vs AAA?
WCAG 2.1 Level AA (minimum): normal text needs 4.5:1, large text (18pt/14pt bold) needs 3:1. Level AAA (enhanced): normal text 7:1, large text 4.5:1. Most projects target AA compliance; AAA is for maximum accessibility.
Related Tools
Color ConverterConvert colors between HEX, RGB, HSL, HSV, and CMYK formats with a visual picker.CSS Gradient GeneratorBuild linear, radial, and conic CSS gradients visually. Add stops, set angle, copy CSS.CSS Box Shadow GeneratorVisually build CSS box shadows with live preview. Add multiple layers and copy the CSS.
Tool Info
CategorydesignAI EnhancementNoData StorageZero retention