WCAG Color Contrast Guide 2026: Pass AA (4.5:1) & AAA (7:1)

Quick Answer: WCAG Color Contrast in 2026

WCAG AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. The maximum possible ratio is 21:1 (pure black on pure white). Anything below 3:1 is considered inaccessible for body text. To check any color pair, enter the foreground and background HEX codes into the free Toolzie Color Contrast Checker — it applies the WCAG 2.1 formula in real time and shows AA/AAA pass/fail for both normal and large text.

What Is WCAG Color Contrast?

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the W3C. The current version, WCAG 2.1, defines minimum contrast ratios for text and background colors. WCAG 2.2 was finalized in October 2023, and it adds requirements for focus indicators, dragging movements, and target sizes but keeps the color contrast rules identical to 2.1.

Color contrast is one of the four perceptual criteria at the heart of WCAG (the others are text alternatives, adaptable layouts, and distinguishable content). If your foreground and background colors don't have enough contrast, users with low vision, color blindness, age-related vision loss, or who are reading in bright sunlight cannot read your content. Approximately 2.2 billion people worldwide have some form of vision impairment, and contrast is the single biggest reason web content is unreadable for them.

The contrast requirement applies to all text on your website: body copy, headings, button labels, link text, form fields, placeholders, error messages, and tooltips. It also applies to text in images, infographics, charts, and embedded SVGs. The only major exception is decorative text (text that is purely visual, like a logo) and inactive UI components.

WCAG defines two compliance levels: AA (the legal minimum in most jurisdictions) and AAA (the enhanced standard for specialized content like medical or financial information). All major accessibility laws reference WCAG AA — the Americans with Disabilities Act (ADA) in the US, the Accessibility for Ontarians with Disabilities Act (AODA) in Ontario, Section 508 for US federal agencies, EN 301 549 in the EU, and JIS X 8341 in Japan all enforce WCAG 2.1 AA as the technical baseline.

The WCAG 2.1 Contrast Ratios You Need to Pass

WCAG 2.1 defines two text sizes — normal and large — and two conformance levels — AA and AAA. That gives you four possible ratios to hit. Here's the full table:

Level	Normal Text	Large Text	Use Case
AA (Legal minimum)	4.5:1	3:1	All public web content
AAA (Enhanced)	7:1	4.5:1	Medical, financial, government

What counts as "large text"? Per WCAG 2.1, large text is 18pt regular or 14pt bold and above. In CSS pixels, that's 24px regular or about 18.66px bold. Headings, hero text, button labels, and pull quotes usually qualify; body copy, captions, and form labels do not.

Why are the normal-text ratios stricter? Body text is harder to read at low contrast because the eye has to track small glyphs across many lines. Large text is held to a lower standard because the eye can read it more easily even when contrast is reduced.

UI component contrast: WCAG 2.1 SC 1.4.11 (added in 2.1, not present in 2.0) also requires a 3:1 contrast ratio for graphical objects and UI components — including form field borders, button outlines, focus rings, and icons that convey meaning. This is in addition to the text-contrast requirement.

The WCAG 2.1 Contrast Formula (How the Ratio Is Calculated)

The WCAG 2.1 contrast ratio is calculated from the relative luminance of the two colors. Relative luminance is a weighted measure of how bright a color appears to the human eye, with green weighted highest (because human vision is most sensitive to green wavelengths) and blue weighted lowest.

Step 1: Convert HEX/RGB to sRGB (0–1)

Take your 8-bit color channels (0–255) and divide by 255 to get values between 0 and 1. For example, #0f172a becomes R = 15/255 = 0.0588, G = 23/255 = 0.0902, B = 42/255 = 0.1647.

Step 2: Linearize the sRGB values

Apply the sRGB gamma correction. If the value is less than 0.03928, divide by 12.92. Otherwise, raise to the power of 2.4, subtract 0.055, and divide by 1.055.

For #0f172a: R_linear = ((0.0588 + 0.055) / 1.055)^2.4 = 0.00499, G_linear = ((0.0902 + 0.055) / 1.055)^2.4 = 0.00944, B_linear = ((0.1647 + 0.055) / 1.055)^2.4 = 0.02470.

Step 3: Calculate relative luminance

L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

For #0f172a: L = 0.2126 × 0.00499 + 0.7152 × 0.00944 + 0.0722 × 0.02470 = 0.00106 + 0.00675 + 0.00178 = 0.00959

Step 4: Calculate the contrast ratio

Contrast = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color and L2 is the darker.

For #0f172a on #ffffff: L1 = 1.0 (white), L2 = 0.00959 (slate-900). Contrast = (1.0 + 0.05) / (0.00959 + 0.05) = 1.05 / 0.0596 = 17.62:1. That passes WCAG AAA for both normal and large text.

The maximum possible contrast ratio is 21:1 (pure black on pure white). The minimum is 1:1 (same color on itself). The Toolzie Color Contrast Checker implements this exact formula in JavaScript and updates the ratio in real time as you change either color.

15 Accessible Color Pairs (Verified WCAG AA & AAA)

Here are 15 pre-verified color combinations that pass WCAG AA for normal text. Combinations marked with ✓ for AAA also pass the enhanced 7:1 ratio. Use these as a starting point for your design system. Always verify with a contrast checker before publishing.

Foreground	Background	Ratio	AA	AAA
#0f172a (slate-900)	#ffffff (white)	17.85:1	✓	✓
#0f172a (slate-900)	#f8fafc (slate-50)	17.06:1	✓	✓
#ffffff (white)	#1e293b (slate-800)	14.63:1	✓	✓
#1e293b (slate-800)	#fef3c7 (amber-100)	13.14:1	✓	✓
#ffffff (white)	#4c1d95 (violet-900)	10.95:1	✓	✓
#374151 (gray-700)	#ffffff (white)	10.31:1	✓	✓
#831843 (pink-900)	#ffffff (white)	9.65:1	✓	✓
#ffffff (white)	#7c2d12 (orange-900)	9.37:1	✓	✓
#1e40af (blue-800)	#ffffff (white)	8.72:1	✓	✓
#ffffff (white)	#1e40af (blue-800)	8.72:1	✓	✓
#475569 (slate-600)	#ffffff (white)	7.58:1	✓	✓
#ffffff (white)	#075985 (sky-800)	7.56:1	✓	✓
#b91c1c (red-700)	#ffffff (white)	6.47:1	✓	✗
#0f766e (teal-700)	#ffffff (white)	5.47:1	✓	✗
#15803d (green-700)	#ffffff (white)	5.02:1	✓	✗

10 Color Combinations That Fail WCAG (Don't Use These)

These are common, real-world combinations that fail WCAG AA. If you have any of these in your design system, replace them. Each ratio is computed using the WCAG 2.1 formula.

Foreground	Background	Ratio	Issue
#999999 (gray)	#ffffff (white)	2.85:1	Fails AA normal text (need 4.5:1)
#ffff00 (yellow)	#ffffff (white)	1.07:1	Fails everything (use black instead)
#87ceeb (sky blue)	#ffffff (white)	1.74:1	Fails AA, fails large text
#8b0000 (dark red)	#00008b (dark blue)	1.53:1	Fails everything (both dark, no contrast)
#90ee90 (light green)	#ffffe0 (light yellow)	1.39:1	Fails everything (both light)
#a3a3a3 (disabled gray)	#f5f5f5 (light bg)	2.31:1	Fails AA (disabled text trap)
#60a5fa (blue-400)	#dbeafe (blue-100)	2.08:1	Fails AA (Tailwind 400-on-100 trap)
#4ade80 (green-400)	#dcfce7 (green-100)	1.59:1	Fails AA (success message trap)
#facc15 (yellow-400)	#fef9c3 (yellow-100)	1.43:1	Fails AA (warning callout trap)
#ffffff (white)	#22c55e (green-500)	2.28:1	Fails everything (use green-800 instead)

ADA, AODA, Section 508, EN 301 549: What Each Law Requires

WCAG itself is a recommendation, but most accessibility laws adopt WCAG as the technical standard. Here's the breakdown:

ADA Title III (US — private businesses)

The Americans with Disabilities Act covers businesses open to the public. The Department of Justice has consistently held that WCAG 2.1 AA is the standard for "effective communication" under ADA Title III. Lawsuits for inaccessible websites have surged 300% since 2018; the median settlement is $15,000–$50,000, with some cases exceeding $1M.

AODA (Ontario — private and public)

The Accessibility for Ontarians with Disabilities Act requires organizations with 50+ employees to meet WCAG 2.0 AA (the AODA standard hasn't formally updated to 2.1 yet, but 2.1 AA is the practical target). The deadline for compliance was January 1, 2021. Non-compliance fines are up to $100,000 per day for corporations.

Section 508 (US federal agencies)

Section 508 of the Rehabilitation Act requires US federal agencies to make their digital content accessible. The 2017 refresh aligned Section 508 with WCAG 2.0 AA, but most agencies now target 2.1 AA. Applies to all federal websites, applications, and procured technology.

EN 301 549 (EU)

The European standard for accessibility of ICT products and services. EN 301 549 v3.2.1 (2021) requires WCAG 2.1 AA conformance for public-sector websites and mobile applications, in effect since June 2025 under the European Accessibility Act.

JIS X 8341 (Japan)

The Japanese Industrial Standard for accessibility. The 2016 update aligns with WCAG 2.0 AA, with a transition to 2.1 AA underway. Required for national and local government websites in Japan.

6 Strategies for Accessible Color Design

1. Build accessible color tokens into your design system

Don't let designers pick colors ad hoc. Define a set of 4-6 "text-on-background" tokens (e.g., --text-primary, --text-secondary, --text-tertiary) that have all been pre-verified at 4.5:1+. This is the single highest-leverage accessibility intervention you can make — it makes passing combinations the default and failing combinations impossible by construction.

2. Test every new color pair before merging

Add a CI check that runs the WCAG checker on every color in your CSS or design tokens. Reject the build if any token pair fails 4.5:1 for normal text. Tools like color-contrast() in Chrome DevTools and axe DevTools can do this automatically.

3. Use a 2-tier system: AA for body, AAA for hero

Aim for 4.5:1 (AA) on body text, captions, and form labels. Aim for 7:1 (AAA) on hero text, primary CTAs, and important warnings. The marginal cost of going from 4.5:1 to 7:1 is usually zero (one more shade darker) and the user benefit is significant.

4. Test for color blindness, not just contrast

Contrast catches luminance differences. Color blindness catches hue confusions. A pure-red-on-pure-green combination has decent luminance contrast (3.05:1 — still fails AA) but is unreadable for the 8% of men with deuteranopia. Use a color-blindness simulator (Chrome DevTools → Rendering → "Deuteranopia") to check.

5. Don't rely on color alone

WCAG SC 1.4.1 says color cannot be the only means of conveying information. Error messages need an icon or text label, not just red color. Required form fields need an asterisk, not just a red border. Links need an underline, not just a different color.

6. Run an automated site-wide audit quarterly

Use Lighthouse, axe DevTools, WAVE, or Pa11y to scan your entire site for contrast issues every 3 months. New pages, new design elements, and content updates can introduce regressions. The 30-minute audit typically surfaces 10-50 issues that would have been missed otherwise.

Frequently Asked Questions

What is a good WCAG color contrast ratio?

For WCAG 2.1 AA, normal text needs a contrast ratio of at least 4.5:1, and large text (18pt+ regular or 14pt+ bold) needs at least 3:1. For WCAG 2.1 AAA, normal text needs 7:1 and large text needs 4.5:1. The maximum possible contrast ratio is 21:1 (pure black on pure white). Anything below 3:1 is considered inaccessible for body text. Our free Color Contrast Checker computes the ratio in real time.

What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) color contrast defines the minimum contrast ratios required between foreground (text) and background colors for accessible web content. The current standard is WCAG 2.1, published in 2018, with WCAG 2.2 finalized in 2023. WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 Level AAA requires 7:1 for normal text and 4.5:1 for large text. These standards are enforced by ADA (US), AODA (Ontario), Section 508 (US federal), EN 301 549 (EU), and JIS X 8341 (Japan).

How do I check color contrast for accessibility?

Use a WCAG 2.1-compliant checker like our free Color Contrast Checker at toolzie.ca/color_contrast_checker/. Enter the foreground (text) and background color in HEX, RGB, or HSL format, and the tool calculates the contrast ratio using the official relative-luminance formula. It then reports AA and AAA pass/fail for both normal and large text. For automated site-wide audits, use Lighthouse, axe DevTools, or WAVE.

Is there an ADA-compliant color contrast checker?

Yes. The ADA (Americans with Disabilities Act) Title III and the AODA (Accessibility for Ontarians with Disabilities Act) both reference WCAG 2.1 AA as the technical standard. This means any color combination with a 4.5:1 contrast ratio for normal text and 3:1 for large text is ADA-compliant. Our free Color Contrast Checker applies the WCAG 2.1 formula in real time and is suitable for ADA, AODA, Section 508, EN 301 549, and JIS X 8341 compliance audits. The tool is 100% browser-based, no signup required.

What colors fail WCAG color contrast?

Common failing combinations include: light gray on white (e.g., #999999 on #ffffff = 2.85:1, fails AA), yellow on white (#ffff00 on #ffffff = 1.07:1, fails everything), light blue on white (#87ceeb on #ffffff = 1.74:1, fails AA), dark red on dark blue (#8b0000 on #00008b = 1.53:1, fails everything), and pastel green on pastel yellow (#90ee90 on #ffffe0 = 1.39:1, fails everything). Generally, any combination where the colors are similar in lightness will fail. The Toolzie Color Contrast Checker flags failing combinations in red and suggests a nearest-passing alternative.

What is the contrast ratio for large text?

For WCAG AA, large text (18pt regular or 14pt bold and above) needs a contrast ratio of at least 3:1. For WCAG AAA, large text needs at least 4.5:1. Large text is held to a lower standard because it is easier to read at lower contrast. Note that 18pt is approximately 24px and 14pt is approximately 18.66px in CSS. WCAG 2.1 large-text exceptions apply to body text 18pt+, headings 18pt+, and bold text 14pt+. Smaller text is considered normal text and requires the stricter 4.5:1 (AA) or 7:1 (AAA) ratio.

What is the WCAG 2.1 contrast formula?

The WCAG 2.1 contrast formula uses relative luminance (L), which is calculated separately for the foreground and background color. The sRGB components (R, G, B from 0-1) are first linearized: if the value is less than 0.03928, divide by 12.92; otherwise raise to 2.4, subtract 0.055, and divide by 1.055. The relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. The result ranges from 1:1 (no contrast) to 21:1 (black on white). This exact formula is implemented in our Color Contrast Checker.

What is the color contrast for accessible design?

For accessible design, aim for 4.5:1 minimum (WCAG AA) on all body text and 7:1 (WCAG AAA) on user-facing text where possible. Use dark text on light backgrounds (e.g., #0f172a on #ffffff = 17.85:1) or light text on dark backgrounds (e.g., #ffffff on #1e293b = 14.63:1). Avoid gray on white (#999999 on #ffffff = 2.85:1), low-contrast pastels, and any combination where the colors are similar in lightness. Test every color pair with a WCAG 2.1 checker before publishing, and use accessible design tokens in your CSS to make passing combinations easy to maintain.