Why debate non-text contrast of UI elements?

What is 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

The exceptions in the guidance

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?

A design system problem

My challenge to you

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

Facebook

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

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.

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Chatbot: Helping someone through relationship problems

Holders get access to Thexii Archives, Merchandise, designer Toys, Airdrops and Giveaways —…

Product Spotlight: Cincinnati Bengals Ring of Honor Ballot

Bengals Ring of Honor mobile ballot for season-ticket members, developed by YinzCam.

Customised Joshi’s Metal Nameplate

Customised Joshi's Metal Nameplate

Exercise 3: Design in Daily Life

Thinking About Design Thinking Ep.01

I’m That One Angry User Writing Blog Post at 3AM — Get To Know Your Product Audience!

Wireframing the app Headspace

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

More from Medium

Remaking color for Indeed’s design system

Two Figma plugins that helped us establish value in a day

Design systems are for the people, by the people.

Illustrating the Merger of Six Companies