multi-coloured coffee cups filled with multi-coloured liquid
Caren Launus-Gamble of KreativeInc

Caren Launus-Gamble

Web Accessibility – Is your Contrast Ratio as it should be?

Web Accessibility - Is your Contrast Ratio as it should be?

Is your website good enough for your customers who have low vision, are colour blind, have dyslexia or light sensitivity and other cognitive or sight conditions?

A good contrast ratio on your website means better access to your information for a wider audience, leading to more sales!

Here's a guide to show you how you can check that your website’s colour contrast ratio is as it should be.

Find your Website’s Colour Codes

❓ Find your website’s colour codes:

Download the ‘Add-on’ or ‘Extension’ ➣Web Developer➣ from your browser’s Add-on/Extension Store (see links below).

Open the extension by clicking on the ⚙️ icon on the right-hand side of the browser address bar.

Web developer extension example screen for colour contrast ratio

In the window that opens up, click on the ‘Information’ tab ➣ then ‘View Color Information’ ➣ A new tab opens, displaying all the colour codes used on your site.

Note down the main colour codes from your website. The list you see may be very long. So make sure you identify the relevant codes by checking back with your website. Just open up a new tab showing your website and cross-reference the colours.

Test your Website’s Colour Contrast Ratio

❓Test your website’s colour contrast ratio:

Use the free tool provided by contrast-ratio.com.

➣ Copy and paste the relevant background and text colour codes into the “background” and “text” fields.

➣ Hover over the circle with a number ➣ red (not accessible) ➣ green (accessible).

Contrast Ratio Tool screen showing a red, negative accessibility result

 

Contrast Ratio Tool screen showing a green, positive accessibility result

What do you get? Are the colour contrast ratios on each of your web pages accessible?

What to do next?

If your colour contrast ratio results are accessible, pat yourself or your web developer on the back. Well done!

If your colour contrast ratios are not accessible, you must have a word with your web developer to see if he can change your website colours.

Alternatively, send us a message. We are always happy to help!