WCAG Color Contrast Guide
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background to ensure content is readable by people with low vision or color deficiencies. Meeting these standards is not only good practice: it is a legal requirement in many countries and essential for reaching the widest possible audience.
What Is a Contrast Ratio?
A contrast ratio compares the relative luminance of two colors on a scale from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). The formula uses the relative luminance of each color: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. Higher ratios mean more readable text.
WCAG Conformance Levels
AA Normal Text
4.5 : 1Body text, labels, paragraphs (under 24px / 18pt regular or 18.67px / 14pt bold)
The minimum standard for most web content. Required by law in many jurisdictions.
AA Large Text
3 : 1Headings and large text (24px / 18pt+ regular or 18.67px / 14pt+ bold)
Large text is more legible at lower contrast. This relaxed threshold applies to headings and prominent text.
AA UI Components
3 : 1Icons, borders, form controls, focus indicators
Added in WCAG 2.1. Non-text UI elements must also meet minimum contrast against adjacent colors.
AAA Normal Text
7 : 1Body text, labels, paragraphs
The enhanced standard for optimal readability. Recommended for long-form content and critical information.
AAA Large Text
4.5 : 1Headings and large text
Enhanced accessibility for large text. Matches the AA normal text requirement.
How to Check Contrast Ratios
Checking contrast involves comparing the relative luminance of your foreground (text) color against your background color. You can do this manually with the WCAG formula, but tools make it instant:
Identify your color pairs
List every combination of text color and background color in your design. Don't forget hover states, focus states, and dark mode.
Calculate the ratio
Enter both colors into a contrast checker. The tool will compute the ratio and tell you which WCAG levels it passes.
Adjust as needed
If a pair fails, darken the text or lighten the background (or vice versa) until you reach the required ratio. Small adjustments of 10-15% lightness often suffice.
Document and automate
Add contrast checks to your design system documentation and consider automated testing in CI/CD pipelines to catch regressions.
Common Mistakes
Light gray text on white backgrounds
Typical ratio: ~2:1Use #6b7280 (gray-500) or darker for body text on white. Placeholder text should be at least #767676 at 4.5:1 for AA, or #959595 at 3:1 for large text.
Colored text on colored backgrounds
Typical ratio: ~1.5-3:1Bright blue on bright green, or orange on red, often fails. Always check the calculated ratio rather than relying on visual judgment.
Low-contrast disabled states
Typical ratio: < 3:1Disabled elements are exempt from WCAG requirements, but making them too faint frustrates users. Aim for at least 2:1 with a clear visual indicator like strikethrough.
Relying only on color to convey meaning
Use icons, labels, or patterns alongside color. Error states should have both red color and an icon or text label for colorblind users.
Good Examples
Poor Examples
Tips for Accessible Color Palettes
Build contrast into your design tokens
When creating a shade scale, verify that your 50 shade has at least 4.5:1 contrast with your 900 shade for text. Your 500 shade should pass against white for button labels.
Test with real content, not lorem ipsum
Real content varies in length and visual weight. A contrast ratio that looks fine on a single word may feel strained in a dense paragraph.
Don't forget dark mode
Dark mode inverts the relationship: light text on dark backgrounds. Your dark mode palette needs its own contrast verification since the same shades rarely work in both modes.
Check focus indicators
Keyboard focus rings must have 3:1 contrast against their adjacent colors. The default browser outline is often insufficient on colored backgrounds.
Use transparency carefully
Semi-transparent text or overlays produce different effective contrast ratios depending on the background. Always calculate contrast against the actual rendered color, not the theoretical value.
Simulate color blindness
About 8% of men and 0.5% of women have some form of color vision deficiency. Test your palette with protanopia, deuteranopia, and tritanopia simulations.
AA vs AAA: Which Should You Target?
AA is the minimum standard and should be the baseline for all web content. Most accessibility laws and guidelines (ADA, EN 301 549, Section 508) reference WCAG 2.1 Level AA.
AAA is the gold standard for critical content: government services, healthcare, financial applications, and long-form reading. While WCAG itself notes that AAA conformance across an entire site may not be achievable for all content, targeting AAA for body text dramatically improves readability for everyone, not just users with visual impairments.
A practical approach: aim for AAA on body text and AA on everything else. This covers the most important reading experience while remaining achievable for UI elements like badges, icons, and secondary labels.
Related Guides
Check Your Contrast Ratios
Use our Contrast Checker to test any color pair against WCAG AA and AAA standards instantly. Enter hex, RGB, or HSL values and see the ratio, pass/fail status, and suggested adjustments.
Open Contrast Checker