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?