WCAG 2.1 / 2.2 Standard

WCAG Contrast Checker

Check if your text is readable. Enter two colors and instantly see if they meet WCAG 2.1 accessibility standards for AA and AAA compliance.

✓ WCAG 2.1 / 2.2 👁 Real-time Ratio 👥 CVD Preview

Color Selection

Foreground Color (Text)

Background Color

Text Size (affects thresholds)

Bold Text (14pt+ = Large)

Quick Presets:

Contrast Ratio

21.00:1

✓ Passes WCAG AA for normal text

Detailed Compliance Breakdown

AA Normal Text Minimum 4.5:1 required

✓

AAA Normal Text Minimum 7.0:1 required

✓

UI Components & Icons Minimum 3.0:1 required (Buttons, borders, inputs)

✓

WCAG 2.1 Color Contrast Standards at a Glance

Understanding the Web Content Accessibility Guidelines (WCAG 2.1 / 2.2) contrast thresholds for digital web design.

Level AA (Minimum) 4.5 : 1

Standard Web Minimum

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt) and 3.0:1 for large text (18pt+ or 14pt bold). This is the mandatory legal requirement for most European and US accessibility laws (Section 508, ADA).

Level AAA (Enhanced) 7.0 : 1

Enhanced Readability

WCAG Level AAA is the highest compliance tier, requiring a 7.0:1 contrast ratio for normal text and 4.5:1 for large text. It provides maximum legibility for users with low vision, aging eyes, or when viewing screens in bright sunlight.

UI & Icons 3.0 : 1

Graphical Objects & UI

Under WCAG 2.1 Success Criterion 1.4.11 (Non-Text Contrast), visual indicators such as button borders, form input outlines, focus indicators, and chart icons require a minimum contrast ratio of 3.0:1 against adjacent colors.

WCAG 2.1 / 2.2 Contrast Ratio Requirements Table

Quick reference guide for designers and front-end developers.

Element Type	Text Size / Weight	Level AA Threshold	Level AAA Threshold
Body & Small Text	Under 18pt (24px) / Under 14pt bold (18.5px)	4.5 : 1	7.0 : 1
Large Text & Headings	18pt+ (24px+) or 14pt+ bold (18.5px+ bold)	3.0 : 1	4.5 : 1
UI Controls & Icons	Buttons, Input Borders, Checkboxes, Icons	3.0 : 1	3.0 : 1
Incidental Text	Disabled buttons, decorative logos, inactive inputs	No Minimum	No Minimum

Why Luminance Contrast Matters for Colorblind Users (Daltonism)

When individuals with color vision deficiency (such as Deuteranopia or Protanopia) view a website, chromatic differences between hues (like red vs. green or purple vs. blue) often collapse into similar yellowish-gray tones.

Because hue perception is reduced in colorblind individuals, luminance contrast (brightness difference) becomes the primary mechanism for distinguishing text from its background. A color pair that looks high-contrast to a normal-sighted person (e.g., bright red text on dark green) will fail entirely for a red-green colorblind viewer because both colors share near-identical luminance levels.

3 Essential Rules for Designing Accessible Web Interfaces

Never rely on color alone to convey meaning: Always pair error messages or active states with clear icons, underlines, or text labels (WCAG Success Criterion 1.4.1).
Ensure input borders and focus rings have 3:1 contrast: Form fields with light gray borders on white backgrounds often fail WCAG 2.1 Non-Text Contrast guidelines.
Test all color combinations in colorblind vision modes: Use our live Color Blindness Preview tab above to verify that your foreground and background colors retain acceptable contrast ratios across Deuteranopia, Protanopia, and Tritanopia simulations.

FAQ

Everything you need to know about WCAG color contrast guidelines and accessibility calculations.

What is the WCAG 2.1 Color Contrast Ratio formula?

The WCAG contrast ratio is calculated using relative luminance: (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. The values range from 1:1 (zero contrast, e.g., white on white) to 21:1 (maximum contrast, black on white).

Is 21:1 the maximum contrast ratio possible?

Yes! Pure Black (#000000) on Pure White (#FFFFFF) achieves a perfect 21:1 contrast ratio, providing the highest possible readability under WCAG standards.

What counts as "Large Text" in WCAG guidelines?

WCAG defines large text as at least 18pt (24px) normal weight or at least 14pt (18.5px) bold weight. Because larger text is naturally easier to read, it has a lower minimum contrast requirement (3:1 for AA).

Why does color contrast matter for outdoor mobile screen viewing?

High ambient glare and direct sunlight significantly wash out screen colors and reduce perceived contrast. Web pages that only meet minimum AA ratios (4.5:1) may become illegible outdoors, whereas AAA compliance (7:1) ensures readable text even under harsh glare.