0

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
user2007920
  • 123
  • 1
  • 9
  • I doubt that most browsers' default light-mid blue meets that ratio ... interesting. – Ted Fitzpatrick Dec 02 '19 at 17:54
  • You know what I didn't actually twig that until now despite always thinking the default was hard to see, just did a quick experiment and the default ring colour in chrome is #A0BEE5 (roughly) so that is around a 2:1 ratio and a fail. – GrahamTheDev Dec 02 '19 at 18:06

1 Answers1

4

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

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • 1
    from the link above (https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) on of the example says this - A focus indicator is required. While in this case the additional gray (#CCC) outline has an insufficient contrast of 1.6:1 against the white (#FFF) background, the cursor/caret which is displayed when the input receives focus does provide a sufficiently strong visual indication. looks like 1.6:1 is enough if your input element has a well contrasted border. – Karlus da Wakoko May 19 '21 at 00:14
  • Yes so you still have to have contrast for the input itself of 3:1 when it is not focused. However (and I have to admit, I never registered that point until today) for the focus state the caret is sufficient to indicate focus on an input, which is surprising! I would imagine that will change in WCAG 3.0 due to how they are looking to change focus states to include a minimum pixel area relative to the element. Obviously WCAG 3.0 is several years away so not too much of a problem for now. Thanks for pointing that one out though, always fun to learn something new! – GrahamTheDev May 19 '21 at 06:14
  • However in the "spirit" of contrast requirements I would still encourage people to have a 3:1 focus ring, a caret is hard to spot compared to a focus ring indicator. – GrahamTheDev May 19 '21 at 06:17