Contrast Checker
online contrast checker to help designers and developers ensure text and background color contrast meets WCAG accessibility standards.
Contrast Checker Tool
Select or input foreground and background colors to check contrast ratio in real time.
Contrast Preview Text
Contrast Ratio
21.00
Perfect Contrast
WCAG 2.1 Conformance
AA Level
Normal Text: Pass
Large Text: Pass
AAA Level
Normal Text: Pass
Large Text: Pass
Recommendations
The current color combination has excellent contrast and meets all WCAG accessibility standards.
Common Color Combination Examples
Here are some examples of contrast ratios for common color combinations:
Black on White
Contrast: 21.0
Excellent
White on Black
Contrast: 21.0
Excellent
Blue on White
Contrast: 4.9
Good
Yellow on Black
Contrast: 16.4
Excellent
Gray on White
Contrast: 1.6
Poor
Pink on Light Pink
Contrast: 1.3
Very Poor
Contrast and Accessibility Guide
What is Color Contrast?
Color contrast refers to the ratio of luminance difference between the foreground (usually text) and background colors. Sufficient contrast ensures text content is clearly readable for all users, including those with visual impairments.
WCAG 2.1 Standards
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum requirements for color contrast:
- AA Level: at least 4.5:1 for normal text, 3:1 for large text
- AAA Level: at least 7:1 for normal text, 4.5:1 for large text
Why is Contrast Important?
Sufficient contrast:
- Improves text readability
- Helps color-blind users distinguish content
- Maintains readability in bright light conditions
- Meets legal and industry standards
How to Improve Contrast?
If contrast is insufficient:
- Darken text color or lighten background color
- Add shadows or outlines to text
- Use semi-transparent backgrounds to enhance contrast
- Provide a high contrast mode option
Contrast Calculation Formula
Contrast ratio is calculated using the following formula:
Contrast = (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 based on the sRGB color space, taking into account the human eye's sensitivity to different wavelengths of light.
Special Cases Consideration
- Large text: Text that is at least 18pt (approx. 24px) normal weight or 14pt (approx. 18.5px) bold is considered 'large text' and is subject to lower contrast requirements.
- Decorative text: Text that is purely decorative, illegible, or part of a logo is exempt from contrast requirements.
- Non-text content: User interface components and graphical objects require a contrast ratio of at least 3:1.
- Hover states: Hover and focus states of interactive elements also need sufficient contrast.
Testing Best Practices
- Test contrast on actual devices, as different screens may display colors differently.
- Consider readability under different lighting conditions.
- Test contrast from the perspective of color-blind users.
- Use multiple tools to verify results for accuracy.
- Regularly review and update designs to ensure ongoing compliance.
Browser Compatibility
Most modern browsers support CSS APIs related to color contrast detection:
- CSS Color Module Level 4: Chrome 62+, Firefox 57+, Safari 12.1+
- APCA (Advanced Perceptual Contrast Algorithm): An emerging standard that provides more precise contrast calculation.
It is recommended to use both tool detection and manual verification to ensure optimal accessibility.