Colour-Blindness Simulator

I was creating my “How to Play” screens for the front-end this morning and I realised that I needed to load different art if the user had their game set in “colour-blind mode”. This got me thinking about what my game actually looks like to someone who is colour-blind. As I’ve mentioned before, one of my testers has one form of colour-blindness, but I wanted to see for myself what it looks like.

I did a search on the internet and found this cool page:

The site allows you to upload a picture or webpage and view what it looks like in 3 different kinds of colour-blindness. The webpage converter is a little flaky (it doesn’t seem to handle CSS at all), but the image converter is cool. I took some screenshots of my game running in colour-blind mode and fed them into the converter. It immediately showed me a problem with my special items icons. In normal mode the special items have some transparency in them to let the colour behind it show through. However, looking at it in simulated colour-blind mode, I could see that there wasn’t enough space around the icons to identify the shape behind it. I made some changes to the scale of the images in colour-blind mode and I think it works much better.

This Vischeck thing is really cool. I hope that more developers start paying more attention to colour-blind players.

Owen