Why debate non-text contrast of UI elements?

TLDR; Stop debating if any particular UI element “needs to comply” with WGAG 2.1- Non-text contrast and just do it.

It’s been a few years since WCAG 2.1 was published and one point that causes more discussion than any other in my circles has been Non-Text contrast.

What is non-text contrast?

The spec says:

(I’m only focussing on UI components in this blog but there are additional considerations for “Graphical objects”, for example charts or diagrams.)

An over simplification might be to say, if you design a button, the label on the button should meet a minimum of 4.5:1 (Text contrast) against the button background and the button background colour (or border etc) should meet a minimum of 3:1 (Non-text contrast) with any surface it’s placed on.

A simple example of a button showing the concerns of Text and Non-text contrast
A simple example of a button showing the concerns of Text and Non-text contrast
A simple example of a button showing the concerns of Text and Non-text contrast

I wrote a simplified version of the spec for myself and the team I work in:

This forced me to consider what makes an element recognisable or understandable. This is of course open to interpretation and the context in which an element is presented.

The exceptions in the guidance

Every time I see someone rightfully point out that perhaps a very light grey outline for text inputs on a white background may indeed not be accessible they often get a response like — “UI elements don’t need to meet this requirement”.

Ignoring the fact that meeting or not meeting WCAG 2.1 should not really be the consideration here, strictly speaking this can be both correct and incorrect based on context — whether that be content, proximity or something else.

The WCAG 2.1 guidance gives some examples where the contrast ratio of 3:1 does not need to be met to pass this criterion.

I personally take “if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast” to mean that an element needs to be recognisable as that element.

Well this for me is the grey area…context.

Following this to the letter, text at the end of a form that says “Submit” by this standard gives users enough context that this interaction will result in their form being submitted. Therefore it does not technically need to meet 3:1 contrast for background colour, border or any other visual indicator.

An example of a button that does not meet 3:1 contrast ratio — left (as designed) right (with the parts of the design that do not meet 3:1 removed)
An example of a button that does not meet 3:1 contrast ratio — left (as designed) right (with the parts of the design that do not meet 3:1 removed)
An example of a button that does not meet 3:1 contrast ratio — left (as designed) right (with the parts of the design that do not meet 3:1 removed)

Likewise, despite the fact using placeholder text for form inputs is not considered good practice, this is also suggested as enough context for form inputs to not need to meet 3:1 contrast ratio (providing the placeholders meet 4.5:1).

So let’s just say we design a small form that intentionally has bad contrast on the borders of the text inputs and the background of the button:

An example of a from where the inputs and buttons do not meet 3:1 contrast ratio — left (as designed) right (with the parts of the design that do not meet 3:1 removed)

For a user that could only see the design on the right hand side of this screenshot I would not personally consider these elements as “identifiable”. This is because they are not identifiable as the UI elements they are, certainly not without any doubt.

What makes something identifiable?

I’ve gone back to the line “if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast” and debate its meaning back and forth a number of times.

What makes a button identifiable? What makes an input identifiable?

Having an element that can be simply identified is not enough. It should be identifiable to the point that the user knows how and where to interact with it and ideally what’s going to happen when they do.

A design system problem

Some of these fundamental UI elements are now likely to be the responsibility of a design system team. One thing that a design system team does not have is the foresight of every possible context in which it’s going to be used.

For example, the “invisible” button design from earlier in this blog might not actually cause any barriers in the context of that form, but what if a designer uses this button in a position that is less logical to a user? Could a user just think it’s a heading or some random text?

This is why I treat non-text contrast as a hard rule to follow, context or not. All interactive UI elements should meet 3:1 in the parts of the design that make them understandable, not just recognisable.

This doesn’t mean every single element of the design needs to meet 3:1 contrast. What’s important is that the elements of the design make it understandable do and this will be different for every element you design.

My challenge to you

Every time you design or build something, take 10 minutes to review it with all the parts of the interactive UI elements that do not meet 3:1 contrast ratio removed.

So if your button background does not meet 3:1 remove it, if your interactive card borders do not meet 3:1 remove them…

Then ask yourself:

  • Is the interface still understandable?
  • Is the interface still as usable?
  • Could I do more?

If you find you could be doing better, that’s a good thing. You can do something about it.

I followed this process for 5 minutes with the landing page of the two biggest websites in the world. Here are the before and after screenshots:

Facebook

Here’s the home page of Facebook. The primary action would be to log in or create an account.

A screenshot of Facebook’s log in page
A screenshot of Facebook’s log in page

And here’s the same page with the interactive UI elements that do not meet 3:1 contrast removed. There are no visible form inputs to enter your username and password. The “create new account” button label did not meet text contrast requirements so that was also removed.

A screenshot of Facebook’s log in page with all UI elements below 3:1 and all text elements below 4.5:1 removed.
A screenshot of Facebook’s log in page with all UI elements below 3:1 contrast and all text elements below 4.5:1 contrast removed.

Google

Here’s Googles landing page. The primary action is to use the search bar and conduct a search.

A screenshot of Google’s home page
A screenshot of Google’s home page

And here’s the same page with the with the interactive UI elements that do not meet 3:1 contrast removed. That’s right, it’s a similar story. The search bar and search icon has vanished and the buttons underneath no longer have a background colour.

A screenshot of Google’s home page with all interactive and graphical UI elements below 3:1 removed.
A screenshot of Google’s home page with all interactive and graphical UI elements below 3:1 contrast removed.

While removing these elements entirely is debatably more dramatic than the true to life experience someone with low vision might experience, it brings home the importance of having contrast requirements on UI elements.

I don’t use examples like this to name and shame but purely to show how common an issue this is all the way from the biggest businesses right down to startups.

Follow the sentiment behind Non-text contrast and just make things that a user needs to interact with recognisable to all. They are often the most important things on the screen.

User Centred Design, Design Systems and aircooled VWs www.twitter.com/iknowdavehouse