Color Contrast Checker
Test color combinations for WCAG 2.1 AA/AAA compliance
Contrast Results
Color Information
WCAG 2.1 Accessibility Standards
Level AA
Minimum requirement for most websites and applications.
- Normal text: 4.5:1 contrast ratio
- Large text: 3:1 contrast ratio
- UI components: 3:1 contrast ratio
Level AAA
Enhanced accessibility for specialized audiences.
- Normal text: 7:1 contrast ratio
- Large text: 4.5:1 contrast ratio
- Enhanced readability for low vision users
Text Size Definitions
Normal Text
Text smaller than 18 point (24px) or 14 point (18.67px) bold.
Large Text
Text at least 18 point (24px) or 14 point (18.67px) bold.
Graphical Objects
Icons, UI components, charts, and graphics.
Common Color Combinations
Frequently Asked Questions
WCAG (Web Content Accessibility Guidelines) are international standards for web accessibility. Contrast ratio measures the difference in luminance between foreground (text) and background colors.
Proper contrast ensures that text is readable for people with visual impairments, color vision deficiencies, or those viewing screens in bright sunlight. It's essential for:
- People with low vision or color blindness
- Users viewing content on mobile devices in bright light
- Older monitors with reduced contrast
- Legal compliance in many countries
Contrast ratio is calculated using the relative luminance of the colors. The formula is:
(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 how the human eye perceives different colors. The calculation accounts for the fact that our eyes are more sensitive to green light than red or blue.
AA Level AA
- • Minimum requirement for most websites
- • Normal text: 4.5:1 ratio
- • Large text: 3:1 ratio
- • UI components: 3:1 ratio
- • Required for government and public sector sites
AAA Level AAA
- • Enhanced accessibility standard
- • Normal text: 7:1 ratio
- • Large text: 4.5:1 ratio
- • Best for audiences with visual impairments
- • Recommended for health, education, banking
Most websites aim for AA compliance. AAA is recommended for sites serving audiences with visual impairments or in critical applications.
Yes! While WCAG primarily focuses on text readability, the 3:1 contrast ratio requirement also applies to graphical objects and user interface components:
- Logos: Text within logos should have sufficient contrast
- Charts & Graphs: Data points should be distinguishable
- UI Components: Buttons, form fields, icons
- Images of Text: Text in images should meet contrast requirements
Note: Decorative graphics without informational content don't require contrast compliance.
Related Color Tools
Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL and CMYK formats
HEX to RGB Converter
Convert between HEX and RGB color formats with instant preview
Color Blindness Simulator
Simulate how colors appear to people with color vision deficiencies