Menu

Colour Selection

Colour selection is one of the three parts of interface design, alongside layout and font selection. It means deciding which colours appear on a screen and what job each one does.

Contrast between content and background

The content is the text, icons and images; the background is what sits behind them. There needs to be a strong difference in lightness between the two so that everything on top stands out clearly. Dark navy text on a pale grey panel is easy to read, while pale yellow text on a white panel is almost invisible.

Compare how light the two colours actually are, not their names. Two different colours can still be a poor pair if they are a similar brightness. Good contrast helps users with visual needs see text, icons and images clearly, and it helps everyone when a screen is being used in bright sunlight or on a small phone.

For example, a school lunch menu app might show each dish name in black on a white card. If a designer changed those names to light green on the white card, the contrast would drop and students would struggle to check what was being served that day.

A limited colour palette

A colour palette is the set of colours used across an interface. Keep it small — often one background colour, one colour for text and one accent colour for buttons. Using ten different colours makes a screen look busy, and users find it harder to tell what is clickable or important. A small palette also keeps things consistent, because the same colour then means the same thing on every page.

Colour is a design consideration in its own right, so swapping a colour is not a layout improvement.

Practise this