Contrast

Without proper contrast, your UI can be almost impossible to use


What is contrast? Why does it matter?

Contrast is the visual difference between two things in your user interface. There are a two reasons contrast is important, the first is that having good contrast creates a visually pleasing interface. When it is easy to distinquish the different elements of your UI it is much nicer to use. The other reason why good contrast is important is for accessibility. Some people who use your UI may have a hard time distinquishing different elements if their contrast is too low. Take a look at some examples of good and bad contrast below.

This is terrible contrast! Barf!

This is much better.

Contrast ratios

To ensure that your user interface had the proper amount of contrast, you can use something called a contrast ratio. This ratio makes it easy to pick a color that everyone can easily distinquish. The recommened contrast ratio is 7:1, this ratio makes your user interface accessible to those with vision loss. There are even helpful tools out there to check contrast ratios.

A photo of a contrast chart showing text on backgrounds with contrast ratios from 1:1 to 21:1