Written by Peter Bui Follow on
Published: 26 September 2015

colour contrast accessible websites

Web accessibility can be hard to understand and time consuming to implement but a well trained accessibility expert with lots of experience would be able to work through the WCAG 2.0 success criterion quite quickly and easily providing great value to a website from a usability and accessibility viewpoint. For the rest of us that aren't as experienced, little hints and tips to help improve our designs and websites is what it will take to improve accessibility in our own sites one step and success criterion at a time.

Colour contrast and font sizes in our designs are one of the easiest things we can change and improve in our designs. It doesn't only help users with vision impairments but can also help improve the usability and readability of your site in general in many situations.

Take the scenario of a person reading an article on your website on their mobile device in the sun light. The glare on the screen will make it fairly hard to read but a site with a good text contrast ratio may still be fairly easy to read in such a condition. 

What You Need to Do - The Success Criterion

As defined in the WCAG 2.0 SC 1.4.3, a minimum colour contrast ratio of 4.5:1 is needed for text and images on a page to help people read content more easily. This is for a standard font size of 14pt.

The contrast ratio is devised from a mathematical formulae which can be tested as so.

    1. Measure the relative luminance of each letter (unless they are all uniform) using the formula:

    2. L = 0.2126 * R + 0.7152 * G + 0.0722 * B where RG and B are defined as:

    3. if R sRGB <= 0.03928 then R = R sRGB /12.92 else R = ((R sRGB +0.055)/1.055) ^ 2.4

    4. if G sRGB <= 0.03928 then G = G sRGB /12.92 else G = ((G sRGB +0.055)/1.055) ^ 2.4

    5. if B sRGB <= 0.03928 then B = B sRGB /12.92 else B = ((B sRGB +0.055)/1.055) ^ 2.4

and R sRGB, G sRGB, and B sRGB are defined as:

    1. sRGB = R 8bit /255

    2. sRGB = G 8bit /255

    3. sRGB = B 8bit /255

The "^" character is the exponentiation operator.

Note: For aliased letters, use the relative luminance value found two pixels in from the edge of the letter.

  1. Measure the relative luminance of the background pixels immediately next to the letter using same formula.

  2. Calculate the contrast ratio using the following formula.

  3. (L1 + 0.05) / (L2 + 0.05), where

  4. L1 is the relative luminance of the lighter of the foreground or background colors, and

  5. L2 is the relative luminance of the darker of the foreground or background colors.

  6. Check that the contrast ratio is equal to or greater than 7:1

 (formula from - http://www.w3.org/TR/WCAG20-TECHS/G17.html)

For larger scale text, logos or decorative text, this isn't important and the recommendation can be by passed.

How To Determine Your Colour Contrast

Besides working out the colour and working it through the mathematical formulae as presented above, you can instead use a few tools online that will let you determine the colour contrast of text on a page compared to the background colour of your text.

Online Web Base Tool

webaim colour contrast

The online checker I prefer to use is the one from WebAim. Simply copy in your hex values for your foreground font colour and your background colour into their calculator and it will determine if your colour choices meet minimum requirements or not. It will also let you play with the colours to order to darken or lighten them to get the right contrast ratio.

For example, the Joomla Beat Podcast website's content font colour is #444444 and has a background colour of #FFFFFF (white) giving it a contrast ratio of 9.74:1, more than enough to meet the minimum requirements for AA standards and also for AAA standards.

It is a nice quick and easy check to make sure that your important areas such as your navigation links and content are as readable as possible.

Downloadable Tool

If you prefer to have a downloadable tool to test you colour contrast, try using the colour analyser tool from the Paciello Group who have developed the desktop applications for testing.

Share Your Results and Tweaks

Have a play, test your site and post in the comments your results and changes you have made to your site to help improve your design, readability and accessibility of your site.

 

 

Peter Bui

Peter Bui

An all round web specialist with years of experience in web design, development and open source solutions at PB Web Development

Subscribe to the Podcast

Subscribe to Newsletter

Stay up to date with the latest Joomla news, design, development, marketing and management hints and tips right in your email.

Sub Category Topics Menu

Recent Comments

This site is hosted on

Digital Ocean

Simple Cloud Hosting, Built for Developers.

 

If you don't know how to build
your own server, we recommend

 siteground logo

Fast support, reliable & cost effective

Web Hosting