Color contrast

What is color contrast ?

Color contrast is the ability of two things to stand out from each other. In a digital interface this contrast mainly concerns the legibility of text and icons in relation to the background.

Why is it important ?

Color contrast is one of the first elements that make a page readable to users. A low contrast between the text and the background can make it difficult for users to read, especially for those with vision impairments. 

How can I adjust the color contrast ?

The analysis follows the WCAG 2.1 recommendations whose accessibility standards are as follows :

The visual presentation of text and images must have a contrast ratio of at least 4.5:1, except in the following cases :

• Large-scale text and images of large-scale text must have a contrast ratio of at least 3:1 ;
• Text or text images that are part of an inactive user interface element, are purely decorative, are not visible to anyone, or are part of an image that contains other significant visual content, do not have a contrast requirement ; 
• Text that is part of a logo or brand does not need contrast

The contrast ratio is a measuring of the difference in "brightness" or perceived brightness between two colors. This difference in brightness is expressed as a ratio ranging from 1:1 white text on white background to 21:1 black text on white background.

• Red (#FF0000) has a ratio of 4:1
• Green (#00FF00) has a low ratio of 1.4:1
• Blue (#000FF) has a contrast of 8.6:1