IXD303: Checking Colour Accessability

The WCAG (Web Content Accessibility Guidelines) has certain standards for colour contrast on websites and apps. This is to ensure your app is accessible to those with colour blindness, visual impairments, etc. Following these guidelines will also be beneficial to all your users, making things easier to read.

I decided to test my app to see if it meets these standards as it is important to me that my app is accessible to all. I used a WCAG Colour Contrast Checker and began testing the colours throughout my app.

One of the main colours I use on my app is green. I use this as the background for screen titles, navigation, buttons etc. Since this colour is so widely used, its important that the colours work together. I checked the contrast with the titles, and it passed.

However, when I tested the navigation, it didn’t. This was because I used a white background with quite a light shade of green. This didn’t provide enough contrast and I can now see why.

Therefore, I decided to change the colour of the icons to black. I also changed the shade of green to be lighter which is the same colour as the background for the titles. This creates consistency and makes the navigation much more visible.

Here are the results after this change:


I also wanted to test the colour of the buttons I have used in my app. First, I tested my alerts button. The colour contrast failed for small text, however, it passed both AA and AAA if it was being used as a UI component, which it is. This is the reason I decided to keep it the way it was.


Another main colour I use is purple. I use this as an accent colour for the bar charts and some buttons. When I tested this against the white it passed everyone except for AAA for small text. To make it pass them all, I had to make the purple a little bit darker so that is what I did. I also changed the shade of purple where it was used on buttons.


Overall, I found doing this very eye-opening. There were some colour combinations that I thought worked well together but when I tested them, I was surprised how many they failed. This has shown me that accessibility is more important than visual aesthetics. I feel that I have made the content in my app much easier to read and I am happy with the results. I will continue using the colour contrast website in future projects, but I will ensure I test colours at the start rather than nearing the end of a project as it will take some time to make these changes. However, I think it will be worth it.

Leave a Reply

Your email address will not be published.