Using colour in a design

About 8 percent of men have red-green colour vision deficiency, so a form that marks errors only in red leaves many of them guessing.

Never let colour carry the message alone

WCAG 2.2 success criterion 1.4.1, Use of Color, sits at level A, the most basic level. It says colour must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. A red border on a form field that has an error is fine, as long as there is also an icon or a line of text saying what is wrong. A line chart with five coloured lines also needs labels, different line styles or markers. Links inside a paragraph need an underline or another cue besides colour.

The reason is partly colour vision. The OpenStax neuroscience text explains that some people carry a genetic variation that gives them two cone types instead of three, or one cone pigment that works differently. They are not blind to a colour, but some colours that most people tell apart look the same to them. The red-green forms are the most common and affect about 8% of males. Other reasons matter too: a phone in bright sunlight, a cheap projector, a printout in black and white. A design that still works in greyscale works in all of these.

Lightness does the heavy lifting

Because of this, experienced designers plan a palette in two passes. First they decide the lightness steps: a very light background, a mid-tone for borders, a dark tone for text. Then they choose hues. Checking each text and background pair with the contrast ratio from unit 6 is the quickest way to know the steps are far enough apart. Complementary hues do not guarantee contrast. In the model, the brand orange and its blue complement have the same HSL saturation and lightness, and the ratio between them is only 1.06:1. Two colours can be as far apart as possible in hue and still be hard to read on each other.

A simple working method puts the units of this course together. Start with one hue that fits the subject. Use a harmony from unit 4 to pick one or two supporting hues. Give the dominant colour most of the area, roughly 60%, a secondary colour 30%, and an accent 10%, the rule of thumb from the University of Delaware guide. Pick lightness for every text pair until each one reaches at least 4.5:1, or 3:1 for large headings and icons. Finally, check that nothing depends on colour alone: errors have words, links have underlines, charts have labels.

Charts deserve their own care, because they often need many colours at once. The University of Delaware guide points to ColorBrewer, a tool built for map and chart palettes. For values that run from low to high, a sequential palette of one hue that steps from light to dark keeps working in greyscale. For categories, use as few colours as you can, give each a label next to the line or bar rather than only in a legend, and keep the steps in lightness different enough that two neighbours never look alike.