Requirements at a glance

Level AA is the baseline legal requirement in most jurisdictions, including the European Union's Web Accessibility Directive and the U.S. Section 508. Level AAA is stricter and is recommended for text that is read extensively.

What counts as "large text"

WCAG defines large text as:

• 18pt (24 CSS pixels) or larger at any weight.
• 14pt (18.66 CSS pixels) or larger if the font-weight is 700 (bold) or heavier.

The reasoning: large text is easier to read because the strokes are thicker and the letters occupy more of the visual field. Lower contrast is acceptable because the eye can still resolve the shapes.

In practice: most UI text is not "large." Body text at 16px is normal text — it needs 4.5:1. Headings at 24px or larger qualify as large. Button labels at 14px bold also qualify. When in doubt, treat it as normal text.

How contrast ratio is calculated

The WCAG contrast formula is:

Contrast = (L_lighter + 0.05) ÷ (L_darker + 0.05)

Where L is the relative luminance:

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

And R_linear, G_linear, B_linear are the sRGB channels
after gamma decoding:

  C_linear = C / 12.92                     if C ≤ 0.04045
  C_linear = ((C + 0.055) / 1.055) ^ 2.4   if C > 0.04045

Two important consequences of this formula:

• Green contributes more to luminance than red, which contributes more than blue. This is why dark blue on white has higher contrast than dark red on white, even at similar lightness.
• The gamma decoding is important. Contrast is not computed on the raw hex values but on linearized RGB — which is how the eye actually perceives brightness.

You rarely need to compute this by hand. Use the contrast checker — it applies the exact WCAG formula.

What the thresholds mean in practice

Where WCAG contrast applies

Common pitfalls

Placeholder text

Placeholder text is often styled with light gray "for aesthetics" — but it usually fails contrast. It carries information (what to enter in the field), so it must meet the same 4.5:1 threshold as other text. In practice, many designers use a slightly darker gray, or replace placeholders with persistent labels.

Text on images

If text is placed over a photograph, the "background color" varies pixel by pixel. WCAG requires that contrast holds across the whole image. Solutions:

• Darken or lighten the image behind the text.
• Add a semi-transparent overlay.
• Add a solid backdrop or text shadow (though text shadows are not formally approved).
• Place the text outside the image entirely.

Alpha colors

Semi-transparent colors must be evaluated against the blended result, not the raw color value. If your text uses rgba(0, 0, 0, 0.5) on white, the effective color is a mid-gray — and it may fail. Test the blended result.

Dark mode

Contrast requirements do not change in dark mode, but the failure modes do. Very high contrast (pure white on pure black) can cause halation for some users, so many designers slightly soften the extremes: #E5E7EB text on a #111827 surface, for example.

APCA — an emerging alternative

APCA (Advanced Perceptual Contrast Algorithm) is a newer contrast model that produces different results than WCAG. It accounts for font weight, polarity (dark-on-light vs light-on-dark) and includes a broader range of values than WCAG's 1:1 to 21:1 scale. It is a candidate for WCAG 3, but is not yet a formal standard.

For now, WCAG 2.2 remains the requirement. Our contrast checker reports both WCAG and APCA results so you can compare them.

Testing checklist

• Every text/background pair passes 4.5:1 or 3:1 depending on size.
• Placeholder text passes the same threshold as body text.
• Focus rings are at least 3:1 against the adjacent background.
• Icon-only buttons have 3:1 contrast for the icon.
• Text over images has been tested against the lightest and darkest parts of the image.
• Alpha colors have been tested against the blended result.
• Both light and dark themes have been tested independently.

Related resources

Frequently asked questions