What are colour and contrast?

Understand how colours are defined for web content and how contrast between 2 colours is measured.

Colour

There are different models or systems that can be used to express or identify colours.

In web design, commonly used colour models include:

Example of the different ways to identify a colour

The colour red can be represented:

  • as an RGB triplet: rgb(255,0,0)
  • in hexadecimal format (another way to express an RGB triplet): #ff0000
  • as an HSL triplet: hsl(0, 100%, 50%)
  • with 30% opacity (70% transparent) in RGBA: rgba(255,0,0,0.3).

To learn more about colour models, see:

Contrast

Contrast is a measure of the difference in the lightness or relative luminance between 2 colours — for example, between the foreground and background colours of an element on a web page. This is sometimes referred to as colour contrast, but is actually luminance contrast.

The luminance contrast between 2 colours is typically expressed as a contrast ratio.

Ensuring a sufficient contrast ratio is about choosing a colour combination where there’s enough contrast between the 2 colours to make them easily distinguishable.

Examples of contrast ratios between different colours
  • Pure black text on a white background has a contrast ratio of 21:1 (21 to 1).
  • Pure red text on a white background has a contrast ratio of 4:1 (4 to 1).

More information on colour and contrast

For an introduction to colour and colour theory, see:

For more technical details on the basics of colour, light, contrast, and how humans perceive them, see: