Contrast ratio is a measure that expresses the brightness difference between text color and background color on a scale from 1:1 to 21:1. Under WCAG 2.2 success criterion 1.4.3, normal-size text requires a ratio of at least 4.5:1 and large text at least 3:1. Low contrast makes content unreadable for users with low vision.
Contrast ratio is calculated from the relative luminance of two colors; the ratio between pure white and pure black is 21:1. WCAG 2.2 success criterion 1.4.3 (Level AA) requires at least 4.5:1 for normal text and at least 3:1 for large text, with higher thresholds at Level AAA. The criterion applies to all content meant to be read, including body text, button labels and form field text; logos and purely decorative text are out of scope. In practice, contrast problems usually come from brand colors: light gray body text, pastel buttons on white backgrounds and text overlaid on photos are the most frequent violations.
To measure contrast you can use browser developer tools, free online tools such as the WebAIM Contrast Checker, or automated accessibility scanners. Low contrast affects not only users with low vision but anyone looking at a phone screen in bright sunlight, so fixing it has broad benefits. The lasting solution is to correct the color palette in your design system: darkening text colors or lightening backgrounds is usually enough. Tools that offer a high-contrast mode on the user side add convenience, but they do not replace fixing contrast issues in the source code. Automated scanning lists violations per page and element, making remediation plannable.
Frequently asked questions
How is contrast ratio measured?
The most practical way is to use ready-made tools: the developer tools in Chrome and Firefox show the contrast ratio when you inspect a text element, and free sites such as the WebAIM Contrast Checker calculate the ratio from two color codes. For a site-wide audit, automated accessibility scanners crawl all pages and list text below the 4.5:1 threshold element by element. There is no need to calculate by hand.
Does the 4.5:1 rule apply to all text?
No. The 4.5:1 threshold applies to normal-size text; for large text (roughly 24 pixels and above, or about 19 pixels when bold) 3:1 is sufficient. Logos, brand names and purely decorative text are out of scope, and disabled interface elements are also exempt. Sites targeting Level AAA face higher thresholds. When in doubt, aiming above 4.5:1 is the safe choice.
This content is for information only and is not legal advice.