Checking Colour Contrast

Before I continued my design, and finish the prototype, I wanted to double check that the colours contrast correctly. This is because, users with sight impairments will find text difficult to read if it doesn’t stand out well against the background that it’s placed on.

I also made my “bowel movements” screen with those who are colourblind in mind. To do this, I simply added the word for each colour on top of the coloured buttons in order to avoid any upset or confusion. I also ensured that the colours of the buttons behind each piece of text was dark enough so it also passed in the contrast checker.

I actually checked (and fixed) some of this a couple of weeks ago, but completely forgot to make a post about it!

Taking the Colours Into a Contrast Checker

I used webaim to check the contrast of my colour choices. My aim was to reach a AA standard with them. All of the text I was concerned about is in bold, so it counts as “large text” in this case.

I checked the colours on this screen first, as I wasn’t too sure if the blue on blue was going to work because the shade of the text was a bit light.

I was unsurprised to find that this colour combination didn’t work, so I changed the shade of blue on the foreground until I found both a colour that I liked, and that contrasted well.

The new colour (#177896) passed with a AAA standard for large text, which was really exciting.

This is the screen before changing the blue:

I decided to double check that this new colour

This was the colour choice I had gone for beforehand, and it failed every part of the test. I wanted it to still be bright and noticeable, so I only slightly adjusted it.

The new colour passes with a AA for large text, which is all I need because this text is emboldened, and it’s also larger than the body type on the screen.

Thoughts:

I am much happier now that I know my design is more accessible, and easy to use. I also double checked the contrast of other parts of the design, although I made sure to keep colour contrast in mind as I was making it digital. The things I have shown in this post were the ones that failed at first and had to be changed.