0

WCAG 2.1 introduced success criterium 1.4.11 Non-text Contrast for UI components like checkboxes, sliders etc.

Would it be safe to ignore 1.4.11 for the background-colour within a button, as long as the text inside has sufficient contrast as well to the button as required by 1.4.3 Contrast, as to the surrounding background colour?

Somebody who couldn’t perceive the button shape due to the low contrast, they would at least perceive the text within – just as with a text-only button.

And text-only buttons exist in several widely used design systems. As the text is the only thing left visible, and text needs a higher contrast than UI components, it automatically suffices for 1.4.11 as well.

Now, I’m not only wondering for the practical implications, but also for an audit. Do you know sites that passed audits with such buttons, or with text-only buttons?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Andy
  • 4,783
  • 2
  • 26
  • 51
  • Found this in [Understanding Non-text contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html): „If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)”. But that document is informative, so the question on actual audit outcomes remains. – Andy Jan 13 '22 at 16:33
  • Also, just a friendly FYI -- We're on WCAG 2.2 as of May 2021: https://www.w3.org/TR/WCAG22/ – Josh Jan 13 '22 at 22:22
  • Thanks Josh for the reminder. I’m aware and nothing changed in 2.2 concerning my question. – Andy Jan 17 '22 at 14:04
  • @Josh To clarify: 1.4.11 explicitly is NOT about text at all. It’s about a component’s border, background, icon colour or the like. So so contrast of the button colour is too weak, only the text might be seen. So the text needs sufficient contrast in terms of 1.4.11 to the colour behind the button. – Andy Jan 17 '22 at 14:12

1 Answers1

0

Short answer, most likely you're ok.

Your interpretation is how I conduct my audits. If the button's background color does not have sufficient contrast compared to the page background color (or whatever color happens to be "adjacent" to the button background color) (1.4.11), then if the text within the button has sufficient contrast with the button background (1.4.3), then the user still has enough contrast to know where to "click". It's nice to know where the edge of the UI component is but it's not always necessary to know where it is in order to interact with the element.

The key is:

(1.4.11) Visual information required to identify user interface components

So if I can't tell where the edge of the button is, can I still "identify" where the button is? If there's sufficient text-to-background contrast (1.4.3), then "yes", so 1.4.11 doesn't fail.

Now, a lot of WCAG can be subjective and you might find an auditor that fails the button with 1.4.11 but just because one person says it fails (or another says it doesn't fail), doesn't mean that that person's interpretation matches with yours. You might disagree with the auditor and that's ok, as long as you can back up your interpretation.

Do you know sites that passed audits with such buttons, or with text-only buttons?

Yes, I pass sites all the time based on my interpretation of this success criterion but I often give a "best practice" that the button edge should be distinguishable but note that it doesn't technically fail.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Without sufficient contrast to see the shape of the button and without another signifier, there's nothing to signify the text is interactive. It just looks like text. Therefore, while users can still locate the text, they can't *identify* it as a button. The requirement of identification is not fulfilled by just being able to see the text. Users have to also be able to tell what it is. – Sean Jan 15 '22 at 22:50
  • That's a valid point. You could have a button with a terrible label so that you don't know it's actionable, but that would fall under WCAG 2.4.6 and I would fail it with that success criterion. – slugolicious Jan 16 '22 at 18:10
  • 1.4.11 would apply for something like a custom checkbox, where the color of the border around the box where you check has insuffucient contrast with adjacent colors. But if the checkbox label had contrast, it might be ok. If the checked status of the box has insuffucient contrast, it would fail. A button has more than the button border to identify it. – slugolicious Jan 16 '22 at 18:17
  • “if the text within the button has sufficient contrast with the button background (1.4.3)”. And the text would need 3:1 contrast to the button’s adjacent colour, as only the text might be perceived. Does it follow that if contrast within the button suffices, it suffices as well for the adjacent colour? – Andy Jan 17 '22 at 14:16
  • @Andy 1.4.11 adjacent color contrast would not come into play if the button text on the button background (1.4.3) was sufficient (and the button label is sufficient, as mentioned in my earlier comment about 2.4.6). The contrast would have to be 4.5:1 *unless* the text size is "large", defined as 14pt bold or 18pt normal (https://www.w3.org/TR/WCAG21/#dfn-large-scale), in which case the contrast can be 3:1. – slugolicious Jan 17 '22 at 19:44