Colorblind Simulator

Introduction

This Page describes a Firefox extension that allows a user, and more importantly a developer, to simulate how a webpage might look for colorblind people. Colorblind afflictions can be divided into the following groups:

• Protanopia - Lacking long-wavelength sensitive retinal cones
• Deuteranopia - Lacking medium-wavelength sensitive retinal cones
• Tritanopia - Lacking short-wavelength sensitive retinal cones

For more information consult this wikipage.

Installation

There is currently an experimental version of the extension. Install the extension by first installing the latest version of Firefox (see below). Next, either drag & drop the extension into the browser window or open it using File -> Open. After restarting the browser, installation is successful if three buttons appear in the statusbar.

Installing and updating Firefox 3.0

In order to install the development version of Firefox, you first need to get the latest nightly build, and then uncompress it into a directory of your choice. The most up to date build can always be obtained from here:

ftp://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/ Uncompress the file with commands similar to the following:

bunzip2 firefox-3.0a3pre.en-US.linux-i686.tar.bz2
tar -xvf firefox-3.0a3pre.en-US.linux-i686.tar 

To run your new version of firefox:

cd firefox
./firefox -P <profile>

Note: The -P command switch tells Firefox to create a profile directory. This will prevent your default profile from being overwritten. Please consult the Minefield Guidelines for additional information. You can insure that your Firefox is up to date by periodically selecting the check for updates option under the help menu.

Usage

The simulation algorithms can be run over the active browser document using the three new statusbar buttons. Here you see the Ishihara test before and after the simulation:

I've reworked the GUI you can now start simulation over the webdeveloper extension, as you can see in the next image.

If you want a button instead in your (Navigation)-Toolbar, without using the webdeveloper extension click View->Toolbars->Customize and Drag&Drop the ColorSimulation Button to your Toolbar.

Using the Button is very easy look at the next image

Settings

• Stylesheets -- enable / disable stylesheet support

• Global Stylesheets -- enable / disable stylesheet support for <style type="text/css"></style> and <link rel="stylesheet" type="text/css" href="something.css"> and <?xml-stylesheet type="text/css" href="something.css" ?>

• HTML Style Attributes -- enable / disable support for <aHTMLELEMENT style="something: ...." />

• HTML Color Attributes -- some HTML elements give you the possibility to set a color, you can enable / disable support for this attribute with this option
• Images -- using this simulation tool at webpages which have a lot of big images needs a lot of time, disable this option if it is too long for you
• CSS Background Images -- if you don't want to simulate the CSS backgrounds disable this option
• HTML Background Images -- if you don't want to simulate the HTML backgrounds disable this option
• Process Frames -- if you want to enable / disable to simulate into frames use this button
• Status Toolbar -- enable this option if you want three buttons in the statusbar, that allow to start simulation on the active tab
• Toolbar Entry -- adds a menu entry to the tools menu
• Open in a new tab -- If you want that the active tab should be unchanged after simulation and the simulation should be applied to a copy of the active tab use this option

Architecture

1. We have a XPCOM component (called AlgorithmDichromatSimulation) written in C++ that computes the simulation colors. A simulation color shows a normal observer how that color looks for a colorblind observer. You pass one color into this component and get one simulation color back.

2. We also have another component, were you can pass an array of colors into it, and you get an array with simulation colors back. This component (called ImageProcessor) uses also the first component. The "in array" is usually a part of an Imagedata.data array that you use with CanvasRenderingContext2D.getImageData() and putImageData().
   You may ask why this is not part of the first component. Maybe someday putImageData()/getImageDate()/toDataURL() are useable from C++ and not only from javascript. Then I will put this stuff from the javascript code to this component.
   

3. Then we have an algorithm (written in js) that goes through the document (HTML Doc, Stylessheets and later SVG or other XML stuff). Whenever the algorithm finds color information, it calls the AlgorithmDichromatSimulation component which computes a replacement color and puts it into the document tree.
   If this algorithm finds an <img> tag it does the following:

   1. Draw <img> to a <canvas> element (which is invisible)

   2. Get (getImageData()) every pixel from the <canvas> (in 50x50px blocks)

   3. Pass this 50x50px array into the ImageProcessor component

   4. Put (putImageData()) the array back on the <canvas>

   5. Convert <canvas> to a data URL by calling toDataURL()

   6. Replace <img src="URI" with src="dataURL:"

Development

• [done] coded the extension, UI, "Color Simulation Algorithm", ....
• [done] [idea] To find out if there is a better solution than using the canvas tag. Now way found.
• [done] [Performance] Rewrite some parts of the javascript code as a XPCOM component has reduced time by 2/3. (This is done but maybe one day we can use toDataURL, getImageData, putImageData from C++ to increase the performance further)
• [done] Code Refactoring; Dropped javascript Version of the Simulation Algorithm, to simplify the Extension.
• [done] mid-term evaluation
• [done] Begin work to embed the extension into the "Web Developer Tool Bar".
• [done] Rewrite UI of the extension.
• [maybe next task] [Enhacement] Build this extension for more platforms, i.e. Windows and Linux and maybe OSX.
• [done] end-term evaluation
• [later] [Performance, Enhacement] Use threads or maybe other things to interrupt the script so you can use Firefox when the algorithm is running on a webpage.

Beta testing

I release the first beta of this Extension when it's ready for testing. I think first august week is realistic.

Questions

If you have any question, ask them in this section. Please set a prefix in front of you question like "gz:"

Bugs

(Priority P1 > P2 > P3 and Enhancement)

[Status] [Priority] description

• [done] [Enhancement] The src attribute of <input> has also an image see w3c

• [future] [Enhancement] Ship XPCOM dlls also for Linux and may OSX. I need help on this, if somebody knows how to build the XPCOM Components on Windows with mingw or cygwin for Windows/Linux/OSX please open a new section on this site: Crosscompiling.
• [done] [Enhancement] Webdeveloper Integration:
  • [done] Primary Toolbar Integeration
  • [done] Secondary webdev toolbars integration
  • [done] Now Strings written in properties files.
• [done] [Enhancement] Rewrite UI
  • [done] Add toolbar button to use the extension without the webdevtoolbar
  • [done] Implement Help Window
  • [done] Rewrite the Options Dialog
• [done] [P2] Write the manual/help files
• [done] [Enhancement] implement the open in a new tab feature.
  • [done] Open evertime in a new Tab
  • [done] Middle click on menu entries should open a new tab.
• [done] [Refactoring] Rename all prefs to extensions.UUID.......
• [future] [Enhancement] Not open multiple Help Windows, without making the window modal. See (chrome://help/content/contextHelp.js)
• [done] [P1] Add license informations.
• [done] [P1] Add about.xhtml
• [done] [P1] install.rdf

  • [done] [P2] Do I need <em:iconURL>?

  • [done] [P1] Version Number 0.3 for Milestone 1

  • [done] [P1] Add <em:description>

  • [future] [P3] <em:updateURL>?

  • [done] [P1] Name!