Color Contrast Checker
Check if two colors meet WCAG accessibility contrast requirements for text on backgrounds.
What Does This Tool Do?
Calculates the contrast ratio between foreground and background colors and shows whether they pass WCAG AA (4.5:1) and AAA (7:1) standards for normal text, large text, and UI components.
Key Features
WCAG 2.1
Tests against AA and AAA for normal text, large text, and UI.
Color Pickers
Pick colors visually with native color pickers.
Live Update
Contrast updates as you change colors.
Ratio Display
Shows the exact contrast ratio number.
How to Use This Tool
- Enter or pick a foreground (text) color.
- Enter or pick a background color.
- See the contrast ratio and WCAG pass/fail results.
How It Works
Relative luminance is calculated for each color using the WCAG formula (linearizing sRGB values). The contrast ratio is (L1+0.05)/(L2+0.05) where L1 is the lighter luminance.
Common Use Cases
💡 Web Accessibility
Ensure text is readable for users with visual impairments.
💡 Design Review
Verify designs meet accessibility standards before dev.
💡 Compliance
Meet WCAG 2.1 AA requirements for legal compliance.
Frequently Asked Questions
What is WCAG AA vs AAA?
AA requires 4.5:1 for normal text (3:1 for large). AAA requires 7:1 (4.5:1 for large). AA is the minimum legal standard in most jurisdictions.
Related Tools
Link to This Tool
Copy and paste the code below to link to this tool from your website:
<a href="https://adedx.com/tools/color-contrast/">Color Contrast Checker — AdeDX Free Online Tools</a>