Search code examples
accessibilitywcagwcag2.0

Contrast on focus visible

I am looking for clarification on how WCAG 2.1 SC 1.4.11 Non-text contrast relates to focus visible form elements.

Does this new (in WCAG 2.1) SC mean that any color used on form elements focus, now must have a contrast of 3.1 or higher to the surrounding content?

That is how I read it, but I am not sure.

Solution

  • Yes you are correct.

    So your focus indicators should be at least 3:1 with the background (so if you are using a dark theme the contrast should be between that and the focus indicator, you can have lower contrast with the actual input if you really need to).

    It also applies to highlighting selected items in a radio control, custom controls etc.

    The guideline itself may not be very clear but this companion guide will explain it much better

    https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html