What contrast ratio is required for body text?

WCAG 2.x Level AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

Is higher contrast always better?

No. Very high light-on-dark contrast can cause halation and eye strain. Aim for sufficient contrast (AA minimum) with comfortable dark-mode values, not maximum polarity.

How do I calculate contrast ratio in CSS projects?

Use the WCAG relative luminance formula or a contrast checker. Grade's contrast lesson includes an interactive calculator that reports AA and AAA pass or fail for any foreground/background pair.

WCAG Contrast Ratio Guide — AA & AAA for Web Typography

WCAG contrast ratio measures the luminance difference between text and its background. For normal body text, Level AA requires at least 4.5:1. Level AAA requires 7:1. Large text (18px+ regular or 14px+ bold) can pass AA at 3:1.

Gray secondary text is the most common failure. #9E9E9E on white is roughly 2.7:1 — it looks fine on a Retina display in a dim room and fails for low-vision users, degraded screens, and outdoor reading.

Contrast has a floor and a ceiling

Low contrast fails quietly. High contrast can fail loudly on dark backgrounds. Pure white (#FFFFFF) on pure black (#000000) passes every automated checker at 21:1 and can cause halation — a glow effect that reduces sharpness, especially for users with astigmatism on OLED screens at night.

On dark backgrounds, target roughly 7:1 to 15:1 with off-white text (#E8E8E8 on #181818), not maximum polarity.

Dark mode requires separate tokens

A token that passes on white may fail when reused on dark gray. #525252 reads at 7.8:1 on white but drops to 2.4:1 on #121212. Every text color needs a light-mode and dark-mode value tested against its background.

Body and secondary text: minimum 4.5:1 against background (WCAG AA)
Prefer 6:1+ for secondary text so it stays readable in sunlight
Dark mode: retune every text token; do not invert light-theme grays
Avoid pure white on pure black for large reading blocks

Interactive lessons

Contrast

Related guides

Glossary

Contrast ratio

Frequently asked questions

What contrast ratio is required for body text?: WCAG 2.x Level AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
Is higher contrast always better?: No. Very high light-on-dark contrast can cause halation and eye strain. Aim for sufficient contrast (AA minimum) with comfortable dark-mode values, not maximum polarity.
How do I calculate contrast ratio in CSS projects?: Use the WCAG relative luminance formula or a contrast checker. Grade's contrast lesson includes an interactive calculator that reports AA and AAA pass or fail for any foreground/background pair.