Why debate non-text contrast of UI elements?

What is non-text contrast?

The spec says:

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

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

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 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)

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.

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.

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.

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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dave House

Dave House

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