What is a contrast ratio?

Glossary · Updated October 23, 2026 · Also called: color contrast, WCAG contrast

Definition A contrast ratio measures the difference in relative luminance between two colors, usually text and its background, on a scale from 1:1 (identical) to 21:1 (black on white). WCAG 2.2 level AA requires at least 4.5:1 for normal text and 3:1 for large text (at least 24 px, or 18.66 px bold); level AAA requires 7:1 and 4.5:1. Icons and form control borders need 3:1.

How to fix it: Low contrast text: WCAG contrast ratios and how to fix them

How is the contrast ratio calculated?

Each color is converted to its relative luminance L, a value from 0 (black) to 1 (white) that weights green most and blue least, because that's how the eye perceives brightness. The ratio is:

(L1 + 0.05) / (L2 + 0.05)    where L1 is the lighter color

So #777777 on white is about 4.48:1, just below AA, while #767676 is 4.54:1 and passes. Hue doesn't count: red on green can have very low contrast even though the colors look different, which is also why contrast matters for people with color vision deficiencies.

The WCAG thresholds

"Large" means at least 18 pt (24 CSS px) or 14 pt bold (about 18.66 CSS px). Disabled controls, logos and pure decoration are exempt.

Text over a photo or gradient has no single background color. Measure it against the part of the image that gives the lowest contrast, or give the text a solid or semi-transparent backdrop so it passes everywhere, including when the image fails to load.

Why it matters more on phones

Phones are read outdoors, in sunlight, at low screen brightness and at an angle. Light gray text that looks elegant on a calibrated monitor can disappear on a phone in daylight. Dark mode adds a second set of colors to check: a gray that passes on white often fails on dark gray.

Example

/* 2.8:1 on white: fails AA */
.muted { color: #999999; }
/* 4.7:1 on white: passes AA for all text sizes */
.muted { color: #737373; }

How MobileCheck checks it

MobileCheck computes the contrast of the text against its actual background on each device and flags anything below WCAG AA: 4.5:1 for normal text and 3:1 for large text. It runs the check again in dark mode, where many sites fail. The contrast checker tests a single pair of colors and suggests the nearest passing color.

Related terms

• WCAGWCAG is the W3C standard for accessible web content. The current version, WCAG 2.2, has testable criteria at levels A, AA and AAA; AA is the usual target.
• prefers-color-schemeprefers-color-scheme is a CSS media feature that reports whether the user chose a light or dark theme, so a site can switch to dark colors.
• Text scalingText scaling is when people enlarge text with phone or browser settings. WCAG 1.4.4 requires pages to work with text resized up to 200%.
• Tap targetA tap target is any element you tap on a touch screen. WCAG 2.2 asks for at least 24×24 CSS px; Apple recommends 44 pt and Material 48 dp.

Guides and tools

• Low contrast text: WCAG contrast ratios and how to fix them
• Color contrast checker
• Mobile Resilience Index

Sources

1. W3C: Understanding SC 1.4.3 Contrast (Minimum)
2. W3C: WCAG 2.2, definition of contrast ratio

All 27 glossary terms, A to Z