ACCESSIBILITY GUIDE · 8 MIN READ

How to check WCAG color contrast for text

Color contrast measures the luminance difference between foreground and background. It is one necessary accessibility check, but a passing ratio does not guarantee that an interface is readable or usable.

Use the actual rendered colors

Check the final text and background colors after opacity, overlays and state styles are applied. A design-token value alone may not represent the pixels users see.

Apply the right threshold

WCAG AA commonly requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter. Large text has size and weight definitions, so do not label a value large based only on visual impression.

Test every meaningful state

Review default, hover, focus, active, visited, error and disabled states. Also check text over images and gradients at their lowest-contrast locations.

Worked example

Black on white has a 21:1 ratio. A mid-grey may pass for large text but fail the 4.5:1 normal-text threshold.

Limitations to review

• Contrast does not assess font legibility or spacing.
• Color must not be the only signal.
• Image backgrounds need sampling across the text area.