Colour contrast

What we mean when we talk about colour contrast, is the difference between two colours, also referred to as contrast ratio. It is the measurement of a background and foreground colour. There are standards for web accessibility when it comes to colour contrast, which are written in the Web Content Accessibility Guidelines (WCAG) 2.1. These guidelines define certain contrast ratios for accessibility based on different compliances. For example, you can be AA compliant or AAA compliant, they both follow a different set of rules for contrast ratios. In this example we follow the WCAG 2.1 AA guidelines, which are also the guidelines we commit to with The A11Y Collective courses. Important for colour contrast is that it applies for the parts of your design that have meaning and communicate something to your visitor. For instance, the text on your website, but also graphic objects and user interface components, like icons. Parts of the website that are visual enrichments (and therefore have no communicative meaning) can be excluded from the colour contrast standards. They do not have to commit to these rules because they are pure ornamental.

To decide which colour ratios to apply it is important to also know how large the area of background and foreground colour is. For instance, there are different rules to apply to smaller text than larger text, because the surface colour of smaller text is less and therefore may be harder to see. In the guidelines we define the following:

This is text smaller than 14 point (typically 18.66px). To be compliant with WCAG 2.1 AA it is important that normal text has a minimum contrast ratio of 4.5:1 with the background colour.

Large text is defined as text larger than 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. Large text can have a minimum contrast ratio of 3:1 with the background colour.

With this we mean all elements that aren’t text, but are used to communicate meaning, like navigation. For instance, when the design makes use of a navigational arrow icon. But also, the borders of text input fields need to have a minimum contrast ratio for the visitor to interact with these parts. Graphic objects and user interface components must have a minimum contrast ratio of 3:1 with the background colour.