# Colour, with a purpose

## Begin with a role

Choose a background, a text colour and one action colour. Name them by their job, not their appearance. A token called action is easier to maintain than orange-500.

## Check the pair

Contrast belongs to a pair of colours. Test text against its actual background, including hover and disabled states. Chroma checks opaque solid sRGB pairs; it does not audit an entire interface.

## Keep the meaning

Do not communicate a state through colour alone. Add a word, icon or pattern. Test your choices with the people who will use them.