What contrast ratio is required for WCAG AA?

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold).

WCAG 2.1 Level AAA is the highest standard, requiring 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum in most jurisdictions; AAA is best practice.

What is relative luminance?

Relative luminance is the perceived brightness of a color on a scale from 0 (black) to 1 (white), calculated using the sRGB color space formula defined in WCAG. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the higher luminance.

Does the EU Accessibility Act require WCAG compliance?

Yes. The EU Accessibility Act (EAA), in force from June 2025, requires most products and services to meet EN 301 549, which references WCAG 2.1 Level AA as the standard for digital accessibility in the EU.

WCAG 2.1 · EU Accessibility Act · Free

Color Contrast Checker

Check if your foreground and background colors meet WCAG 2.1 accessibility standards. Instant AA and AAA pass/fail, contrast ratio, and color blindness preview.

Foreground (text)

–

contrast ratio

Background

The quick brown fox jumps over the lazy dog — Normal text (16px)

Large text (24px bold)

Link text

Normal Text (<18pt)

AAA

Large Text (18pt+ / 14pt bold)

AAA

UI Components / Graphics

Color Blindness Preview

Normal vision

Protanopia
Red-blind (1% men)

Deuteranopia
Green-blind (6% men)

Tritanopia
Blue-blind (0.1%)

WCAG 2.1 contrast requirements — and why they matter in 2025

The EU Accessibility Act (EAA) came into force on June 28, 2025, requiring all digital products and services sold in the EU to meet EN 301 549, which references WCAG 2.1 Level AA. In the US, the DOJ finalized rules in April 2024 applying WCAG 2.1 AA to state/local government websites under the ADA. Color contrast is one of the most common accessibility failures.

📐

The math

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L is relative luminance (0=black, 1=white). AA normal text requires 4.5:1. A dark navy on white is typically 14–18:1 — easily passing AAA.

👁

Color blindness

About 8% of men have color vision deficiency. The preview shows your combination under Protanopia (red-blind), Deuteranopia (green-blind), and Tritanopia (blue-blind) using SVG color matrix filters.

✅

AA vs AAA

AA (4.5:1 normal, 3:1 large) is the legal minimum. AAA (7:1 normal, 4.5:1 large) is best practice for body text. For most designs, achieving AA everywhere and AAA for body copy is the right target.

Frequently Asked Questions

What contrast ratio do I need for WCAG AA?

4.5:1 for normal text (under 18pt regular or 14pt bold) and 3:1 for large text (18pt+ regular or 14pt+ bold). UI components and graphics also need 3:1 against their surrounding colors.

What is WCAG AAA?

The enhanced level: 7:1 for normal text, 4.5:1 for large text. AA is the legal standard in most countries. AAA is aspirational — the WCAG spec notes not all content can achieve it.

Does the EU require WCAG compliance?

Yes. The EU Accessibility Act (in force June 28, 2025) applies to most private-sector digital products and services in the EU. It references EN 301 549, which maps to WCAG 2.1 Level AA.

How is relative luminance calculated?

Each RGB channel is linearized (gamma correction removed), then combined: L = 0.2126R + 0.7152G + 0.0722B. This matches human perceptual brightness across the sRGB color space.