Skip to content

Michael LaRoy - Home

On Web Accessibility: Part 2 – Colour Contrast

One of the easiest ways to improve your website’s accessibility is to make good use of colour. One of the first things mentioned in the WCAG 2.0 Accessibility Guidelines on making content “perceivable”, speaks about colour, and moving beyond simply employing colour as a means of distinguishing a link from normal text. Good design will make good use of colour, so that actionable items are obvious and consistent, and that text is readable and understandable.

But, what makes for good colour choices on a web site? While I make no claims to expertise when it comes to colour theory, I can speak to legibility of text when it comes to colour. Once that is see often is light grey on a white background. In my opinion, this combination is impossibly hard to read, even on the best of days.

While colour blindness can affect some women, as many as 1 in 12 men (8%) are colour blind, according to Color Blind Awareness and Wikipedia. As one of those people, I often find it difficult to read text on sites. Beyond making fonts actually large enough to read (which is a whole other issue), choosing the right colours can make all the difference in the world, and making sure the contrast is high enough is key. The WCAG Guidelines suggest a minimum colour contrast ratio of 4.5:1 – and even higher if you care to meet their highest standards. Are you colour blind?

If you are like me, doing the math can be a challenge, So, to help with this endeavor, here is a handy tool to determine whether your choice of colour will meet the minimum WCAG requirements.

5 Accessibility Fixes You Can Make Today

Learn about the most common reasons that websites fail accessibility standards, and what you can do about it.