Colour contrast ratios

Designers need to make sure there is a proper amount of colour contrast between the page background and text and with user interface elements like links, buttons, and headers.


Proper contrast

Proper contrast

Communicating through colour alone can make it difficult for some page visitors to use an application. Colour cues should always be accompanied by text or a symbol that indicates the function of the user interface element. For example use a chevron (>) to indicate a link. 

Proper contrast also benefits page visitors with visual disabilities and also helps when there is screen glare from windows.

The minimum contrast ratio is 4.5:1 for smaller text and 3:1 for larger text (14pt bold/18pt) and meets WCAG 2.0 level AA. TELUS Brand Standard best practices aim for 7:1 for mobile responsive websites. Text that is part of a logo or brand name does need to meet contrast requirements.

Learn how colour contrast can help you make Distinct elements.

Learn about how Colour blindness and colour contrast relate

Communicating through colour alone can make it difficult for some page visitors to use an application. Colour cues should always be accompanied by text or a symbol that indicates the function of the user interface element. For example use a chevron (>) to indicate a link. 

Proper contrast also benefits page visitors with visual disabilities and also helps when there is screen glare from windows.

The minimum contrast ratio is 4.5:1 for smaller text and 3:1 for larger text (14pt bold/18pt) and meets WCAG 2.0 level AA. TELUS Brand Standard best practices aim for 7:1 for mobile responsive websites. Text that is part of a logo or brand name does need to meet contrast requirements.

Learn how colour contrast can help you make Distinct elements.

Learn about how Colour blindness and colour contrast relate


Tips

Tips

  • Use your design application to convert designs to grayscale to check if colours are still distinguishable 
  • Run automated tests on screenshots of your website to flag potential contrast issues. 
  • Validate the test results with other automated tools in staging
  • Use your design application to convert designs to grayscale to check if colours are still distinguishable 
  • Run automated tests on screenshots of your website to flag potential contrast issues. 
  • Validate the test results with other automated tools in staging

Explore more

Explore more