WCAG Contrast Checker

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 Foreground: #767676 → RGB(118, 118, 118) Background: #FFFFFF → RGB(255, 255, 255) Step 2: Calculate relative luminance L_fg = 0.2126(0.18) + 0.7152(0.18) + 0.0722(0.18) = 0.184 L_bg = 1.0 (white) Step 3: Calculate ratio Ratio = (1.0 + 0.05) / (0.184 + 0.05) = 4.49:1 Step 4: Check requirements for normal text (16px) WCAG AA requires 4.5:1 → FAIL (4.49 < 4.5) WCAG AAA requires 7:1 → FAIL (4.49 < 7) Step 5: Find passing color Darken foreground to #757575 (4.5:1) for AA Darken to #595959 (7.0:1) for AAA Note: #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 Foreground: #FFFFFF → RGB(255, 255, 255) Background: #3B82F6 → RGB(59, 130, 246) Step 2: Calculate luminance L_fg = 1.0 (white) L_bg = 0.2126(0.054) + 0.7152(0.216) + 0.0722(0.905) = 0.232 Step 3: Calculate ratio Ratio = (1.0 + 0.05) / (0.232 + 0.05) = 3.72:1 Step 4: Check requirements 16px bold = Large text (14pt+ bold threshold) Large text AA requires 3:1 → PASS (3.72 > 3) Large text AAA requires 4.5:1 → FAIL (3.72 < 4.5) Step 5: For AAA compliance Darken blue to #2563EB (4.5:1) or Use 18px+ text to ensure large text status The 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 Foreground: #FF6B6B → RGB(255, 107, 107) Background: #FFFFFF → RGB(255, 255, 255) Step 2: Calculate luminance L_fg = 0.2126(1.0) + 0.7152(0.137) + 0.0722(0.137) = 0.318 L_bg = 1.0 Step 3: Calculate ratio Ratio = (1.0 + 0.05) / (0.318 + 0.05) = 2.85:1 Step 4: Check requirements 14px regular = Normal text Normal text AA requires 4.5:1 → FAIL (2.85 < 4.5) Step 5: Find accessible red Darken to #DC2626 for 4.5:1 (AA) Darken to #991B1B for 7:1 (AAA) Critical: 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.

Do these requirements apply to images of text?

Yes, images of text must meet the same contrast requirements as actual text. However, WCAG encourages using real text instead of images whenever possible because: 1) Real text can be resized without quality loss, 2) Screen readers can read it, 3) Users can apply custom stylesheets. Exceptions exist for logos and essential images where text appearance is critical to the information conveyed.

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.

Should I aim for AA or AAA compliance?

AA is the recommended minimum and is legally required in many contexts. AAA is the highest level but may be impractical for all content (e.g., 7:1 contrast significantly limits color palette choices). Best practice: Meet AA for all text, aim for AAA where feasible, and always consider your audience. If your users include many elderly people or those with visual impairments, prioritize higher contrast throughout.

How does dark mode affect contrast requirements?

The same contrast ratios apply regardless of light or dark mode. However, dark modes present unique challenges: Pure white (#FFFFFF) on pure black (#000000) can cause 'halation' (text appears to glow) for some users. Many dark mode designs use slightly off-white text (#E0E0E0 to #F0F0F0) on dark gray (#121212 to #1E1E1E) rather than pure extremes. Test both modes independently for compliance.

What tools can I use to test contrast during development?

Browser DevTools: Chrome, Firefox, and Edge have built-in accessibility panels showing contrast ratios. Design tools: Figma, Sketch, and Adobe XD have contrast checker plugins. Automated testing: axe, WAVE, and Lighthouse flag contrast issues. Color palette generators: Coolors, ColorSafe, and Accessible Color Palette Builder help create compliant palettes. Always verify with real users when possible, as automated tools can miss context-dependent issues.

Background & Theory

Color contrast accessibility ensures that text and visual elements are perceivable by people with various forms of visual impairments, including low vision, color blindness, and age-related vision decline. **The Science of Contrast:** Contrast ratio measures the difference in luminance between foreground and background colors. Human perception of brightness follows a logarithmic scale—we're more sensitive to differences in dark values than light ones. The formula: **Ratio = (L1 + 0.05) / (L2 + 0.05)** Where L1 is the lighter color's relative luminance and L2 is the darker. The 0.05 offset accounts for ambient light effects and prevents division by zero. **Relative Luminance:** Calculated from linearized sRGB values: L = 0.2126R + 0.7152G + 0.0722B The coefficients reflect how our eyes perceive brightness: green contributes most, red less, and blue least. This is why pure blue (#0000FF) appears darker than pure green (#00FF00) at the same "brightness." **WCAG Success Criteria:** **1.4.3 Contrast (Minimum) - Level AA:** - Normal text: 4.5:1 minimum - Large text (18pt+ or 14pt+ bold): 3:1 minimum **1.4.6 Contrast (Enhanced) - Level AAA:** - Normal text: 7:1 minimum - Large text: 4.5:1 minimum **1.4.11 Non-text Contrast - Level AA:** - UI components and graphical objects: 3:1 minimum **Who Benefits:** - **Low vision users**: Approximately 285 million people worldwide - **Color blind users**: 8% of men, 0.5% of women have some form - **Aging users**: Contrast sensitivity decreases with age - **Situational impairments**: Bright sunlight, dirty screens, mobile use **Common Pitfalls:** 1. **Gray text on white**: Many "modern" designs use light gray that fails contrast 2. **Placeholder text**: Form field placeholders often have insufficient contrast 3. **Disabled states**: Still need to be perceivable (though not required to pass) 4. **Image backgrounds**: Text over photos needs careful consideration 5. **Brand colors**: Corporate palettes often need accessibility adjustments **Best Practices:** - Test contrast during design, not just development - Use tools integrated into your design workflow - Create accessible color palettes from the start - Consider both light and dark mode variants - Don't rely on color alone to convey meaning - Test with actual users when possible

History

The formalization of color contrast requirements evolved alongside the broader accessibility movement that began in the late 20th century. Early accessibility efforts focused primarily on physical access—ramps, elevators, braille signage. As the digital age emerged, pioneers like Gregg Vanderheiden began studying how people with disabilities interacted with computers, including those with visual impairments. The World Wide Web Consortium (W3C) launched the Web Accessibility Initiative (WAI) in 1997, recognizing that the web's visual nature posed barriers to many users. The first Web Content Accessibility Guidelines (WCAG 1.0) were published in 1999, but their contrast guidance was vague—simply recommending "sufficient contrast." WCAG 2.0 (2008) introduced the specific contrast ratios still used today: 4.5:1 for normal text and 3:1 for large text at Level AA. These numbers came from research on visual perception and the needs of users with low vision and color deficiencies. The formula for calculating contrast was based on the sRGB color space and human luminance perception. The ratios were derived from research showing that a 4.5:1 ratio allows text to be read by users with 20/40 vision (the threshold for driver's license renewal in many jurisdictions without correction) and those with contrast sensitivity of 1:3 (common in aging eyes and many visual impairments). WCAG 2.1 (2018) and the forthcoming WCAG 2.2 expanded requirements to include non-text elements like UI components and graphical objects (Success Criterion 1.4.11), recognizing that modern interfaces rely heavily on icons and visual indicators. Today, WCAG compliance is legally required in many contexts, including US federal agencies (Section 508), the European Union (EN 301 549), and private sector litigation under the ADA. The contrast checker has become an essential tool in every designer and developer's accessibility toolkit.