The Complete WCAG Color Contrast Guide

Master WCAG color contrast ratios, compliance levels, and testing methods to make every design accessible and legally defensible.

WCAG color contrast is the measured luminance difference between a foreground color (usually text) and its background, expressed as a ratio from 1:1 (no contrast) to 21:1 (black on white). To pass WCAG 2.1 at the minimum Level AA, normal text needs a contrast ratio of at least 4.5:1, large text needs 3:1, and UI components need 3:1. For the gold-standard Level AAA, those requirements rise to 7:1 for normal text and 4.5:1 for large text. Getting this right is the single most impactful accessibility fix most design teams can make.

Fails AA

Light gray text on white is hard to read for many users.

#9E9E9E on #FFFFFF · 2.68:1

Passes AAA

Near-black text on white is crisp and readable for everyone.

#1A1A1A on #FFFFFF · 17.40:1

Low-contrast text (left) fails WCAG AA. High-contrast text (right) passes. The difference is visible even to non-impaired users.

Why Contrast Ratios Matter Beyond Compliance

It is tempting to treat WCAG contrast as a checkbox exercise: hit the numbers, ship the product. But the rationale runs deeper. Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Add age-related vision decline, bright sunlight on mobile screens, and low-quality displays, and a significant slice of your audience is affected even without a formal disability. Designing for adequate contrast makes your product more usable for everyone, not just a protected minority.

There are also legal and commercial implications. Accessibility lawsuits under ADA Title III and equivalent legislation in the EU, UK, and Australia continue to rise. Failing a basic audit because your body copy is #888888 on #FFFFFF (contrast ratio 3.54:1, a fail) is an avoidable risk.

Understanding the WCAG Contrast Ratio Formula

The math behind the ratio is defined in WCAG 2.x as relative luminance, a measure that models how the human eye perceives brightness. Here is the conceptual pipeline so you are not treating it as a black box:

Each RGB channel value (0 to 255) is normalized to 0 to 1.
A gamma correction is applied to convert the value to linear light (sRGB linearization).
The three linearized channels are combined with perceptual weights: R × 0.2126 + G × 0.7152 + B × 0.0722. Note how heavily green is weighted, reflecting the eye's sensitivity to it.
The resulting number is the relative luminance (L), between 0 (black) and 1 (white).
Contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05).

You never need to compute this by hand. The ColorSense WCAG Contrast Checker does the calculation instantly. Paste in two hex codes and get a clear pass or fail against every WCAG level.

WCAG Conformance Levels at a Glance

WCAG (Web Content Accessibility Guidelines) organizes success criteria into three levels. For contrast, the relevant criteria are 1.4.3 Contrast (Minimum) at AA and 1.4.6 Contrast (Enhanced) at AAA. Here is a quick reference table:

Content Type	Level AA	Level AAA
Normal text (below 18pt / 14pt bold)	4.5:1	7:1
Large text (18pt+ or 14pt+ bold)	3:1	4.5:1
UI components & graphical objects	3:1	Not specified
Decorative text / logos	Exempt	Exempt
Disabled / inactive UI elements	Exempt	Exempt

18pt is approximately 24px. 14pt bold is approximately 18.67px bold in CSS.

Visual Reference: Common Contrast Ratios

The infographic below shows six real-world text-on-background pairs, their ratios, and their pass or fail status. Every swatch is rendered with exact hex values.

Aa Sample

#777777 on #FFF

4.48:1 · Fails AA (just under)

Aa Sample

#757575 on #FFF

4.61:1 · Passes AA

Aa Sample

#FFF on #004C9E

8.31:1 · Passes AAA

Aa Sample

#FFF on #F5A623

2.03:1 · Fails AA & AAA

Aa Sample

#1A1A1A on #F5A623

8.59:1 · Passes AAA

Aa Sample

#FFF on #212121

16.10:1 · Passes AAA

The #F5A623 amber example is instructive: white text on amber fails badly, but switching to near-black #1A1A1A turns the same brand color into an AAA-passing combination. You do not have to abandon your palette. You adjust which text color pairs with it.

What Counts as "Large Text"?

This is one of the most misunderstood corners of the spec. WCAG defines large text as:

18pt (24px) or larger in regular weight, or
14pt (approximately 18.67px) or larger in bold (CSS font-weight: 700 or heavier).

The pt-to-px conversion assumes 96 DPI. So a 24px bold heading qualifies as large text, but a 16px bold label does not. It must meet the stricter 4.5:1 threshold. When in doubt, apply the normal-text threshold. It is a safe margin.

UI Components and Non-Text Contrast (WCAG 1.4.11)

Added in WCAG 2.1, Success Criterion 1.4.11 extends contrast requirements beyond text. Any visual element that conveys information or state, such as a button border, a form field outline, a checkbox tick, a chart line, or a focus indicator, needs a 3:1 contrast ratio against adjacent colors. Common failures include:

Light gray input borders (#CCCCCC) on a white background, a ratio of 1.61:1, a clear fail.
Icon-only buttons where the icon color has insufficient contrast against its container.
Focus outlines that are so thin and low-contrast they are effectively invisible.
Data visualization lines or slices that rely solely on color to distinguish categories.

Use the ColorSense Palette Health checker to audit an entire palette's pairings at once. It flags problem combinations before they make it into production.

WCAG 2.x vs WCAG 3.0 (APCA): What Is Changing?

WCAG 3.0 is still in draft, but it introduces a new contrast model called APCA (Advanced Perceptual Contrast Algorithm). APCA is more nuanced than the current formula. It accounts for font weight, font size, and viewing conditions in a single score rather than treating all text identically. Rather than a ratio, APCA produces an Lc (lightness contrast) value, and different thresholds apply depending on font size and weight.

For now, WCAG 2.1 and its identical successor WCAG 2.2 remain the legally referenced standard in most jurisdictions. APCA is worth learning and experimenting with, but do not use it as a substitute for WCAG 2.x compliance until legislation catches up. The ColorSense contrast checker reports WCAG 2.x ratios, which is what auditors and legal standards currently require.

Common Color Pairs That Designers Get Wrong

These pairings appear frequently in production, and most of them fail WCAG AA. Here are the repeat offenders, with their actual contrast ratios:

Foreground	Background	Ratio	AA Normal	Fix
`#888888` (mid gray)	`#FFFFFF`	3.54:1	Fail	Use `#767676` or darker
`#FFFFFF`	`#FF6B6B` (coral)	2.78:1	Fail	Use `#CC0000` bg or dark text
`#FFFF00` (yellow)	`#FFFFFF`	1.07:1	Fail	Never use yellow on white
`#0000FF` (blue)	`#000080` (navy)	1.86:1	Fail	Use white text on navy
`#00AA00` (green)	`#FFFFFF`	3.11:1	Fail	Darken to `#007700` (5.77:1)

How to Test WCAG Contrast in Your Workflow

The most reliable way to stay compliant is to test contrast at five points in your process, not just once at the end. Call it the ColorSense Contrast Workflow: design, audit, live-check, tokenize, and re-test after dark mode.

1. Test at the Design Stage

The cheapest time to fix a contrast problem is before any code is written. Use the ColorSense WCAG Contrast Checker directly in your design review process. Enter candidate color pairs before finalizing your design tokens.

2. Audit Your Full Palette

Individual pair-testing can miss problems that only emerge when you see all combinations together. Palette Health generates a full contrast matrix for every color in your palette, so you can see at a glance which pairs are safe and which are off-limits.

3. Check Your Live Site

Even a compliant design can ship with contrast regressions. A CMS user uploads a light image behind white text, or a developer hard-codes a color override. Use the ColorSense Website Palette extractor to pull real colors from a live URL and recheck them.

4. Build Contrast Into Your Design Tokens

The most durable fix is structural. Define semantic color tokens (for example --color-text-primary and --color-surface-default) and document which token pairs are approved combinations. This way, developers are not choosing arbitrary hex codes. They are selecting from pre-audited pairings.

5. Re-test After Dark Mode

Dark mode is not simply an inversion of light mode. Colors that pass in light mode can fail in dark mode, especially mid-tones. Test both modes explicitly, and run your dark palette through the checker as a separate audit.

Contrast and Brand Colors: Resolving the Tension

Brand guidelines often lock in palette colors before accessibility is considered. When a brand's primary blue is #5B9BD5 (contrast on white 2.96:1, a fail for normal text), the design team faces pushback. Here is how to resolve it without a brand overhaul:

Reserve the brand color for decorative use (icons, borders, illustrations) and use a darker shade for text.
Define a compliant text variant: derive a darker version of the brand color that retains hue and feel but hits 4.5:1. For #5B9BD5, darkening to #1A5FA8 achieves 6.47:1 while remaining recognizably the same blue family.
Use the brand color as a background with dark text: #1A1A1A on #5B9BD5 achieves 5.88:1, a pass.
Update brand guidelines to include an explicit "accessible application" section. This is increasingly standard in enterprise brand systems.

The ColorSense Color Scheme Generator lets you build palettes anchored to a brand hue while automatically surfacing accessible combinations. Start with your brand color and let the tool find compliant pairings in the same family.

Frequently Asked Questions

What is the minimum contrast ratio required by WCAG?

The minimum is 4.5:1 for normal-sized text at WCAG 2.x Level AA, the level required by most accessibility laws. Large text (18pt+ or 14pt+ bold) has a lower minimum of 3:1 at AA. UI components like button borders and form field outlines also require 3:1 under WCAG 2.1 Success Criterion 1.4.11.

Does WCAG contrast apply to images and icons?

WCAG 1.4.11 (Non-text Contrast) requires a 3:1 ratio for graphical elements that convey information, so yes. Icons that communicate meaning, chart lines, and informational illustrations all need to meet the 3:1 threshold against adjacent colors. Purely decorative images are exempt, as are brand logos.

Is pure black on white always the right choice for maximum accessibility?

Not necessarily. Pure black (#000000) on white (#FFFFFF) at 21:1 exceeds every WCAG threshold, but some users with certain cognitive disabilities or scotopic sensitivity find extreme contrast fatiguing. A near-black like #1A1A1A on white (17.4:1) is still AAA-compliant while being marginally softer. The WCAG spec does not set a maximum contrast, but it is worth knowing the trade-off exists.

Does contrast ratio account for color blindness?

No, and this is a critical distinction. WCAG contrast ratio measures luminance difference only, not color difference. Two colors can have a passing contrast ratio and still be indistinguishable to someone with deuteranopia, the most common form of red-green color blindness. Contrast compliance and color-blindness accessibility are separate concerns. Use a color blindness simulator alongside your contrast checker for a complete audit.

What is the difference between WCAG 2.1, WCAG 2.2, and WCAG 3.0 for contrast?

WCAG 2.2, published in October 2023, did not change any contrast success criteria. 1.4.3 and 1.4.11 are identical to WCAG 2.1. The main contrast-related change in 2.2 is a new criterion (2.4.11 and 2.4.12) around focus indicator appearance, which includes a minimum contrast requirement for focus outlines. WCAG 3.0, still in draft, proposes replacing the current ratio system with the APCA model, but it is not yet a legal standard anywhere.

Try it now

Check any color pair against WCAG — free, no signup

Pick a foreground and background, see the exact contrast ratio plus AA/AAA verdicts for normal and large text. One click auto-fixes a failing pair while keeping your hue.

Open WCAG Contrast Checker →