Have you heard the claim that black and yellow offer the maximum contrast and should be used to ensure important text is most easily read?
It’s almost kind of true, but depends on the circumstances.
This isn’t the most common design myth I’ve come across, but I’ve seen the idea put forward a few times over the years and seen at least one omnishambles of a sales page that based its entire design on this premise.
That was a very clear demonstration of what can happen if a designer doesn’t understand this principle.
The first point to make is that it should be obvious that the maximum possible contrast is between white and black. We can’t get brighter than white or darker than black, so that’s the combination that offers the maximum contrast.
Yellow isn’t as bright as white and so it doesn’t offer the maximum contrast, but in some circumstances, it may offer the best contrast.
In the olden days we used paper
From 1988 to 1990 I studied graphic design. I recall one of the things we were taught early on is that black and yellow offer the best contrast.
That’s why we commonly see it used on warning signs all over the place.
Pop into a fast food restaurant and if the floor has been mopped, the plastic warning sign will probably be black on yellow.
If something poses the risk of electrocution, chances are it’ll have a black and yellow sing on it. It’ll be the same if it poses a radiation risk or some other toxic hazard.
So far, so good, the evidence supports the claim that black and yellow offer the best contrast. There’s a reason for this though and that affects the circumstances of it use.
Back when I was studying graphic design, we designed on paper for output on paper. Nowadays designers will do most of their design on screen with the majority of the output for screen too.
Paper and digital displays are very different.
Aaarggghhhh my eyes!
Imagine you have some text printed in a rich black on a pure white piece of paper. Now imagine you’ve stepped outside at midday on a bright summer’s day with that piece of paper with no shade around you.
If you try and read it you’ll find it uncomfortable because of the glare caused by sunlight reflecting off the white paper. That’s one of the reasons why the trash novel you pick up at the airport when going on holiday is printed on off-white paper. It’s cheaper, but it also offers a better reading experience because it doesn’t suffer the same glare problem as white paper.
Adding a yellow background to black text and images has the same effect, maintaining a strong level of contrast while reducing the issue of glare.
However, this only applies to printed items. Try to read an electronic device outside in bright sunlight and you won’t have to worry about glare. Reflections off the screen will more likely make it impossible for you to read anything on the screen. Good luck working out the color of the text and background.
If you’re designing for screen output, you’re really not going to get any benefit from combining black and yellow.
If you have to, be subtle
While you won’t benefit from the contrast advantages of yellow and black on screen, there are other reasons for using the combination.
As mentioned, it is commonly understood as indicating a notice that viewers should pay attention too. So it may be useful for making important information stand out or too highlight something you want everyone to see.
In these circumstances, there are a few tips keep in mind.
Firstly don’t use too bright a yellow. If you use a particularly bright yellow, you run the risk of replicating the sensation of glare resulting from bright light on white paper.
If you’re using yellow for a background for anything more than a short heading, aim for a paler yellow. This becomes all the more important for longer bodies of text, as a paler yellow combined with black will make for an easier reading experience than a bright yellow.
In a similar vein, only ever reverse yellow text out of a black background for short headings. Yellow text on black will make for less comfortable reading with longer pieces of text.
While this isn’t one of the more common design myths, you may encounter it and you will now understand how to make use of the principle.