Part of this post is based on the book by Frasie, Radu (2017-07-17). Graphic Design Handbook Kindle Edition. First, we need to cover some color definitions. Colors can be described by their hue, intensity, and value.

• Hue – the hue of a color is its name – red, green, yellow, blue and so on.
• Intensity – (aka saturation) the intensity is how bright or dull a color is
• Value – (brightness) how light or dark it is

A hue is similar to a color, such as red, orange, yellow, green, turquoise, blue, purple, and pink. However, hue differs slightly from “color” because a color can have saturation or brightness as well as a hue. The saturation is the intensity or the purity of a color. When a color is fully saturated it has the highest degree of purity and it is more vivid. As the saturation decreases, the colors appear to be more washed-out or pale or grey. When a color is fully desaturated it becomes gray.

Brightness is the relative lightness or darkness of a particular color, from black (no brightness) to full, pure color. The lightness of a color measures the amount of white of that color (not of light like the brightness). If we diminish the lightness of a color it becomes black (or darker) and if we increase the lightness of a color at its highest level it becomes white. A shade is a hue mixed with black color. The easiest way to obtain a shade from any color is to decrease the brightness (or lightness) of that color. A shade is less colorful and darker than the original hue. A tint is a hue mixed with white color. The easiest way to obtain a tint from any color is to increase the lightness of that color. Tints are more desaturated and softer than the original colors and they are sometimes called pastel colors. A tone is a hue mixed with gray color. The easiest way to obtain a tone from any color is to decrease the saturation of that color. Also, the tone can be described as a combination of tint and shade where a hue is mixed with white and black colors. Tones are lighter or darker than the original hue and less intense.

The RGB color model is also known as the “additive color model”. “RGB” stands for red, green, blue. On computer screens, we work with the RGB model, which is red green blue. When we talk about hue, we are talking about one or two colors from red, green, or blue, but never a combination of all three. Because computers are binary machines and because we use 8 bits in 1 byte, we have the hue blue represented as 0, 0, 255 using the RGB model. The third number ranges from 0 to 255, but 0, 0, 0 in RGB is black.

The web page Color Management Tutorial, Color Models says this about the CMYK color model: “The CMYK color model is based on ink on paper. These inks absorb and reflect different wavelengths of light. Cyan absorbs all red light, magenta absorbs all green light and yellow absorbs all blue light. If these three inks absorb all red, green, and blue light then, in theory, the combination of all three on paper should produce black, in reality, however, there are no completely pure inks, and as such not all of the red, green, and blue light will be absorbed. The printing industry compensates for this problem by adding a fourth ink, black to the process. The addition of black allows us to produce good blacks on printing presses and other output devices like inkjet printers. The CMYK color model is called the subtractive color model because as additional inks are added color is subtracted, opposite of the RGB additive color model. Please note that RGB and CMY colors are opposite or complementary colors”.

Web Accessibility Guidelines

Which colors should we be using to ensure that those who cannot see the full color spectrum? Here is an article called Web Accessibility Guidelines v1.0. A contrast ratio of 4.5:1 is important for people who cannot see the full color spectrum.

What is the contrast ratio between two colors. You can go here to contrast-ratio.com to check your colors. Suppose you have a white background. You might want to pick a color, green for example, and decide on the shade of green that provides at least a 4.5 to 1 contrast ratio. At that site, click the small square just below and to the right of the text “Text colour” to pick a color for your text. You can change the background color as well with the square to the left.