Color Contrast Checker
Check color contrast ratios for WCAG compliance and ensure your designs are accessible to all users.
Contrast Check Results
WCAG Compliance:
Color Information:
About
Our Color Contrast Checker helps designers and developers ensure their color combinations meet accessibility standards for all users, including those with visual impairments.
Why Choose
Comprehensive WCAG compliance checking with visual previews, detailed luminance calculations, and support for multiple color formats.
Features
Contrast ratio calculation, WCAG AA/AAA compliance checking, color swapping, luminance values, and support for hex, RGB, and HSL color formats.
Benefits
Create accessible designs, comply with legal requirements, improve user experience for all visitors, and avoid costly accessibility remediation.
Enter Colors
Input your foreground (text) and background colors in hex, RGB, or HSL format. Color previews update as you type.
Check Contrast
Calculate the contrast ratio and see immediate visual feedback with compliance badges for WCAG standards.
Analyze Results
Review detailed luminance values, compliance levels, and get suggestions for improving contrast if needed.
Frequently Asked Questions – Color Contrast Checker
WCAG (Web Content Accessibility Guidelines) are international standards for web accessibility. Color contrast is crucial because approximately 4.5% of users have some form of color vision deficiency. Proper contrast ensures text is readable for everyone, including those with low vision or using devices in bright sunlight.
WCAG 2.1 requires:
– AA: 4.5:1 for normal text (3:1 for large text)
– AAA: 7:1 for normal text (4.5:1 for large text)
Large text is defined as 18pt+ or 14pt+bold. UI components and graphics need at least 3:1 contrast.
Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated using the formula: 0.2126*R + 0.7152*G + 0.0722*B where R, G, and B are the color components normalized to 0-1.
The calculator supports:
– Hex: #RRGGBB or #RGB
– RGB: rgb(255, 255, 255)
– RGBA: rgba(255, 255, 255, 0.5)
– HSL: hsl(360, 100%, 100%)
– HSLA: hsla(360, 100%, 100%, 0.5)
– Color names: “white”, “black”, etc.
Try these adjustments:
1. Darken the dark color or lighten the light color
2. Increase font weight (bold text has better readability)
3. Increase font size if possible
4. Add text shadows or borders for subtle improvements
5. Consider using these colors only for decorative elements