Coding & Dev
Color Contrast Ratio
Check WCAG color contrast compliance for text accessibility.
WCAG 2.1 accessibility guidelines require minimum contrast ratios between text and background colors. This calculator checks compliance for normal text (4.5:1) and large text (3:1) at AA and AAA levels.
Contrast Ratio
12.63:1
- normal Text A A
- PASS
- large Text A A
- PASS
- aaa
- AAA PASS
Formula and method
Contrast = (L1 + 0.05) / (L2 + 0.05) where L = relative luminance
WCAG 2.1 relative luminance formula. Contrast ratio ranges from 1:1 (no contrast) to 21:1 (black on white).
Worked examples
Black text on white
- Text Color (hex):
- #000000
- Background Color (hex):
- #FFFFFF
Contrast Ratio: 21.00:1
Common gray text issue
- Text Color (hex):
- #888888
- Background Color (hex):
- #FFFFFF
Contrast Ratio: 3.54:1
Assumptions and limits
- WCAG 2.1 relative luminance calculation
- sRGB color space
This tool provides an educational estimate. Rules, rates and personal circumstances can change the answer. Review the assumptions before relying on a result. Report a correction.
Common mistakes to avoid
- Testing only one color combination — check all text/background combinations including hover states.
- Using a contrast checker only for regular text — UI components (buttons, icons) also have contrast requirements.
- Assuming "dark mode" automatically passes — dark themes need careful contrast verification.
Frequently asked questions
What WCAG level do I need?
WCAG 2.1 Level AA is the legal standard in most jurisdictions (required by AODA in Ontario, ADA in the US). Level AAA (7:1 ratio for normal text) is aspirational and not required but provides better accessibility.