WCAG Color Contrast Explained: Ratios, AA vs AAA, and How to Pass
WCAG color contrast is the measurable difference in relative luminance between a foreground color and a background color, expressed as a ratio from 1:1 to 21:1. Under WCAG 2.x, normal text needs at least 4.5:1 for AA, while large text needs at least 3:1. The contrast ratio is based on luminance rather than hue, which is why two colors can look visually different yet still fail accessibility requirements.
What is a WCAG contrast ratio?
A contrast ratio compares the relative luminance of two colors.
The scale starts at 1:1, where the colors have the same luminance, and reaches 21:1, the maximum contrast between black and white.
#000000on#FFFFFFis 21:1#767676on#FFFFFFis about 4.54:1#777777on#FFFFFFis about 4.48:1
That small difference between the last two examples matters. #767676 passes the 4.5:1 AA requirement for normal text, while #777777 falls just below it.
Use the contrast checker to test an actual foreground and background pair.
How WCAG contrast is calculated
WCAG 2.x first calculates the relative luminance of each color, a value from 0 for black to 1 for white that weights green most heavily because the eye is most sensitive to it.
The lighter color becomes L1 and the darker color becomes L2. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05).
You do not need to calculate this manually. The important point is that WCAG evaluates luminance rather than measuring how different two HEX values or hues appear.
That distinction explains many unexpected results.
WCAG AA contrast requirements
WCAG Success Criterion 1.4.3 defines the AA requirements for text.
- Normal text: at least 4.5:1
- Large text: at least 3:1
Large text means at least 18pt regular or 14pt bold. In CSS pixel equivalents, that is roughly 24px regular or 18.66px bold.
Text below those sizes needs the normal 4.5:1 contrast ratio.
WCAG AAA contrast requirements
WCAG Success Criterion 1.4.6 defines the stricter AAA text contrast requirements.
- Normal text: at least 7:1
- Large text: at least 4.5:1
Passing AA does not mean a color pair passes AAA.
A design system can therefore have different acceptable combinations depending on its target conformance level and the size and weight of the text.
Contrast for UI components
Text is not the only element that needs sufficient contrast.
WCAG Success Criterion 1.4.11 requires at least 3:1 contrast for user interface components and graphical objects against adjacent colors.
This includes form control boundaries, focus indicators, meaningful icons, and graphical information needed to understand or operate the interface, such as chart lines.
Logos are exempt from the text contrast requirements. Disabled controls are also exempt.
Examples of passing and failing colors
Black #000000 on white produces the maximum 21:1 ratio and passes AA and AAA.
Gray #767676 on white produces 4.54:1. It passes AA for normal text, but it does not reach the 7:1 AAA threshold.
Gray #777777 on white produces 4.48:1. Despite looking identical to #767676, it falls below the 4.5:1 requirement for normal AA text.
Orange #F97316 on white produces about 2.8:1. It fails AA for text of any size. Darkening it to #EA580C reaches 3.56:1, which passes for large text and UI components, and #C2410C reaches 5.18:1, which passes AA for normal text.
This is why visual judgment alone is not enough.
Check complete palettes with the contrast matrix when several foreground and background combinations need to be evaluated.
Why harmonious colors can fail contrast
Color harmony and WCAG contrast measure different things.
A complementary pair may have strong hue contrast but similar luminance. An analogous palette may contain attractive colors that are too close in lightness for readable text.
Orange on white is the common example. Orange looks clearly different from white because its hue is obvious, yet most orange values have insufficient luminance contrast for normal text.
WCAG contrast calculation ignores whether two colors are red, orange, blue, or green. The luminance relationship determines the ratio.
How to fix a failing color pair
Start by changing lightness rather than changing the hue.
If gray text fails against white, make the gray darker until it crosses the required threshold.
If dark text sits on a colored background, you may be able to make the background lighter instead.
For a button, adjust either the button background or its text color while keeping the overall hue relationship. A color scale shows the lighter and darker steps of a hue so you can pick the first one that passes.
Test every adjustment with the contrast checker. Do not stop when the combination merely looks better.
Contrast and color blindness are different checks
Passing WCAG contrast does not mean every user will distinguish two colors in the same way.
Color vision deficiencies affect the ability to distinguish certain hues. This becomes especially important when color communicates states such as success and error, or when charts use hue to separate data.
Use the color blindness simulator as a separate check.
Do not communicate important information through color alone. Text, icons, shapes, patterns, and labels provide additional cues.
The accessibility preview shows a palette applied to a sample interface under several vision simulations.
What about APCA?
APCA is a newer contrast algorithm proposed for WCAG 3.
It evaluates contrast differently from the WCAG 2.x ratio, taking text size, weight, and polarity (light on dark versus dark on light) into account, and is intended to model perceptual contrast more closely.
APCA is not the current standard. For WCAG 2.x compliance, which is what accessibility laws currently reference, use the established contrast-ratio requirements. APCA is worth watching, not yet worth replacing your checks with.
A practical WCAG color contrast workflow
- Identify every important foreground and background combination in the design.
- Test body text first. Normal text should reach 4.5:1 for AA, or 7:1 when targeting AAA.
- Test large text using its 3:1 AA or 4.5:1 AAA threshold.
- Check UI components, focus rings, and graphical objects against the 3:1 requirement.
- For a larger palette, use the contrast matrix to find usable combinations rather than checking every pair individually.
- Run a separate color-vision check with the color blindness simulator.
- If you are working with Display P3 or other wide-gamut colors, examine them with the wide gamut contrast tool.
FAQ
What is the minimum WCAG contrast ratio?
For WCAG 2.x AA, normal text requires at least 4.5:1 and large text requires 3:1. UI components and graphical objects require 3:1 under Success Criterion 1.4.11.
What is the difference between WCAG AA and AAA contrast?
AAA uses stricter text thresholds. Normal text needs 7:1 and large text needs 4.5:1 for AAA, compared with 4.5:1 and 3:1 for AA.
Does complementary color contrast pass WCAG automatically?
No. WCAG contrast is based on relative luminance, not hue relationships. Always test the exact foreground and background HEX values with the contrast checker.
Is APCA the current WCAG contrast standard?
No. APCA is a proposed contrast method associated with WCAG 3 development, while current WCAG 2.x requirements use the established contrast-ratio calculation. Use the WCAG standard required by your project.