Color Contrast Checker
Normal text โ The quick brown fox jumps over the lazy dog
Large Text Sample 18pt+
| WCAG Level | Required Ratio | Result |
|---|---|---|
| AA Normal Text | โฅ 4.5 : 1 | โ |
| AA Large Text | โฅ 3 : 1 | โ |
| AA UI Components | โฅ 3 : 1 | โ |
| AAA Normal Text | โฅ 7 : 1 | โ |
| AAA Large Text | โฅ 4.5 : 1 | โ |
What Is WCAG and Why It Matters
The Web Content Accessibility Guidelines (WCAG), published by the W3C, define how to make web content perceivable for people with disabilities including color vision deficiency and low vision. Regulations like the EU European Accessibility Act (EAA) and the US ADA reference WCAG as the compliance benchmark โ failing contrast requirements can lead to legal liability and lost users.
WCAG 2.1 Contrast Levels Explained
- Level A (minimum) โ No specific contrast ratio; covers basic perceivability.
- Level AA (recommended) โ Normal text โฅ 4.5:1, large text (โฅ18pt or 14pt bold) โฅ 3:1, UI components and graphics โฅ 3:1. Most regulations require this level.
- Level AAA (enhanced) โ Normal text โฅ 7:1, large text โฅ 4.5:1. Best for government, healthcare, and maximum-readability contexts.
How Contrast Ratio Is Calculated
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker. Relative luminance is computed by linearizing each sRGB channel (divide by 12.92 if โค 0.03928, otherwise ((V+0.055)/1.055)^2.4) and weighting: L = 0.2126R + 0.7152G + 0.0722B. The result ranges from 1:1 (identical) to 21:1 (pure black on pure white).
Common Accessible Color Combinations
FAQ
Is a 4.5:1 ratio good enough?
A 4.5:1 ratio meets WCAG AA for normal text and is the minimum most websites should target. If your audience includes older adults or people with low vision, aim for 7:1 (AAA).
What qualifies as "large text"?
WCAG defines large text as at least 18pt (24px) regular weight or 14pt (~18.66px) bold. Large text only needs a 3:1 ratio for AA compliance.
What are the contrast requirements for UI components?
WCAG 2.1 SC 1.4.11 requires all essential UI components (button borders, input outlines, icons) to have at least a 3:1 contrast ratio against adjacent colors.
How do I maintain contrast in dark mode?
Avoid pure white (#fff) text on very dark backgrounds โ use slightly muted tones like #e2e8f0 instead. Ensure links, buttons, and interactive elements also pass 3:1 against the dark background.