Please Note: Some of these color combinations will not account for conditions such as red-green color blindness. Depending on your desired level of accessibility you may want to check for such problems with your design.

Perception of Contrast

One thing to always keep in mind during the design process is that the idea of "contrast" does not necessarily have to be limited to the difference between light and dark as it is traditionally defined.

In the squares below we're going to select a background color as a reference (labeled above the square) and then change the color of the text that is inside of each box. The text will contain the values of the text color itself, not as RGB channels, but as Hue, Saturation, and Brightness values.

Hue: 0, Sat. 0%, Bri. 0%

Hue: 0, Sat. 0%, Bri. 25%

Hue: 0, Sat. 0%, Bri. 50%

Hue: 0, Sat. 0%, Bri. 75%

Hue: 0, Sat. 0%, Bri. 100%

Hue: 0, Sat. 0%, Bri. 50%

Hue: 0, Sat. 0%, Bri. 0%

Hue: 0, Sat. 0%, Bri. 40%

Hue: 0, Sat. 0%, Bri. 60%

Hue: 0, Sat. 0%, Bri. 100%

The first two boxes show what many people think of as a change in contrast where the brightness property is what dictates the changes from low contrast to high contrast.

Hue: 0, Sat. 0%, Bri. 100%

Hue: 270, Sat. 40%, Bri. 100%

Hue: 270, Sat. 50%, Bri. 100%

Hue: 270, Sat. 75%, Bri. 100%

Hue: 270, Sat. 100%, Bri. 100%

Hue: 270, Sat. 50%, Bri. 100%

Hue: 270, Sat. 0%, Bri. 100%

Hue: 270, Sat. 40%, Bri. 100%

Hue: 270, Sat. 60%, Bri. 100%

Hue: 270, Sat. 100%, Bri. 100%

Now here we see a similar progression but now it is the saturation which is changing. Note how both the hue and the brightness value remain unchanged across each step. This shows that contrast can be achieved through changing saturation as well as brightness.

Hue: 0, Sat. 100%, Bri. 100%

Hue: 90, Sat. 100%, Bri. 100%

Hue: 180, Sat. 100%, Bri. 100%

Hue: 270, Sat. 100%, Bri. 100%

Hue: 360, Sat. 100%, Bri. 100%

Hue: 180, Sat. 100%, Bri. 100%

Hue: 0, Sat. 100%, Bri. 100%

Hue: 90, Sat. 100%, Bri. 100%

Hue: 270, Sat. 100%, Bri. 100%

Hue: 360, Sat. 100%, Bri. 100%

Finally we have text where oly the hue value changes. Since hue is measured in degrees it circles back on itself, meaning the halfway point 180 degrees from the beginning will have the highest contrast, and a change of a full 360 degrees will simply produce the same color.

What these measurements show is that, again, the idea of "contrast" should not be limited to just adjusting the brightness level of a color pair.

But still, how often will you have the option of such extreme differences? How often will you have a background that is solid red or a fully saturated blue-green? Such colors in large amounts are often hard on the eyes. Let's look at one more version with more muted colors.

Hue: 180, Sat. 100%, Bri. 50%

Hue: 180, Sat. 50%, Bri. 100%

Hue: 90, Sat. 50%, Bri. 100%

Hue: 90, Sat. 100%, Bri. 100%

Hue: 270, Sat. 50%, Bri. 100%

Hue: 270, Sat. 100%, Bri. 100%

In the box above you can see that we can still offer a decent amount of contrast while not straying too far from the overall color scheme. This is done by keeping the hue within 90 degrees of the environment color (the background) and the saturation / brightness values within 50% of each other.
We'll discuss this approach more in the section below.

There are thus a few general observations that can be made about then.

  • Changes in brightness will have the most contrast.
  • Changes in Hue will have the 2nd most contrast.
  • Changes in saturation will have the least contrast.

Just remember! Having the "least" contrast is not the same as having none. ALL of these measurements will allow you to change percieved contrast in one way or another. This is important to remember since the concept of color coordination often involves constraining yourself to numerical values which are not simply tonal opposites.

None the less, always strive to go with what looks best to your designer eyes, not just the numbers we've seen here.

Color Coordination

Of all the facets of Graphic Design the principles of "color coordination" are probably some of the more subjective because without citing academic psychological studies it often boils down to "I think these colors match".

As a general rule I think most color coordination can be divided into two camps.

  • Hue schemes.
  • Complimentary schemes.

Let's examine each one at a time.

Hue schemes

Other possibilities involve choosing one particular color and then matching it with colors that push the contrast as much as possible without leaving a comfortable "zone". This zone can be defined by limitations of hue, saturation, contrast, or a combination of the three.

Complimentary schemes

As you've read "complimentary" colors are colors whose hue is opposite one another on a color wheel. They are said to "compliment" each other since such colors have traditionally, throughout history, appeared as appealing matches to one another.

So in this case designing a scheme around complimentary colors should be as simple as selecting two opposing colors and constricting further color choices to similar shades. It's basically the same as a hue scheme but with two starting points.

Gradients

"Gradient" describes any transition of a property between two positions. For instance a black fading into white from the top to the bottom of a design background.

Gradients are something that will be applicable to many facets of graphic design. They can be used within individual elements like logos and text, or they can be used in the background fill of a larger element, or they can be actually made up of individual elements within the scene.