Your designer delivers a mockup with light gray body text on a white background. It looks clean and modern. You run it through a contrast checker and get 3.2:1. That fails WCAG AA. The fix is not a redesign: changing the text from #9e9e9e to #767676 raises the ratio to 4.48:1, which still fails. #757575 produces 4.60:1, which passes. Two characters apart in the hex code. Both look identical to untrained eyes.
The color contrast checker at ToolCenterHub calculates the contrast ratio between any two colors instantly and flags whether the pair passes WCAG AA or AAA. This guide explains what that ratio actually measures, how the relative luminance formula weights each color channel, where the AA and AAA thresholds apply, and what is changing in WCAG 3.0.
What a Contrast Ratio Measures
The contrast ratio does not measure how different two colors look. It measures the difference in their luminance: how much light they emit or reflect relative to white.
The ratio runs from 1:1 to 21:1. A 1:1 ratio means both colors have identical luminance: no contrast at all, text is invisible. A 21:1 ratio is black (#000000) on white (#FFFFFF), the highest possible contrast. Most readable body text falls between 4.5:1 and 10:1.
The reason the ratio uses luminance rather than color difference is accessibility. A user with a color vision deficiency may not distinguish red from green by color, but can distinguish dark from light. A user with low vision may need high luminance contrast to read at all regardless of the colors involved. Luminance-based contrast is a physical property that benefits all users, not just those with average color vision.
The color tools hub at ToolCenterHub includes the contrast checker alongside the color name finder and format conversion tools for working with hex, RGB, and HSL values across design workflows.
How Relative Luminance Is Calculated
Luminance is not the same as brightness or lightness. It is calculated from the linearized RGB values of a color using specific channel weights:
L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear
Before applying these weights, each sRGB channel must be converted from its gamma-encoded value to a linear light value. For a channel value C in 0–1 range:
- If C ≤ 0.04045:
C_linear = C / 12.92 - If C > 0.04045:
C_linear = ((C + 0.055) / 1.055) ^ 2.4
The channel weights reflect human vision physiology. The human eye contains three types of cone photoreceptors: L-cones (long wavelength, red-sensitive), M-cones (medium wavelength, green-sensitive), and S-cones (short wavelength, blue-sensitive). The distribution is approximately 64 percent M-cones, 32 percent L-cones, and 4 percent S-cones. This is why the green channel carries 0.7152 weight while blue carries only 0.0722: green contributes more than ten times what blue contributes to perceived brightness.
Once luminance is calculated for both colors, the contrast ratio is:
Contrast Ratio = (L_lighter + 0.05) / (L_darker + 0.05)
The 0.05 offset accounts for ambient light in a typical viewing environment, preventing the ratio from reaching infinity when one luminance is zero.
For pure white (#FFFFFF): L = 1.0. For pure black (#000000): L = 0. So white on black = (1.0 + 0.05) / (0.0 + 0.05) = 21:1.
WCAG 2.1 Compliance Levels: AA and AAA
WCAG 2.1 Success Criterion 1.4.3 defines two conformance levels for text contrast:
| Level | Normal Text | Large Text | UI Components |
|---|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 | No requirement |
AA is the standard for legal compliance in most jurisdictions. Section 508 of the US Rehabilitation Act (revised 2018) requires WCAG 2.0 AA as the minimum for federal agencies and contractors. Multiple US federal court decisions, including the Ninth Circuit ruling in Robles v. Domino's Pizza (2019), have established that private businesses must also meet WCAG 2.0 AA under the ADA for their digital properties.
AAA applies in contexts where the widest possible audience must be served, including government healthcare portals, financial services regulated for accessibility, and services specifically designed for users with low vision. AAA is not legally required in most commercial contexts, but targeting it eliminates most contrast-related complaints.
What Counts as Large Text?
Large text gets a lower contrast threshold (3:1 instead of 4.5:1) because larger characters are easier to read at lower contrast. WCAG defines large text specifically:
- 18pt (24px) or larger at normal (400) weight
- 14pt (18.67px) or larger at bold (700) weight
The bold threshold is frequently missed. A heading styled at font-size: 20px; font-weight: 700 qualifies as large text and needs only 3:1. The same heading at font-weight: 400 needs 4.5:1 because 20px normal weight does not reach the 24px threshold.
The specific value 14pt (18.67px) for bold text corresponds to the minimum print size generally considered readable for bold text at arm's length, which WCAG adopted as the reference threshold. It is not an arbitrary round number.
Text that is decorative (present for visual effect only, with no informational function) is exempt from all contrast requirements under WCAG 1.4.3. Text that is part of an inactive or disabled UI element is also exempt.
Real Examples That Pass and Fail
The difference between passing and failing is sometimes a single color channel digit:
| Text Color | Background | Contrast Ratio | WCAG AA (Normal) |
|---|---|---|---|
#9e9e9e | #ffffff | 2.85:1 | Fails |
#767676 | #ffffff | 4.48:1 | Fails (by 0.02) |
#757575 | #ffffff | 4.60:1 | Passes |
#6d6d6d | #ffffff | 5.74:1 | Passes |
#595959 | #ffffff | 7.00:1 | Passes AAA |
#000000 | #ffffff | 21:1 | Passes AAA |
The #767676 vs #757575 case is the exact threshold boundary and is worth knowing: any gray lighter than #757575 on white fails WCAG AA. This is not obvious from looking at the colors.
Pure color pairings without lightness difference also fail, regardless of how vivid or different the colors appear. Red (#ff0000) on green (#008000) has a contrast ratio of approximately 2.91:1, failing AA, even though the two colors appear extremely different to someone with typical color vision. To a user with deuteranopia (red-green color blindness, affecting roughly 8 percent of men), red and green appear nearly identical in color. The contrast ratio failure captures this accessibility gap.
UI Component Contrast: The 3:1 Rule for Non-Text Elements
WCAG 2.1 added Success Criterion 1.4.11 (Non-text Contrast), which requires a 3:1 ratio for the visual boundaries of interactive and informational UI elements. This applies to:
- Button outlines and backgrounds (where the outline defines the clickable region)
- Input field borders against the surrounding background
- Checkbox and radio button frames
- Focus indicator rings
- Charts and graph lines when they convey data
- Icons that are the only means of communicating a function
This requirement catches a common pattern: a white button with a light gray border on a white page. The button text may pass 4.5:1, but if the button's visual boundary (its border or background) does not have 3:1 against the surrounding page, a low-vision user may not see the button boundary and not know it is interactive.
Logotypes, brand marks, and purely decorative graphics are explicitly exempt from 1.4.11. The requirement targets elements that have functional meaning, not visual decoration.
ADA, Section 508, and Legal Accountability
Accessibility contrast requirements in the United States come from two parallel frameworks.
Section 508 (Rehabilitation Act, revised 2018) applies to federal agencies and organizations that receive federal funding. It explicitly adopts WCAG 2.0 Level AA as the technical standard. All federal websites, federal contractor portals, and federally-funded software must meet 4.5:1 for normal text and 3:1 for large text.
ADA Title III applies to places of public accommodation. Federal courts have increasingly ruled that websites of businesses open to the public are covered. The Ninth Circuit's 2019 ruling in Robles v. Domino's Pizza established that failure to meet WCAG standards can constitute an ADA violation. Courts in multiple circuits have followed this reasoning, and the DOJ issued guidance in 2022 reaffirming that websites must comply with the ADA. No federal regulation specifies an exact WCAG version; courts have generally applied WCAG 2.1 AA as the operative standard.
Practically, this means any US-based business with a public-facing website carries legal exposure from contrast failures on text and UI components. The exposure is highest when a user with a disability files a complaint or demand letter, which requires only that they encountered a barrier on the site.
WCAG 3.0 and the APCA System
WCAG 3.0, currently in working draft, replaces the ratio system with APCA (Advanced Perceptual Contrast Algorithm), developed by Andrew Somers. APCA addresses a known limitation of the current system: the existing formula treats all text at 4.5:1 the same, whether it is 9px body copy or a 72px display headline. In practice, larger and heavier text is legible at lower luminance contrast.
APCA produces a Lightness Contrast (Lc) value rather than a ratio. The required Lc value varies by font size and weight. A 14px regular font requires approximately Lc 75, while a 36px bold font requires approximately Lc 45. This context-sensitivity makes APCA more permissive for large display text and stricter for very small text than the current ratio system.
APCA is not backward-compatible with current tools or pass/fail thresholds. The CSS color formats guide covers how color values in hex, RGB, and HSL map to each other, which matters when converting colors to meet a contrast target in either system.
WCAG 3.0 has not been finalized and has not been adopted by any legal standard as of August 2026. WCAG 2.1 AA remains the operative requirement for all ADA and Section 508 compliance. Designing to WCAG 2.1 AA now and monitoring WCAG 3.0 development is the practical approach.
Common Contrast Mistakes Designers Make
Using opacity to soften text: Setting text to opacity: 0.6 does not inherit the parent's background color in the contrast calculation. A tool measuring the DOM will calculate the effective color after compositing, but many designers check the hex code of the text color directly without accounting for the opacity blend. Always check contrast on the rendered color, not the base hex value.
Trusting Figma's eyedropper: Design tools display colors in sRGB, but the eyedropper may sample colors at different gamma representations depending on the color profile set for the canvas. Colors that look like they pass in a design file can fail in browser rendering due to gamma handling differences.
Forgetting placeholder text: HTML input placeholders often render at reduced opacity or as lighter gray by default. Placeholder text is typically informational (it tells users what to type) and must meet the 4.5:1 threshold. Browser defaults often fail.
Ignoring focus indicators: Focus rings added by browsers for keyboard navigation frequently fail 3:1 against backgrounds. Custom focus styles must be checked explicitly.
The color families guide covers how warm and cool color groups differ in relative luminance, which informs which combinations are likely to need adjustment to meet contrast requirements. For working with specific named colors and their hex values when evaluating text and background pairings, the color name finder shows hex and RGB for every standard CSS color name.
