Contrast Ratio Calculator
Check color contrast ratio for web accessibility and WCAG compliance
Calculate Color Contrast Ratio
Contrast Ratio Results
Preview
Sample Text
This is how your text will look against the background.
Reversed Colors
This shows the colors swapped for comparison.
Formula: Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Relative Luminances: Lighter: 1.000, Darker: 0.000
Requirements: AA requires 4.5:1, AAA requires 7:1
WCAG Accessibility Guidelines
Example Calculation
Black Text on White Background
White Background: RGB(255, 255, 255)
Black Text: RGB(0, 0, 0)
White Relative Luminance: 1.0
Black Relative Luminance: 0.0
Calculation
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Contrast Ratio = (1.0 + 0.05) / (0.0 + 0.05)
Contrast Ratio = 1.05 / 0.05
Contrast Ratio = 21:1 (Maximum possible)
WCAG AAA ✓
Relative Luminance
Accessibility Tips
Aim for WCAG AA compliance minimum
Higher contrast ratios improve readability
Test with actual users when possible
Consider colorblind users
Large text requires lower contrast ratios
Common Combinations
Understanding Color Contrast Ratio
What is Color Contrast Ratio?
Color contrast ratio measures the difference in brightness between text and background colors. It's essential for web accessibility, ensuring that content is readable by people with various visual abilities, including those with color vision deficiencies.
Why is it Important?
- •Improves readability for all users
- •Ensures legal compliance with accessibility standards
- •Better user experience in various lighting conditions
- •Supports users with visual impairments
Calculation Formula
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
RL = 0.2126×R + 0.7152×G + 0.0722×B
- L1: Relative luminance of lighter color
- L2: Relative luminance of darker color
- RL: Relative luminance calculation
- 0.05: Ambient light constant
- R, G, B: Gamma-corrected RGB values
Note: RGB values must be converted to sRGB colorspace and gamma-corrected before calculating relative luminance.
WCAG Guidelines
Level AA (Minimum)
- • Normal text: 4.5:1 minimum
- • Large text: 3:1 minimum
- • Required for legal compliance
Level AAA (Enhanced)
- • Normal text: 7:1 minimum
- • Large text: 4.5:1 minimum
- • Recommended for optimal accessibility