Free WCAG Color Contrast Checker Online

WCAG Colour Contrast: The Complete Developer Guide

Colour contrast is one of the most commonly failed accessibility requirements on the web. According to the WebAIM Million report — an annual automated audit of the top one million home pages — low-contrast text is consistently the single most common WCAG failure, appearing on over 80% of pages tested. This guide explains the standard, the maths behind it, and how to make design decisions that pass both AA and AAA requirements.

Why Contrast Matters

Approximately 2.2 billion people worldwide have some form of vision impairment. Of these, around 300 million have colour blindness (colour vision deficiency) and hundreds of millions experience reduced contrast sensitivity due to conditions like cataracts, glaucoma, or simply ageing. Sufficient contrast between text and its background ensures readable content for:

• Users with low vision who have not yet been diagnosed or do not use screen magnification
• Users in bright-light environments (outdoor mobile use, direct sunlight on screens)
• Users on low-quality displays, projectors, or aged monitors with reduced contrast
• Users with partial colour blindness who may not distinguish foreground from background by hue alone
• Users with photophobia (light sensitivity) who use high-contrast modes

The WCAG 2.1 Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.1, published by the W3C, define contrast requirements in Success Criteria 1.4.3 (Contrast Minimum, Level AA) and 1.4.6 (Contrast Enhanced, Level AAA):

Level AA is the legal baseline in most jurisdictions: the Americans with Disabilities Act (ADA), the European Accessibility Act (EAA / EN 301 549), the UK Equality Act, and Section 508 of the US Rehabilitation Act all reference or incorporate WCAG 2.1 AA. Level AAA is aspirational — meeting it everywhere is difficult due to design constraints, but it's the right target for critical content (legal disclosures, medical instructions, financial data).

What Counts as "Large Text"?

WCAG defines large text as:

• At least 18pt (24px) for regular weight text
• At least 14pt (approximately 18.67px) for bold text

The conversion is: 1pt = 1.333… CSS px (because 1pt = 1/72 inch, and CSS assumes 96px/inch, so 1pt = 96/72 = 1.333px). Therefore:

• 18pt = 24px (regular)
• 14pt ≈ 18.67px, typically rounded to 19px (bold)

CSS font-weight: 700 or higher qualifies as bold. Heading elements (h1–h3) typically meet the large text threshold in standard designs. Navigation items, buttons, and body text typically do not.

The Maths: How Contrast Ratio Is Calculated

The contrast ratio formula from WCAG is:

contrast_ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. Relative luminance measures how much light a colour reflects relative to a white surface, accounting for how the human eye perceives brightness.

Relative luminance from an sRGB colour:

L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin

Where R_lin, G_lin, B_lin are the linearised channel values. sRGB uses gamma encoding to match how CRT displays worked, so the raw channel values (0–255) must be converted back to linear light first:

// For each channel C in [0, 1]:
C_lin = C / 12.92                      if C ≤ 0.04045
C_lin = ((C + 0.055) / 1.055) ^ 2.4   if C > 0.04045

The coefficients 0.2126, 0.7152, and 0.0722 reflect the eye's relative sensitivity to the three primary colours. The human eye is most sensitive to green (0.7152), moderately sensitive to red (0.2126), and least sensitive to blue (0.0722). This is why yellow (#ffff00) appears extremely bright — it combines maximum red and green signals, producing near-maximum luminance.

Examples of relative luminance values:

Reading the Contrast Ratio

Contrast ratios range from 1:1 (no contrast — identical colours) to 21:1 (maximum contrast — black on white). Common design targets:

• 1:1 — invisible (same colour)
• 2:1 — very low contrast, fails all WCAG criteria (light grey on white)
• 3:1 — minimum for large text / UI components (AA large)
• 4.5:1 — minimum for body text (AA normal, and AAA large)
• 7:1 — AAA normal text — very accessible
• 21:1 — maximum — black text on white

Colour Blindness and Contrast

The WCAG luminance formula accounts for typical colour perception, so it partially handles colour blindness — a high-luminance-contrast pair is likely readable regardless of the type of colour blindness. However, there are failure modes:

• Red-green pairs: A red (#ff0000) on green (#008000) combination has a contrast ratio of about 2.9:1 — already failing AA normal text. But even higher-contrast red-green combinations can be indistinguishable for people with deuteranopia (red-green colour blindness). The luminance formula does not fully capture this — simulate with a colour blindness simulator.
• Same-hue, different-saturation: A saturated blue (#0000ff) on a desaturated blue (#6060a0) may have acceptable luminance contrast but look identical to someone with tritanopia (blue-yellow colour blindness).
• Status colours: Never use colour alone to convey status (red = error, green = success). Always pair colour with an icon, text label, or pattern. This addresses WCAG SC 1.4.1 (Use of Colour).

Practical Colour Recommendations

For dark text on light backgrounds (most common):

• #000000 on #ffffff → 21:1 (always passes)
• #1a1a1a on #ffffff → ~19:1 (near-black, visually softer)
• #374151 on #ffffff → ~10:1 (Tailwind gray-700 on white)
• #6b7280 on #ffffff → ~5:7:1 (passes AA normal)
• #9ca3af on #ffffff → ~2.5:1 (fails AA — too light for body text)

For light text on dark backgrounds (dark mode):

• #ffffff on #1a1a1a → ~19:1 (passes all)
• #e5e7eb on #111827 → ~14:1 (Tailwind gray-200 on gray-900)
• #d1d5db on #374151 → ~5:1 (passes AA normal)
• #9ca3af on #374151 → ~2.7:1 (fails AA)

For coloured text on white (links, labels):

• #1d4ed8 (blue-700) on white → ~7:1 (passes AAA)
• #2563eb (blue-600) on white → ~5:1 (passes AA)
• #3b82f6 (blue-500) on white → ~3:1 (fails AA normal, passes large)
• #dc2626 (red-600) on white → ~5.9:1 (passes AA)
• #16a34a (green-600) on white → ~5.1:1 (passes AA)

Non-Text Contrast (SC 1.4.11)

WCAG 2.1 added Success Criterion 1.4.11 (Non-text Contrast), which requires a 3:1 contrast ratio for:

• UI component boundaries: The border or outline of input fields, buttons, checkboxes, radio buttons, and dropdowns against the adjacent background.
• State indicators: The focused state ring, selected state colour, hover underline.
• Informational graphics: Chart lines, icon paths that convey meaning (a checkmark icon in a form validation message, for instance).

Note: decorative icons (purely aesthetic) are exempt. Disabled controls are also exempt — the visual indication that a control is disabled deliberately reduces contrast.

WCAG 3.0 and APCA

The upcoming WCAG 3.0 is expected to replace the simple luminance-based contrast ratio with APCA — the Advanced Perceptual Contrast Algorithm — developed by Andrew Somers. APCA accounts for:

• The polarity of contrast (light text on dark differs from dark on light)
• Font size and weight in a continuous model (not just a binary large/small split)
• Spatial frequency effects (thin strokes need more contrast than thick ones)
• The different reading environment of body text vs. large headings vs. UI labels

WCAG 3.0 is still in development (as of 2025) and is not yet a legal requirement anywhere. Use the WCAG 2.1 formula for compliance — this is what this tool implements — and optionally check APCA for additional guidance on fine-grained design decisions.

Testing Contrast in Practice

Browser DevTools: Chrome, Firefox, and Edge DevTools all show contrast ratio warnings inline in the Elements panel when inspecting text nodes. Chrome's "CSS Overview" tab provides a site-wide contrast audit.

Axe / Lighthouse: Automated accessibility audits (axe-core, Lighthouse, Pa11y) catch most contrast failures in a single scan. Run them as part of CI with @axe-core/playwright or axe-core/jest to prevent regressions.

Figma: The "Contrast" plugin and the built-in A11y annotation kit show contrast ratios directly in your designs before implementation.

Windows High Contrast Mode / Forced Colours: Windows users can enable a system-wide colour override that forces all colours through a user-defined palette. Use the CSS media feature forced-colors: active to detect this mode and ensure your UI remains functional when colours are overridden.