43

I've made a visualization that consists of various colors. Now I would like to test, if also color-blind people can use my application in a meaningful way. Is there any tool etc that I can run to see my application like color-blind people would perceive it?

My application is a plain Java application that uses the Processing framework to draw the visualization. I would really prefer a framework or tool that I can hook into my application to achieve that effect. If this is not possible a website where I can upload some screenshots would also be feasible.

7
  • 6
    I think the answers given are along the lines you are looking for. However, accessibility standards state that you should never rely on colour alone. If you have symbols/annotations in addition to colour, then the chosen colours will not be as critical to comprehension. (you will need some textual version of your representation to satisfy screen reader users anyway, perhaps that could also be of use to colour-blind users). w3.org/TR/UNDERSTANDING-WCAG20/… (also applies to people with black & white printers, not just colour blind people). Apr 3, 2012 at 21:08
  • There's an app for that: CVSimulator Apr 21, 2012 at 14:23
  • Looks like this is a duplicate question of: ux.stackexchange.com/questions/71/…
    – stefan.s
    Jun 20, 2012 at 8:37
  • 1
    @stefan.s good call. However that old question was more of a shopping request than a question (give me examples of X) so I've marked that one as a duplicate of this question - lets keep this one as the canonical one as it's more answerable than the older one.
    – JonW
    Jun 20, 2012 at 10:15
  • A little late to the party but I'm using a chrome extension called Spectrum
    – SlaKrop
    Apr 9, 2014 at 8:21

7 Answers 7

33

There's a spectacularly cool desktop app for Windows, Mac and Linux called Color Oracle which is really nifty and adjusts everything you see to mimic many various types of colour blindness in real time and isn't limited to static images or websites.

Here are some screenshots showing the UX website under Deuteranopia, Protanopia and Tritanopia respectively:

A screenshot of the UX Stack Exchange website as seen by a Deuteranopic viewer (someone with red weakness)

A screenshot of the UX Stack Exchange website as seen by a Protanopic viewer (someone with green weakness)

A screenshot of the UX Stack Exchange website as seen by a Tritanopic viewer (someone with blue weakness)

Notice how my wallpaper and browser chrome is also modified—the whole OS gets the colour treatment which allows you to test icons, movies and many other things outside of just websites.

2
  • 1
    Yes Color Oracle is excellent. And free. Also consider Xscope as it does cost money but has lots of other excellent tools, presbyopia tester as well. Apr 5, 2012 at 11:30
  • color oracle is actually broken on gnome-shell now.
    – airtonix
    Apr 8, 2015 at 3:29
15

You're in luck. There are a number of websites that do this. Here are two I use:

http://www.vischeck.com/vischeck/vischeckURL.php -- tests any website you point it at. You could take a snapshot and put it on a webserver. (I don't think it'll work with the Processing applet.)

http://colorfilter.wickline.org/ -- similar idea, with even more options.

9

There's a tool for that:

http://michelf.com/projects/sim-daltonism/

As a safe approach, I would use high contrast colours that match the WCAG colour contrast formula.

Someone made an online tool for that: http://www.snook.ca/technical/colour_contrast/colour.html

If colours are not the answer, why not use pattern-backgrounds? ..plenty here: http://lea.verou.me/css3patterns/

1
  • 1
    Vision Australia also releases a desktop app for Windows and Mac in collaboration with the Web Accessibility Tools Consortium (wat-c) for checking contrast against the WCAG recommendations called Colour Contrast Analyser
    – Kit Grose
    Apr 10, 2012 at 1:04
6

If you have Photoshop or Illustrator, there is a view filter that you could look at screenshots as they would appear in both Deuteranope and Protanope vision. In CS5 it is under View > Proof Setup > Color Blindness...

You could also try finding a person with color blindness to test your application. Colorblindness affects about 1 in 12 males, so chances are you know someone affected.

1
  • 1
    Yes I know a person that could test my application and I will also contact him. However I want to "experience" it by myself to see how it really looks like. Apr 3, 2012 at 16:53
5

I always try to be conscious of how well my interfaces will be received to people who may have color blind issues. And also, I feel that making a page which is balanced for color blindness will also be easier on the eyes of users in general.

Even if your eyes are perfect, looking at yellow text on a white background is going to be annoying.

To balance this out I take several approaches, and have also in the past consulted various actual artists I know with regards to color design, composition, and balance.

Choosing a color

This part should be step 1. What is the main color you want to use? It is possible to choose a color which is going to abide by color blindness standards while still being close to if not exactly what color you want. For example, green stop lights now include just a touch of blue in them to help with color blindness, but most people probably just observe them as green.

So you have your color, #f6ec01 (I randomly typed a hex value - I hope it isn't like dull brown or something). Okay, so now that you have your base color you are going to want to go to http://www.colorhexa.com and search for that hex value.

enter image description here

Great, it was yellow. We can work with this though. Scrolling down to the very bottom of the page colorhexa offers an amazing tool.

enter image description here

Hovering over each color listed shows what percent of the population is going to view your color as that color. In my case, I got that 6% of men will see my yellow as a slightly off yellow. The other percents and colors shown were rather low, some 0.0001% of the population. So worse case scenario, we have slightly off yellow, which I think we can live with.

So even if you are evaluating a current color set on a site, you can use this tool to see what percent of the population is viewing your site as (for example, if a high percent is seeing too much gray).

Ensuring standard contrast

This one is really important and we will use a different tool for it. Let's continue with our yellow theme to kind of go with the assumption that we can use any color randomly and still make the balance and theme work purely based on these approaches.

The next tool we will use is http://webaim.org/resources/contrastchecker/ which tests against the Web Content Accessibility Guidelines from the W3C (The real one. The World Wide Web Consortium (W3C)).

I want to use my color as my text to make it pop! So I go check what the contrast is of it being on a normal white default background (I know I said yellow text on white earlier, but this is pure coincidence).

enter image description here

Well, the contrast is horrible. The standard (shown lower in the page) states that the ratio must be 4.5:1 for normal text and this isn't working. Note: flipping these, as in yellow background and white foreground, will result in the same contrast.

Color composition

Although that didn't work, I still want to use my chosen color. This is where color composition comes in to play. Using color compliments and secondary colors will provide both a balance to the visual aspect, a proper ratio of contrast, and also a set of colors that we can immediately use to balance our yellow.

A great tool to do this with is http://paletton.com/ . If you select the "Tetrad (4-colors)" display and search for your color, it will give you an entire arsenal of colors to use that will all be contrast balanced. In addition, since we ensured that our starting color was going to be easy to see for people who may have color blindness, this set will be invaluable.

enter image description here

So this is what it came up with. You can see the main dot on yellow there on the circle, with its secondary color towards green. And also you can see the color compliment on the opposite site of the circle in the purple area. On the right is a whole set of those 4 colors (both compliments and secondary colors) along with shades of those colors you can use. If you go back to colorhexa.com and check these shades, you can also view a breakdown of shades of each individual color to ensure that the color blindness aspect is covered and supported.

So now that you have a set of 20 colors and you can tell which ones will be balanced with a proper color contrast and what shades color blind users may view them at, you should be able to build a visually appealing page with the color theme you still wanted at the onset.

1
  • 2
    I really like paletton as well. It has some hard limits on how many colors your palette can have, but its simulators are outstanding. Notice the "Vision simulation" button in the bottom right corner of the screenshot above. Once you're in that mode, click Examples and all the examples will be simulated too!
    – Jon Coombs
    Feb 18, 2016 at 5:45
1

Jenn Lukas wrote an article on A List Apart [April 9, 2014] showing how you can use Chrome's Accessibility Developer Tools to easily test color contrasting.

-1

If you're using Adobe Photoshop you can do some soft-proofing for colorblindness: http://jaykinghorn.com/2008/11/25/photoshop-cs4-color-blindness-proofing/

1
  • hannahd already mentioned Photoshop as an option.
    – MXMLLN
    Jul 18, 2016 at 15:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.