htmluser-interfaceaccessibilitywcagcontrast

How do WCAG 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast relate to text in UI components?


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?


Solution

  • 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.