Cool Tech Tool: Coblis Color Blindness Simulator

Website accessibility is the concept of making your website usable and functional for people of all abilities, including folks with disabilities.  For example, we add alternative text (“ALT” text) to images so that a blind user’s screen reading software will read a description of the image to them.

Have you ever considered color blindness in terms of your nonprofit website’s accessibility?  If you aren’t colorblind yourself, it’s hard to imagine how your site might appear to someone who is.

If you’d like to see how images look to people with various types of colorblindness and to check the contrast and visibility of your website graphics, try this free online tool, Coblis.

With Coblis, you can upload a photo up to 600 KB in file size and choose from a menu of colorblindness types. As an experiment, I uploaded the TechNow conference cover photo for Twitter into the simulator and took screenshots of a few simulated settings:

TechNow logo - no colorblindness

TechNow logo simulated as red colorblindness

TechNow logo simulated for green colorblindness

TechNow logo simulated for blue colorblindness

I was relieved to see that the text in the image is still readable across the simulated versions, though I think it starts to get a little dicey in the Blue-Blind simulated image.

Give Coblis a try with some of your own images!


BONUS TIP: If you find that you need to tweak some color settings, you can use any color wheel to make selections. Remember that the best contrast will always be found with colors that are opposite each other on the color wheel (example: red/green, blue/orange). White contrasts well with darker colors, black contrasts well with lighter colors.

Classic color wheel

Color wheel example showing contrast

Advertisements