Using Contrast Law to Create Stunning Designs and User Experiences
Published: August 2, 2023
Contrast Law - The way our eyes work
This article will take a deep-dive into Contrast Law, and how we (un)conciously percieve colors, gradients, and different types of contrast. Contrast Law defines a set of relatively well-understood phenomenon regarding our eyes, brains, and how they collectively process information. While there are always outliers, this information is generally applicable to all human beings regardless of origin. Much of this research is derived from more advanced fields of study such as neuroscience, psychology, and electrochemistry - but nothing will stop us from applying that same knowledge to designing something far more trivial, lets say a webpage.
There is plenty of documentation elsewhere on the web about the different kinds of contrast, which I will not be explaining in much detail here. In this article we will explore practical and appropriate applications of contrast, as well as the contrary, while emphasizing understanding the core concepts behind the perceptual differences.
As an example, upon visiting this page (and once all the images have loaded!), the first place your eyes land upon would undoubtedly be the upper-right portion of the page, specifically at the colorwheel in the header image as it is the single most colorful thing on the page. Most people's eyes will, specifically, be inclined to look at the colorwheel from "right-to-left", that is, from red to blue, hot to cold.
There is plenty of documentation elsewhere on the web about the different kinds of contrast, which I will not be explaining in much detail here. In this article we will explore practical and appropriate applications of contrast, as well as the contrary, while emphasizing understanding the core concepts behind the perceptual differences.
As an example, upon visiting this page (and once all the images have loaded!), the first place your eyes land upon would undoubtedly be the upper-right portion of the page, specifically at the colorwheel in the header image as it is the single most colorful thing on the page. Most people's eyes will, specifically, be inclined to look at the colorwheel from "right-to-left", that is, from red to blue, hot to cold.
Shadows and Highlights - Never Use True White or Black
Only use true white or black (#FFFFFF or #000000) for text and box shadows! Using white or black as a background color will prevent you from using either shadows or highlights within that region. This is pretty much a no-brainer; if the area is black like in Figure 1, my text-shadow isn't going to show unless I make it lighter than the background color. This means I am stuck only using highlights here.
To leave myself the "contrast headspace" for shadows in this region, I can make sure the color of my region or element on the page is "squished" or normalized towards grey a bit. If I use a background color that is even slightly brighter than true-black, as shown in Figure 2, I now have the colorspace to be able to see the true-black shadow on my text. Figure 3 shows the final result, and while the difference is very slight, it adds noticable depth to the text. Figures 4 through 6 show the same problem and solution with true-white highlights.
To leave myself the "contrast headspace" for shadows in this region, I can make sure the color of my region or element on the page is "squished" or normalized towards grey a bit. If I use a background color that is even slightly brighter than true-black, as shown in Figure 2, I now have the colorspace to be able to see the true-black shadow on my text. Figure 3 shows the final result, and while the difference is very slight, it adds noticable depth to the text. Figures 4 through 6 show the same problem and solution with true-white highlights.
Figure 1
Hello World
Figure 2
Hello World
Figure 3
Hello World
Figure 4
Hello World
Figure 5
Hello World
Figure 6
Hello World
Figure 7
Hello World
Some extra detailsFigure 8
Hello World
Some extra detailsFigure 9
Hello World
Some extra detailsFigure 10
Hello World
Some extra detailsFigure 11
Hello World
Some extra details
Colors and Law of Attraction
Our brains tend to notice colors in a specific order. We visually gravitate towards colors which are hotter first, with colder colors being percieved later in the visual-order. Our best understanding of this comes from nature, where colder colors are more common, and hot colors typically signal danger or importance from a biological perspective. The closer a color is to Red (#FF0000), the more immediately and readily the eyes and brain will process the image. White is "hotter" than cold colors, but generally "colder" than hot colors, and the inverse is true for black.
Figure 7 shows an example of an inappropriate way to use color to attract the eyes to a header. The header text being red is very distracting, and the horizontal rule and text beneath is barely noticed as a consequence. The red text while legible, doesn't make for too pleasant of a reading experience. A better way to draw the eye to the general area, while still being legible is shown in Figure 8, where the colors have simply been swapped.
However if blue was our accent color, we might encounter a different set of problems. We still need to make the same correction as before, as shown in Figures 9 and 10, though for the opposite reason - this time it's because the blue is too "dark" to be easily legible on our background color. But now our horizontal rule doesn't really grab the eye like we want it to, because the color still doesnt interact well with the background. Figure 11 demonstrates how the colors could be inverted to properly work with blue and white.
Figure 7 shows an example of an inappropriate way to use color to attract the eyes to a header. The header text being red is very distracting, and the horizontal rule and text beneath is barely noticed as a consequence. The red text while legible, doesn't make for too pleasant of a reading experience. A better way to draw the eye to the general area, while still being legible is shown in Figure 8, where the colors have simply been swapped.
However if blue was our accent color, we might encounter a different set of problems. We still need to make the same correction as before, as shown in Figures 9 and 10, though for the opposite reason - this time it's because the blue is too "dark" to be easily legible on our background color. But now our horizontal rule doesn't really grab the eye like we want it to, because the color still doesnt interact well with the background. Figure 11 demonstrates how the colors could be inverted to properly work with blue and white.
Accessibility Considerations and Inverse Colors
Inverse Colors, are any two colors which land on exact opposite sides of the colorwheel. You can go back and reference the header image at the top of this page, if you need to see the colorwheel itself.
Red and Cyan, Indigo and Yellow, Green and Purple, these are all Inverse Color combinations. Inverse Colors have high-contrast with each other, and while they usually don't look good together, they can be used effectively as opposing accent colors. Doing so, however, creates a new problem - The astute reader may realize that these color combinations are also the same combinations which Colorblind individuals cannot differentiate. There are several types of color blindness, which affect the perception of different combinations of colors. Figure 12 demonstrates a few types of coloblindness, and the color combinations which they cannot see.
The easiest eay to design around this, if you can't change your color palette, is to change the Luminosity or brightness of the Inverse Colors so they can be more readily differentiated by colorblind users. Figure 13 shows a more colorblind-accessible rendition of the same color palette from Figure 12. We retain the "intent" of each color by making cold colors darker, and hot colors brighter. Increasing the local contrast between the two colors allows colorblind users to more easily differentiate between them.
Red and Cyan, Indigo and Yellow, Green and Purple, these are all Inverse Color combinations. Inverse Colors have high-contrast with each other, and while they usually don't look good together, they can be used effectively as opposing accent colors. Doing so, however, creates a new problem - The astute reader may realize that these color combinations are also the same combinations which Colorblind individuals cannot differentiate. There are several types of color blindness, which affect the perception of different combinations of colors. Figure 12 demonstrates a few types of coloblindness, and the color combinations which they cannot see.
The easiest eay to design around this, if you can't change your color palette, is to change the Luminosity or brightness of the Inverse Colors so they can be more readily differentiated by colorblind users. Figure 13 shows a more colorblind-accessible rendition of the same color palette from Figure 12. We retain the "intent" of each color by making cold colors darker, and hot colors brighter. Increasing the local contrast between the two colors allows colorblind users to more easily differentiate between them.
Figure 12
Deuteranomaly
Hello World
Hello World
Tritanomaly
Hello World
Hello World
Hello World
Hello World
Tritanopia
Hello World
Hello World
Figure 13
Deuteranomaly
Hello World
Hello World
Tritanomaly
Hello World
Hello World
Hello World
Hello World
Tritanopia
Hello World
Hello World
Maintaining a Visual Heiarchy of Importance
As we have established, the human-eye is more immediately attracted to "hot" colors. Once again referencing our colorwheel, our eyes naturally want to process the image from right to left - Or in a clockwise circle - always starting at Red. Therefore, if we have a design that uses mostly cold colors, placing anything red on the screen will ensure it is almost always the first thing seen, noticed, and percieved by the user.
Using this knowledge, we can craft an entire experience from the ground up, where we as the designer can direct the eyes of the user using contrast in a predictable and fluid manner.
Using this knowledge, we can craft an entire experience from the ground up, where we as the designer can direct the eyes of the user using contrast in a predictable and fluid manner.