Colour combinations that will kill your design

Some colours reconcile themselves to one another, others just clash.

— Edvard Munch
Used brushes on an artist's palette of colorful oil paint

Remember, when you’re building a website, the whole point is to convey information to your clients or customers. So, with that in mind, you want the information on your site to be easily consumed by as many people as possible.

If the text on your site doesn’t have enough contrast from the background, many people won’t be able to read it. Visitors will leave if they can’t access the information. There are a few text : background combinations that are popular but also problematic.

In order to pass an accessibility audit (WCAG AA):

  • Large text (above 18pt or 24px) must have a contrast ratio of at least 3 : 1
  • Regular-sized text must have a contrast ratio of at least 4.5 : 1

Pure black on pure white has a contrast ratio of 21 : 1, so there is lots of room for fantastic contrast levels.

(This post physically hurt me to create).

Red & Green

Red and green are opposite colours, so it’s possible that they can have enough contrast for many people. But keep in mind that red-green colour blindness is the most common type. For colour blind people red text on green, or green text on red looks like gray text on gray. So if your red is very dark and your green is very light, it might work. But you might be better off avoiding that combination all together.

The particular combination shown below has a contrast ratio of only 1.72 and will fail an accessibility audit.

Red text on a green background
Green text on a red background

Yellow & White

Yellow is an interesting colour because the most appealing versions of yellow are on the lighter end. The best dark yellows lean toward orange or brown. If you start with a bright, sunny lemon yellow and lower the lightness, it will become more of an olive green. So in most cases, any combination of yellow text on a white background or white text on a yellow background will never have enough contrast to be legible. The darkest colour I could find, that still looked reasonably yellowish, only had a contrast of 3.1. That would only just barely pass WCAG AA for large text.

The particular combination shown below has a contrast ratio of only 1.22 and will fail an accessibility audit.

Yellow text on a white background
White text on a yellow background

Blue & red

Blue and red look lovely next to each other but never, ever work as text on background. They clash in that context and become blinding. This should never exist. If your brand colours are red and blue, use white or black as a mediator.

The particular combination shown below has a contrast ratio of only 1.75 and will fail an accessibility audit.

Blue text on a red background
Red text on a blue background

Gray & gray

It should be pretty obvious that if you use a colour for the background and then the same general colour for the text, it’ll be really difficult to get enough contrast. Even still, gray text on a gray background is a very popular colour combination on the web. The closer the shades come to mid-tones the worse they are to read. Also font weights can play a big role in how legible gray-on-gray text can be.

The particular combination shown below has a contrast ratio of only 1.82 and will fail an accessibility audit.

Light gray text on a dark gray background
Dark gray text on a light gray background

What do you think?

Are there any text : background colour combinations that you love or hate? Post on Twitter and tag me: @treadlightly