Button colour contrast: Crawl Audit check 112

Short answer: a call-to-action button needs to stand out from what's around it, and its text needs to be readable on the button. WCAG sets minimum contrast ratios for both. Check 112 passes whenever a call to action exists (check 111), and doesn't measure colours itself, so test your button with a contrast checker.

What Crawl Audit checks

• Pass: a call to action was found in check 111. The result points to the accessibility checks for contrast.
• Warning: no call to action to style.

Colours can only be measured on the drawn page, which this check doesn't do.

What WCAG says

• 1.4.3 Contrast (Minimum), level AA: text needs "a contrast ratio of at least 4.5:1". "Large-scale text", meaning "18 point text or 14 point bold text", needs at least 3:1.
• 1.4.11 Non-text Contrast, level AA: what identifies a control, such as a button's edge or fill, needs "a contrast ratio of at least 3:1 against adjacent color(s)".
• 1.4.11 "does not require that controls have a visual boundary". A text link can be a perfectly good button.

How to test yours

• Chrome DevTools: inspect the button text, and the colour picker shows the contrast ratio and whether it passes.
• Check the button text against the button colour (4.5:1, or 3:1 for large bold text).
• If the button is only a coloured shape, check that shape against the background behind it (3:1).
• Check hover and focus states too (check 138).

Sources

• W3C, Understanding 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast, checked 6 October 2026.