Color Contrast Checker

Check WCAG AA & AAA accessibility compliance for any color combination

WCAG 2.1 | Accessibility

Foreground (Text)

Background

Contrast Ratio

Live Preview

Sample Text

Aa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Small text — 12px: The quick brown fox jumps over the lazy dog.

WCAG Compliance

AA Normal

≥ 4.5 : 1 required

Normal text (body copy)

AA Large

≥ 3 : 1 required

Large text (18pt+ or 14pt+ bold)

AAA Normal

≥ 7 : 1 required

Enhanced normal text

AAA Large

≥ 4.5 : 1 required

Enhanced large text

Suggested Combinations

Auto-adjusted colors that pass WCAG AA

What Is Color Contrast & Why Does It Matter?

Understanding contrast ratios and their impact on web accessibility

The color contrast ratio is a numerical measure of the difference in perceived luminance between a foreground color (typically text) and its background. Defined by the Web Content Accessibility Guidelines (WCAG), this ratio ranges from 1:1 (identical colors — no contrast) to 21:1 (pure black on pure white — maximum contrast).

Sufficient contrast ensures that text remains legible for a wide range of users, including those with low vision, cataracts, or color-vision deficiency. An estimated 8% of men and 0.5% of women experience some form of color blindness, and many more experience reduced contrast sensitivity as they age.

Visual Clarity

High contrast ensures text remains readable in varied lighting conditions, on different screens, and for users with impaired vision or aging eyes.

Legal Compliance

WCAG AA compliance is legally required for public-sector websites in many countries, including the EU, UK, and USA (under ADA and Section 508).

Broader Reach

Accessible designs serve more users. Better contrast helps all visitors — not just those with disabilities — especially in challenging conditions like bright sunlight or small screens.

WCAG Contrast Standards Explained

A breakdown of each compliance level and what it means for your design

AA

WCAG AA — The Standard

The AA level is the widely adopted accessibility standard. It requires a minimum contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text (18pt regular or 14pt bold and above). Most government, healthcare, and e-commerce websites must meet AA to be legally compliant.

AAA

WCAG AAA — Enhanced Standard

The AAA level is the highest accessibility standard, requiring 7:1 for normal text and 4.5:1 for large text. It is recommended for content used by people with severe visual impairment. WCAG notes that it is not possible to achieve AAA for all content, so it is not required for entire sites, but targeting it improves inclusivity significantly.

What Counts as Large Text?

WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. At these sizes the eye can tolerate slightly lower contrast. Headings, display text, and pull quotes typically qualify — but body copy does not, regardless of font size.

How the Contrast Ratio Is Calculated

The ratio is calculated using the relative luminance of each color, following the WCAG formula. Each RGB channel is first linearized (gamma-corrected) and then combined as L = 0.2126R + 0.7152G + 0.0722B. The ratio is then expressed as (Llighter + 0.05) / (Ldarker + 0.05).

Color Contrast Tips for Designers & Developers

Practical guidelines for creating accessible color palettes

Start with Accessible Brand Colors

When building a color palette, verify contrast ratios before finalizing. Slightly adjusting lightness in HSL often achieves compliance without changing the visible hue of your brand colors.

Test in Real Conditions

Passing the ratio checker is a great start, but also preview your design on a mobile device in bright sunlight or with accessibility overlays enabled to validate real-world readability.

Don't Rely on Color Alone

Contrast is one accessibility dimension. Also ensure that information conveyed by color (like error states) is also communicated through icons, labels, or text to support color-blind users.

Check Both Light & Dark Modes

If your design supports a dark mode, run every text-background pair through the checker in both modes. Dark backgrounds often need lighter, higher-contrast text than you'd expect.

Watch Out for Overlapping Elements

Text overlaid on images or gradients may pass the checker for a single background color but fail in practice. Always test the worst-case area of the background directly behind your text.

Style Links Distinctly

Hyperlinks must have a 3:1 contrast ratio against surrounding body text AND against the page background. Using underlines in addition to color helps all users identify links without relying solely on color contrast.

Frequently Asked Questions

Common questions about color contrast and WCAG accessibility standards

Color contrast ratio measures the difference in luminance between two colors. A ratio of 1:1 means identical colors (no contrast), while 21:1 is the maximum possible contrast (pure black on pure white). Higher ratios mean better readability, especially for users with visual impairments.
WCAG AA is the standard accessibility level defined by the Web Content Accessibility Guidelines. It requires a minimum contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text (18pt or larger, or 14pt bold or larger). WCAG AA compliance is legally required for public-sector and many commercial websites in numerous countries.
WCAG AAA is the highest accessibility standard. It requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. It is recommended for content aimed at users with severe visual impairments. WCAG notes that conforming to AAA across an entire site is not always possible, but targeting it greatly improves inclusivity.
WCAG defines large text as 18pt (24px) or larger for regular-weight text, or 14pt (approximately 18.67px) or larger for bold text. This lower threshold exists because larger text is inherently easier to read even at reduced contrast. Most body copy does not qualify as large text.
Poor color contrast makes text hard or impossible to read for many users — including people with low vision, cataracts, color blindness, or age-related vision changes. An estimated 8% of men have some form of color-vision deficiency. Good contrast also helps everyone reading on bright screens, small devices, or in challenging lighting.