Skip to main content

How color-blind people see your UIs

Posted by kirillcool on September 12, 2006 at 8:48 PM PDT

The color blindness is the inability to perceive differences between some or all colors that other people can distinguish. According to the medical studies, eight to ten percent of male population suffers from some kind of color blindness (figure for female population is much lower). What does it mean to the average Swing developer? Well, if you rely too much on color differences, you may be not conveying the information as well as you thought. For example, red-green blindness (protanopia) may cause the user to miss validation information conveyed by the text component background (light pink for invalid value as opposed to light green for validated field).

One of the previous entries on skinning the Swing UIs using the new complex themes in Substance look and feel showed an easy way to bring some colors to your UI. Now you can run your application in debug UI mode (turned on by the -Dsubstancelag.debugUiMode VM flag) and have a live preview of your UI as viewed by the color-blind population.

Here is a screenshot of a sample UI running under Mango skin:

Once your application is configured with the above VM flag, clicking on the title pane brings the debug UI menu:

Select the Color blindness menu and then one of the color blindness kinds. This is how the same UI will look to protanopes (reduced shades of red, see how the pink turns into saturated blue):

This is how the same UI will look to deuteranopes (reduced shades of green, see how the greenish background turns into almost gray):

This is how the same UI will look to tritanopes (reduced shades of blue, see how the yellow turns into light pink):

Note that currently only the theme itself is changed. This means that if you use custom colors on borders, renderers, backgrounds etc, they will be preserved. The next version most probably will use glass pane in order to convert the entire UI into color-blind version (the UI itself will not be interactive).

The implementation is based on the algorithm described in PDF article