WCAG Colour Contrast Checker & Palette
Test text and background colours against WCAG 2.1 AA and AAA accessibility standards.
Accessible Typography & Readability
This is sample body text demonstrating readability at standard font sizes (16px / 1rem). Adequate contrast prevents eye fatigue and ensures effortless legibility under diverse lighting environments.
🎨 Harmonious Accessible Tonal Scale
5 algorithmic lightness variations generated from your foreground color with live contrast scores against dark and light surfaces:
♿ Understanding WCAG 2.1 Luminance
Contrast is not based on perceived color saturation, but on relative luminance (the relative brightness of any point in a colorspace normalized to 0 for black and 1 for white). The formula \((L_1 + 0.05) / (L_2 + 0.05)\) guarantees reading legibility across monitors, OLED displays, and direct sunlight.
About this tool
How to use it
- Choose your foreground (text) and background colors using the color pickers or hex text inputs.
- Click 'Check WCAG Contrast Ratio' or inspect live updates immediately.
- Review the 5-point compliance scorecard for Normal Text (AA/AAA), Large Text (AA/AAA), and UI components.
- Click 'Auto-Fix for AA' to automatically nudge color luminance until it satisfies accessibility compliance.
Why it matters
Low-contrast typography is one of the most common web accessibility violations, rendering content unreadable for elderly users and individuals with vision impairments. Verifying compliance against WCAG 2.1 guarantees legal accessibility compliance and improves general usability.
When to use it
Use this tool when designing brand color palettes, building CSS design systems, styling interactive buttons and badges, or conducting an accessibility audit.
Good to know
Contrast ratio formula: (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.
Common questions
What is the difference between WCAG AA and AAA?
Level AA is the standard legal baseline for most websites, requiring a 4.5:1 contrast ratio for normal text and 3:1 for large text. Level AAA is the highest standard, requiring 7:1 for normal text and 4.5:1 for large text.
What qualifies as 'Large Text' under WCAG guidelines?
Large text is defined as at least 18pt (24px) regular weight or at least 14pt (roughly 18.5px) bold weight.
How does the Auto-Fix button work?
Auto-Fix analyzes background luminance and iteratively darkens or lightens the text color in small steps until it reaches the minimum 4.5:1 AA compliance threshold without distorting hue.
Do icons and button borders need to meet contrast ratios?
Yes! WCAG 2.1 Success Criterion 1.4.11 requires a minimum 3:1 contrast ratio for active user interface components (such as input borders, focus indicators, and standalone graphic icons).