Contrast Results
Preview
Aa
Sample text contrast
โ๏ธ
Contrast Ratio
โ
Ratio computed from relative luminance L1/L2
โ๏ธ
Large Text
โ
WCAG AA (โฅ3.0) / AAA (โฅ4.5)
โ๏ธ
Normal Text
โ
WCAG AA (โฅ4.5) / AAA (โฅ7.0)
WCAG AA โ Normal text
4.5 : 1
โ
WCAG AA โ Large text
3.0 : 1
โ
WCAG AAA โ Normal text
7.0 : 1
โ
WCAG AAA โ Large text
4.5 : 1
โ
Non-text UI/graphics
3.0 : 1
โ
๐ How to Use
Pick foreground and background colors via picker or hex input. Review the contrast ratio and WCAG compliance across text sizes. Use presets to experiment with common palettes, and adjust colors until all required criteria pass.
๐งฎ Formula Reference
Relative luminance: L = 0.2126 ร Rฮณ + 0.7152 ร Gฮณ + 0.0722 ร Bฮณ, where ฮณ = 2.4 for sRGB.
Contrast ratio: (L1 + 0.05) รท (L2 + 0.05), with L1 โฅ L2.
Thresholds: AA normal 4.5:1, AA large 3:1, AAA normal 7:1, AAA large 4.5:1.
๐ก Tips
- Test contrast in both light and dark modes for consistent accessibility.
- Large text refers to 18pt regular or 14pt bold equivalents.
- Include keyboard focus states and disabled UI elements when evaluating palettes.
- Re-run checks after adjusting opacity or overlay effects.
๐ References
- W3C Web Content Accessibility Guidelines (WCAG) 2.1 โ Contrast Success Criteria.
- W3C Techniques for WCAG 2.1 โ G17: Ensuring sufficient contrast of text.
- W3C Understanding WCAG 2.1 โ Non-text contrast guidance.