Free tools · Checker
Color contrast checker
Contrast is the most-failed rule on the web, and the easiest to check. Pick your text and background colors and see instantly whether they clear WCAG's 4.5:1 bar for normal text, 3:1 for large text and UI parts, and the stricter AAA thresholds.
Normal text at 16px. Most of your page reads like this.
Large text, which starts at 24px, or 18.5px bold.
7.31:1
contrast ratio
Pass
AA · normal text
needs 4.5:1
Pass
AA · large text
needs 3:1
Pass
AA · UI parts (1.4.11)
needs 3:1
Pass
AAA · normal text
needs 7:1
Every ratio here comes from the relative-luminance formula, which is the same arithmetic behind 1.4.3 Contrast (Minimum) for text and 1.4.11 Non-text Contrast for borders, icons and focus rings. The large-text row is the one people apply too generously, so it is worth being exact about. Large is defined in points, at 18 point or 14 point bold, which lands at roughly 24px and 18.5px on screen. The size that counts is the one you shipped, as well, so a reader zooming your body copy up to that size never turns it into large text.
What it checks
The ratio between two colors
Calculated the way WCAG defines it, from relative luminance rather than perceived brightness.
Against every threshold
4.5 to 1 for body text, 3 to 1 for large text and interface components, 7 to 1 for the enhanced AAA level.
Large text separately
WCAG defines large in points, at 18pt or 14pt bold, and W3C puts the pixel equivalents at about 24px and 18.5px. The allowance is easy to apply where it does not belong, and zooming never earns it, because the size that counts is the one you delivered.
Non-text contrast
Borders, icons and focus indicators need 3 to 1, which is a separate rule from text contrast and missed far more often.
What it cannot tell you
- Whether the rule reaches what you measured. Text that is part of a logo or brand name has no contrast requirement at all, and neither does text or a component that is disabled, so a ratio that comes up short is not automatically a finding.
- Text over a photograph or a gradient. A ratio needs two flat colors, and the honest test there is the busiest region of the image rather than an average.
- Whether the color is doing work on its own. Contrast can pass while the meaning still depends on hue, which is a 1.4.1 failure.
- Semi-transparent overlays, unless you give it the color that actually results after compositing.
Where to go next
- 1.4.3 Contrast (Minimum)The rule for text, with the exceptions that genuinely apply.
- 1.4.11 Non-text ContrastThe separate rule for borders, icons and focus rings.
- Palette builderFind the shades of your brand color that pass, rather than testing one pair at a time.
- Color and contrastWhy the thresholds are what they are, and where teams get caught.
One pair down, a whole site to go
This checks one combination. Your site has hundreds, including text over images and gradients that no formula can settle without eyes. The free 10-page scan measures the contrast pairs a machine can settle on its own; the human audit settles the rest.