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:
- the RGB colour model, where each colour is expressed as a triplet of numbers representing the different levels of red, green and blue light
- the HSL colour model, where each colour is identified by its particular combination of 3 characteristics: hue, saturation and lightness
- the RGBA and HSLA colour models (the 'A' stands for 'alpha'), which are the RGB and HSL colour models with an additional channel for setting the opacity (or transparency) of 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:
- Colour and contrast, what does it mean? — Erik Kroes
- Color Formats in CSS — Josh W Comeau
- A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH — Smashing Magazine.
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.
- 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:
- Colour and contrast, what does it mean? — Erik Kroes
- Color Theory and Contrast Ratios — 24 Accessibility
- Color Theory For Designers, Part 2: Understanding Concepts And Color Terminology — Smashing Magazine.
For more technical details on the basics of colour, light, contrast, and how humans perceive them, see: