Day 18 Use a tool to test for colour contrast problems.

- October 13, 2020

Day 18 Use a tool to test for colour contrast problems. .

The colour contrast of a website is very important. If text does not have sufficient contrast compared to its background, it will make it difficult to access the website. People with colour blindness or other visual impairments as well as people browsing the Web under less than ideal circumstances (bad monitor, window reflections, sunlight hitting the screen) may not be able to read the text, at least not without difficulty.

There are different algorithms used to calculate contrast ratios. Some tools use the luminosity contrast ratio algorithm mentioned by the WCAG (Web Content Accessibility Guidelines) 2.0 working draft, while others use the colour brightness and colour difference algorithms that are mentioned in a companion document to WCAG 1.0. Some even use both.Some colour contrast tools are Web based, while others are standalone applications or browser extensions that you run locally on the computer.

Colour Contrast Analyzer

I used the chrome extension tool Colour Contrast Analyzer for this task.You can download it from chrome web store.This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.

Additionally, you can evaluate files on your computer that can be opened in Chrome, such as image files and PDF files. Note, with PDF files you will only be able to evaluate the visible portion of the page. To analyze local files you will need to go to your Extensions page and check "Allow access to file URLs" for this extension.

You can select to evaluate for either AA or AAA conformance, along with specifying the size of the text you want to analyze.

The output will show you a map of where the edges between colors are different enough to meet the specified contrast requirement. If there is an item on the underlying page that is not outlined in the output mask, then the item does not have enough color contrast according to the conformance level you selected. The resulting image analysis can be downloaded to your computer as a PNG file.

In order to better handle gradients, you can also select the pixel radius that should be used to analyze adjacent pixels. The larger the pixel radius, the further out it will look for a border with high enough contrast. However, a larger pixel radius will add significant computation time.

When first installing the extension, you may need to refresh the webpage you wish to analyze for all of the selection options to be available.

Testing with colour contrast Analyzer

I used my blog site https://yogitalad.blogspot.com/ for testing with a colour contrast analyzer.I found out the colour contrast problem on the home page.Text (Yogita Lad) against background image & Date was not clear with the mask.