Skip to content
Accessibility Scanner

Free tool

Focus state contrast checker

A button can read perfectly well sitting on the page and turn unreadable the moment you tab to it. Paste the rule block for a control and this compares both states, which is the comparison standard checkers skip.

Paste your CSS

Include the resting rule and the :focus or :focus-visible rule. Anything it cannot read is listed rather than guessed at.

At rest
Focused
The label

Large text is 24px, or 18.66px when bold. It needs 3:1 instead of 4.5:1.

Result

Contrast in each state
StateRatioAAAAA

Why standard checkers miss this

axe-core has two contrast rules, and both read the element as the page currently stands, so a control that only fails once focused is never evaluated in that state. Our scanner tabs to each control it can reach and measures again, reporting it as color-contrast-focus.

WCAG covers it already. 1.4.3 Contrast (Minimum) applies to text in the state it is presented, and a focused control is presented focused. The full explanation, including the reverse case where a light theme repaints the background dark, is in fixing contrast that breaks on focus.

What it can't tell you

  • It compares two states you supply. It does not open your site, so it cannot find which controls change on focus. The scan below does that.
  • Focus styling applied by JavaScript, such as a class toggled on focusin, is outside what the paste box can read.
  • It measures the label against its own background. Whether the focus indicator itself stands out is WCAG 2.2's 2.4.11 Focus Appearance, a different measurement.
  • A gradient or image behind the control belongs in the image and gradient checker.
  • It uses the WCAG 2 contrast formula and does not score APCA.

Check a whole page instead

The full scan loads a real page, runs axe-core against WCAG 2.2 A and AA, then focuses every control it can reach by tab and measures the contrast again. It is free and needs no signup.