WCAG Contrast Checker
Check color contrast ratios for WCAG 2.1 accessibility compliance (AA/AAA). Enter values for instant results with step-by-step formulas.
Formula
Contrast Ratio = (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. Relative luminance L = 0.2126R + 0.7152G + 0.0722B, using linearized sRGB values. The ratio ranges from 1:1 (no contrast) to 21:1 (maximum: black on white).
Worked Examples
Example 1: Corporate Website Body Text
Problem: A website uses #767676 gray text on #FFFFFF white background for body copy at 16px. Check WCAG compliance and suggest fixes if needed.
Solution: Step 1: Calculate contrast ratio\nForeground: #767676 → RGB(118, 118, 118)\nBackground: #FFFFFF → RGB(255, 255, 255)\n\nStep 2: Calculate relative luminance\nL_fg = 0.2126(0.18) + 0.7152(0.18) + 0.0722(0.18) = 0.184\nL_bg = 1.0 (white)\n\nStep 3: Calculate ratio\nRatio = (1.0 + 0.05) / (0.184 + 0.05) = 4.49:1\n\nStep 4: Check requirements for normal text (16px)\nWCAG AA requires 4.5:1 → FAIL (4.49 < 4.5)\nWCAG AAA requires 7:1 → FAIL (4.49 < 7)\n\nStep 5: Find passing color\nDarken foreground to #757575 (4.5:1) for AA\nDarken to #595959 (7.0:1) for AAA\n\nNote: #767676 is often called the 'minimum contrast gray' but actually fails by a tiny margin.
Result: FAILS AA by 0.01 | Change to #757575 for AA | Change to #595959 for AAA
Example 2: Call-to-Action Button
Problem: A CTA button uses white text (#FFFFFF) on bright blue background (#3B82F6). The button text is 16px bold. Verify compliance.
Solution: Step 1: Calculate contrast\nForeground: #FFFFFF → RGB(255, 255, 255)\nBackground: #3B82F6 → RGB(59, 130, 246)\n\nStep 2: Calculate luminance\nL_fg = 1.0 (white)\nL_bg = 0.2126(0.054) + 0.7152(0.216) + 0.0722(0.905) = 0.232\n\nStep 3: Calculate ratio\nRatio = (1.0 + 0.05) / (0.232 + 0.05) = 3.72:1\n\nStep 4: Check requirements\n16px bold = Large text (14pt+ bold threshold)\nLarge text AA requires 3:1 → PASS (3.72 > 3)\nLarge text AAA requires 4.5:1 → FAIL (3.72 < 4.5)\n\nStep 5: For AAA compliance\nDarken blue to #2563EB (4.5:1) or\nUse 18px+ text to ensure large text status\n\nThe button passes AA for large text but fails AAA.
Result: PASSES AA (large text) at 3.72:1 | For AAA: darken to #2563EB or increase to 18px+
Example 3: Form Error Message
Problem: An error message uses #FF6B6B (light red) text on #FFFFFF background at 14px regular weight. This must be readable by all users.
Solution: Step 1: Calculate contrast\nForeground: #FF6B6B → RGB(255, 107, 107)\nBackground: #FFFFFF → RGB(255, 255, 255)\n\nStep 2: Calculate luminance\nL_fg = 0.2126(1.0) + 0.7152(0.137) + 0.0722(0.137) = 0.318\nL_bg = 1.0\n\nStep 3: Calculate ratio\nRatio = (1.0 + 0.05) / (0.318 + 0.05) = 2.85:1\n\nStep 4: Check requirements\n14px regular = Normal text\nNormal text AA requires 4.5:1 → FAIL (2.85 < 4.5)\n\nStep 5: Find accessible red\nDarken to #DC2626 for 4.5:1 (AA)\nDarken to #991B1B for 7:1 (AAA)\n\nCritical: Error messages must be highly accessible as they convey important information. Consider also using an icon or bold text to not rely solely on color.
Result: FAILS AA at 2.85:1 | Use #DC2626 for AA | Use #991B1B for AAA | Add icon for redundancy
Frequently Asked Questions
What is WCAG and why does contrast matter?
WCAG (Web Content Accessibility Guidelines) are international standards for web accessibility published by W3C. Adequate color contrast is crucial because approximately 300 million people worldwide have color vision deficiencies, and many more have low vision. Poor contrast makes text difficult or impossible to read for these users. WCAG 2.1 Level AA is the legal requirement in many jurisdictions, including under the ADA (US), EN 301 549 (EU), and similar laws globally.
What are the WCAG contrast ratio requirements?
WCAG 2.1 has three conformance levels: Level A (minimum), Level AA (recommended), and Level AAA (enhanced). For contrast: Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18pt+ or 14pt+ bold) needs 3:1 for AA and 4.5:1 for AAA. Graphical objects and UI components need 3:1 for AA. Logos and decorative text are exempt. The maximum possible ratio is 21:1 (black on white or vice versa).
How is contrast ratio calculated?
Contrast ratio is calculated using relative luminance: Ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Relative luminance uses the formula: L = 0.2126R + 0.7152G + 0.0722B, where R, G, B are linearized sRGB values. The coefficients reflect human eye sensitivity (most sensitive to green, least to blue). This produces ratios from 1:1 (no contrast) to 21:1 (maximum).
What counts as 'large text' under WCAG?
Large text is defined as: 18 points (24px) or larger for regular weight, OR 14 points (18.66px) or larger for bold weight. Large text has lower contrast requirements (3:1 for AA vs 4.5:1) because larger characters are inherently more readable. Note: these are minimum sizes—many accessibility experts recommend even larger text for optimal readability, especially for body copy.
What about contrast for non-text elements?
WCAG 2.1 Success Criterion 1.4.11 requires 3:1 contrast for: UI components (buttons, form fields, focus indicators), graphical objects (icons, charts), and any element required to understand content. This means a button's border or background must have 3:1 contrast with its surroundings, and icons must be distinguishable. Disabled elements are exempt, but their disabled state should still be perceivable.
How do I fix low contrast issues?
Options include: 1) Darken the foreground color—this usually preserves brand identity better than lightening backgrounds. 2) Lighten the background—good for colored backgrounds with dark text. 3) Increase font size—larger text has lower contrast requirements. 4) Increase font weight—bold text at 14pt+ qualifies as large text. 5) Add a text shadow or outline in high-contrast color. 6) Use a semi-transparent overlay between text and image backgrounds.