This week, Support Lead, Helen Grimbly discusses how colour contrast affects website accessibility.

If the text on a website is too similar to the background colour, it can be difficult for many users to read the text. For example dark grey text on a black background, or pale yellow text on a white background, can be difficult to read.

It is a requirement of WCAG (Web Content Accessibility Guidelines), Success Criterion 1.4.3 that the colour contrast of webpage content is managed regarding text and images of text.

Adam Turner from Sitemorse explains in the following article, why colour contrast is an issue, how it is difficult to manage, and how the Sitemorse SMARTVIEW tool can be used to highlight any potential colour contrast issues: 
https://sitemorse.com/blog-article/9897/Managing_colour_contrast_issues_on_your_website/

For further information on how to run a SMARTVIEW of a webpage, please see the following article: 
https://sitemorse.com/blog-article/9505/run-one-page-assessment-using-smartview/

When a SMARTVIEW of a webpage has been run, if there are any colour contrast issues, the 'Colour contrast' button will have a cross next to it. Click on this to highlight colour contrast issues on the page. Example issues that could be highlighted are where the colour of text is too similar to the background colour. Sitemorse will highlight the text area and when you hover over it, a diagnostic will be shown, for example:

Insufficient color contrast 
Element has insufficient color contrast of 3.27 (foreground color: #989898, background color: #464646, font size: 9.8pt (13px), font weight: normal). Expected contrast ratio of 4.5:1 

The diagnostic will point out the foreground colour, background colour, font size and weight. It will also display what the current colour contrast ratio is and what it should be (which depends on the font size and weight).