Often, when applying colours to our design elements, we want to ensure that there is sufficient contrast for text be legible, and for icons and logos to be clearly seen. This is specially important when targeting audiences with visual difficulties.

The contrast ratio between 2 colours is measured on a scale from 1 (no contrast at all) to 21 (maximum contrast such as between total white and total black). In order for large heading text to be legible, and large visual elements to be identifiable, there must be a contrast ratio of at least 4.5. For normal body text and smaller design elements, a contrast ratio of at least 7 is required. If the contrast ration between two colours is less than 4.5, then text and images will be indistinguishable from their background, or very difficult to see.

When you hover over the colour cards on this page, you will see a contrast ratio toggle appear on the top right corner of the card. Click on it to display the contrast ratios of the various colours displayed, against our black and white colours.