Updating FitNesse for color blind users

The importance of designing for the color blind has always been at periphery of my awareness while building applications but was recently brought to the foreground when presenting a suite of Fitnesse test results to my boss. When he asked how to determine whether a test passed or failed, I was a little puzzled by the question. I thought the red and green colors were quite obvious. That's when he had to remind me that he is color blind (most likely protanopia or a variant, as red/green seems to be particularly problematic).

Of course, I was embarrassed at neither remembering this nor coming up with a solution before having it pointed out. Nonetheless, I remembered when first getting acquainted with Fitnesse a mention of customization of the stylesheets in the user guide.

Digging around a bit, I discovered a very simple solution. I created two png files, pass.png and fail.png and placed them in c:\fitnesse\files\images. Then I modified c:\fitnesse\files\css\fitnesse.css as follows:

@import url( "/files/css/fitnesse_base.css" ); .pass { background-color: #AAFFAA; padding: 0px 0px 0px 20px; background-image: url("../images/pass.png"); background-repeat: no-repeat; } .fail { background-color: #FFAAAA; padding: 0px 0px 0px 20px; background-image: url("../images/fail.png"); background-repeat: no-repeat; zoom: 1; } #test-summary { padding: 0px 0px 0px 20px; }