Understand WCAG contrast ratios, AA and AAA targets, UI boundaries, worked examples, and a practical testing workflow.
Published July 17, 2026Updated July 17, 2026By Color Pick
Direct answer
Color contrast ratio compares the relative luminance of a foreground and background. Under WCAG 2.2, normal text generally needs at least 4.5:1 for Level AA, large text needs 3:1, and important non-text interface boundaries and graphical information commonly need 3:1. Contrast is necessary, but it is only one part of accessible design.
At a glance
Normal text AA4.5:1Large text AA3:1Normal text AAA7:1Important UI boundaries3:1 where SC 1.4.11 applies
How contrast ratio works
Contrast ratio is calculated from relative luminance, not from hue names or subjective brightness.
The scale runs from 1:1 for identical luminance to 21:1 for black against white. A bright saturated color can still have weak contrast against white, and two colors that look different in hue can remain close in luminance.
Color Pick calculates the ratio from the resolved foreground and background values. The result does not change when the foreground and background are swapped, although the visual experience may still differ because of typography and area.
AA and AAA text targets
WCAG separates normal text and large text because larger, heavier glyphs are easier to perceive.
For Level AA, normal text requires 4.5:1 and large text requires 3:1. Level AAA raises the targets to 7:1 for normal text and 4.5:1 for large text. WCAG defines large text using point size and weight criteria; do not assume that any visually prominent label automatically qualifies.
Logotypes and incidental text have exceptions, but interface teams should document why an exception applies instead of treating it as a general escape hatch.
Common WCAG contrast targets
Content
AA
AAA
Normal text
4.5:1
7:1
Large text
3:1
4.5:1
Important non-text information
3:1
Not a separate AAA target
UI components and graphical information
Text contrast alone does not validate an interface.
Important visual information such as a focus ring, input boundary, icon state, or chart line may need a 3:1 contrast ratio against adjacent colors under WCAG 1.4.11. The exact requirement depends on whether the visual cue is needed to identify the component or understand the information.
A border can be unnecessary when shape, spacing, and background already identify a component. When the border is the only way to locate the control, it becomes important information and should be tested.
Do not rely on color alone
Passing contrast does not solve situations where meaning is encoded only by color.
A red error outline and green success outline may each contrast with the background while still becoming difficult to distinguish for some users. Add text labels, icons, patterns, or position so the state remains understandable without hue recognition.
The same principle applies to charts, links inside body text, required fields, and selected navigation.
Worked contrast examples
Use the ratio as evidence, then inspect the final component.
#111827 on #FFFFFF is a strong body-text pairing. #6B7280 on #FFFFFF may be acceptable for some normal text depending on the exact computed ratio, but lighter grays frequently fail. White text on a vivid yellow often fails even when the yellow appears saturated.
When a pair fails, adjust the color used for that role. Do not automatically darken every palette swatch, because the original color may still be suitable for a larger surface or decorative accent.
Example testing decisions
Pair
Likely use
Decision
#111827 on #FFFFFF
Body text
Strong candidate; still test typography
#FFFFFF on #2563EB
Primary button
Test normal text AA and focus state
#FFFFFF on #FFD60A
Button label
Usually too weak; use dark text
#9CA3AF on #FFFFFF
Muted text
Often too light for normal text
Practical contrast testing workflow
Test semantic roles and component states, not isolated pairs only.
1
Choose the exact foreground and background values.
2
Select the actual text size and weight used in the component.
3
Check AA and AAA results in the Contrast Checker.
4
Review borders, icons, focus, selected, hover, and disabled states.
5
Test the pair in light and dark themes.
6
Verify that meaning is not communicated through color alone.
7
Review the final implementation at browser zoom and with representative content.
What a contrast checker cannot prove
A numerical pass is evidence for specific color values, not a complete accessibility verdict.
Contrast tools do not prove that text is large enough, controls are keyboard accessible, focus order is correct, motion is safe, labels are meaningful, or assistive technology receives the right semantics. Anti-aliasing, thin type, transparency, background images, and overlays can also change the practical result.
Use automated contrast checks early and often, then include manual component and user testing.
Key takeaways
Contrast ratios support repeatable decisions when they are applied to real roles and states.
Normal text generally needs 4.5:1 for WCAG AA.
Large text generally needs 3:1 for WCAG AA.
Important non-text cues may need 3:1 against adjacent colors.
Passing contrast does not allow color-only meaning.
Test transparency, state changes, and final components.
Automated checks are not accessibility certification.
Put the guide into practice
Test a real color pair
Enter foreground and background values, review AA and AAA targets, and preview the result in realistic text and interface samples.
No. It satisfies one common text-contrast target for a specific pair, but accessibility also depends on semantics, keyboard behavior, content, motion, focus, layout, and assistive technology support.
Why does white text fail on some bright colors?
Saturation and hue do not guarantee luminance contrast. Bright yellow, lime, cyan, and pastel surfaces can be too close to white in relative luminance.
Should disabled controls meet the same contrast target?
WCAG has exceptions for inactive components, but designers should still make disabled states understandable and avoid unnecessarily faint content.
Primary references
These sources support the standards and technical explanations in this guide. Color Pick recommendations and product-specific limitations are identified separately in the article.