All Collections
Getting Started
Set-up
Colour contrast ratios explained
Colour contrast ratios explained

This article will explain colour contrast ratios on the customer portal

Irina Anichshuk avatar
Written by Irina Anichshuk
Updated over a week ago

The colour contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility.

When assigning colours to elements of a webpage, the WCAG guidelines recommend the following contrast ratios:

The minimum ratio (AA rating): 4.5 : 1

The ideal ratio (AAA rating): 7 : 1

Having good colour contrast on your page benefits all your users, but it is particularly beneficial to users with certain types of colour blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colours. This is because they don't see bright and dark areas as readily as those without such conditions, and therefore have trouble seeing edges, borders, and other details.

Did this answer your question?