Kirill Grouchnikov's Blog

How color-blind people see your UIs

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

Comments

• A while ago I started writing a NetBeans module to achieve the same, but in the GUI designer. I've always been too lazy to finish it. Now if you release a glasspane version of that, that'd be cool!

  Posted by: gfx on September 13, 2006 at 03:18 AM

• Romain,
  The only disadvantage of using a glass pane is that you'd have to lock down all the events, painting the frame on an image and transforming that image. So, if you'll want to see the difference between the same field in two different visual states, you'd have to dismiss the glass pane in the middle :(

  Posted by: kirillcool on September 13, 2006 at 09:07 AM

• You can use a RepaintManager maybe. I once implemented a version of Jext (www.jext.org) that had a 3D interface (you had to use red/blue stereo glasses) that way.
  

  Posted by: gfx on September 13, 2006 at 11:09 AM

• Romain,
  I don't want to interfere with the application too much - just to have a simple way to preview the current UI in color-blind mode. So, the glass pane can be an easy solution - paint frame to image, process, overlay and lock down all the events. I'm not sure if i really want to go for the full-blown solution of the dynamic repaints.
  In any case, all Substance themes provide an API for "color-blinding" them, so if you (well, may be no you :) use green and red themes for providing visual feedback, you can "color-blind" them as well and still have the regular responsive UI.

  Posted by: kirillcool on September 13, 2006 at 11:33 AM

• Hi,

  Nice entry, Kirill.

  I think we should find a solution to this, probably including the people responsible for accessibility stuff in the JDK/Swing teams.

  I also think this deserves a java.net project of its own.

  What about building a special JPanel to hack the "Graphics" object sent to children components?

  I was thinking of tackling the Color Model used in the Composite of the corresponding Graphics2D, something like this:

  public class ColorBlindPanel
  extends JPanel
  {
  Composite colorBlindComposite = ....;

  @Override // Yes, we're overriding paint, andd not PaintComponent
  public void paint( Graphics g )
  {
  Graphics2D g2d = (Graphics2D) g;
  g2d.setComposite( colorBlindComposite );
  super.paint( g );
  }
  }

  Of course we should build a specific ColorBlindComposite implementing the Composite and including some custom ColorModel's.

  If we get to build such a Composite and ColorModel stuff we could propose including them in the JDK and making the hack a part of the root pane of all windows (or enable it as a default in some other way in all Swing components).

  Cheers,
  Antonio

  
  
  

  Posted by: vieiro on September 14, 2006 at 08:21 AM

• Antonio,
  Now this sounds like a lot of work :) I'm afraid i'm not up to it at this point. Anybody interested? Anybody from Swing accessibility team?

  Posted by: kirillcool on September 15, 2006 at 09:25 AM

• Yes, I agree this should be lead by someone from the Swing accesibility team.

  Thinking of it I assume you could use the same technique (handling the Composite on the Graphics object) in a GlassPane.

  The Accesibility team could place some sort of color filtering to allow for better legibility for color blind people (using inverse algorithms to the one you were using).

  Cheers,
  Antonio

  Posted by: vieiro on September 15, 2006 at 11:33 AM

• Antonio,
  This is an excellent idea - how to design a theme so that it will look the way you expect it to the color-blind people. However, this may prove to be impossible. Let's say you want to use yellow theme - but the tritanopes can't see yellow at all - so no matter how you "twist" the original scheme, you can't get it to look yellow to the tritanopes. Same would be with red for protanopes and deuteranopes - see images here.

  Posted by: kirillcool on September 15, 2006 at 11:53 AM

• Hi Kirill,

  Yes, but wouldn't it be possible to change all yellow to any other color that tritanopes can see?

  Of course the resulting color may not be yellow, but, say, pink. The real important thing is that the resulting color is visible to color blind people. Not really important if it's the *same* color as the original one.

  Ideally the Swing accessibility team could integrate this in the accesibility support, so people with these dissabilities could have a better user experience.

  As far as I understand there's some kind of support for this already in Swing (with the operating system support). On some operating systems you can make all your look and feel to use high-contrast colors, and use bigger fonts.

  Cheers,
  Antonio

  Posted by: vieiro on September 18, 2006 at 02:48 AM

This work is licensed under a Creative Commons License.