Color Vision with Javascript

The Color Vision library for Javascript is composed of two parts; a color vision daltonize.js [1, 2] and simulate.js [3, 4, 5].  These algorithms combined enable developers to target specific forms of color blindness from both sides of the spectrum.

The following code is an example of using the Color Vision library to daltonize an image, exposing details to a protanope:

Color.Vision.Daltonize(image, {
        type: "Protanope,
        callback: function(canvas) {
            document.body.appendChild(canvas);
        }
});

Here are the results on an Ishihara test plate [6].

Color Blindness Simulation 

Gary W. Meyer and Donald P. Greenberg [3] present an algorithm to simulate the world through the eyes of dichromats.  In this example, we simulate how a protanopic (red-cone missing) individual would perceive and image:

Color.Vision.Simulate(image, {
        type: "Protanope",
        amount: 1.0,
        callback: function(canvas) {
            document.body.appendChild(canvas);
        }
});

One interesting thing about this algorithm is that it can be modified to match other forms of color blindness by modulating the confusion line coordinates.  At this time, there is no online color vision tests that can provide measurements of an individuals confusion line, as such, one is left to creating fanciful psychedelic customalies:

Color.Vision.Simulate(image, {
        type: "Custom",
        x: 0.7465,
        y: 0.2535,
        m: 1.273463,
        yint: -0.073894,
        amount: 1.0,
        callback: function(canvas) {
            document.body.appendChild(canvas);
        }
});

You can find the entire project online.

Javascript

• Color.Vision.Daltonization.js
• Color.Vision.Simulation.js

References

1. Françoise Viénot, Hans Brettel and John D. Mollon
   Digital video colourmaps for checking the legibility of displays by dichromats
   Color Research and Application, 24(4): 243-252, 1999.
   
   
2. Onur Fidaner, Poliang Lin and Nevran Ozguven.
   Analysis of Color Blindness
   
   
3. Gary W. Meyer and Donald P. Greenberg
   Color-Defective Vision and Computer Graphics Displays
   IEEE Computer Graphics and Applications, 8(5): 28-40, 1988.
   
   
4. Vivianne C. Smith and Joel Pokorny
   Spectral sensitivity of the foveal cone photopigments between 400 and 500 nm
   Vision Research, 15(2): 161-171, 1975.
    
5. Bruce Lindbloom
   RGB Working Space Information
   
   
6. Les Daltoniens
   Le test d’Ishihara
   

Color Vision with Pixel Bender

Pixel Bender is a powerful tool for image processing released by Adobe Systems as part of their CS4 product line — it's integrated into After Effects, Flash, and Photoshop.  It's a fun, and straight-forward language to program with.

The Color Vision library for Pixel Bender is composed of two parts; a color vision daltonization kernel [1, 2] and simulation kernel [3, 4, 5].  These algorithms combined enable developers to target specific forms of color blindness from both sides of the spectrum.

These kernels have multiple uses, one that interests me the most is plugging them into popular video hosting websites such as Hulu, Vimeo and Youtube.  The daltonization kernel, based on the LMS daltonize algorithm, could expose 5% of the population with dichromatic vision to details they would have otherwise missed.  The simulation kernel, targeting the other 95% of the population, can be used to see what motion pictures look like through the eyes of the color blind.

Photoshop installation

1. Install Photoshop's Pixel Bender plug-in (it's not built unless you're on CS5).  You can find this plug-in at the Pixel Bender Technology Center.  
2. Put the Pixel Bender .pbk filters you wish to install (see Pixel Bender kernels) into the ~/Adobe Photoshop CS4/Pixel Bender Files/ directory on your computer.  
3. Open the "Filter" menu from within Photoshop and click on "Pixel Bender Gallery".

After Effects installation

1. Put the Pixel Bender .pbk filters you wish to install (see Pixel Bender kernels) into the ~/After Effects CS4/Plug-ins/Effects/ directory on your computer.  
2. Open the "Effects" menu from within After Effects

Flash Player embedding

The code to import Pixel Bender kernels into Flash Player can be found in Main.as, Daltonize.as and Simulate.as.  The kernels must be compiled into .PBJ, which you can find in the parent directory.

Developers

If you're interested in messing around with the code behind these filters, download the Pixel Bender Toolkit to load the Pixel Bender .pbk filters included in this article.  Another great place to start is the Pixel Bender's Developer Guide.

Pixel Bender kernels

• Color-Vision/Daltonization.pbk
• Color-Vision/Simulation.pbk
  

References

1. Françoise Viénot, Hans Brettel and John D. Mollon
   Digital video colourmaps for checking the legibility of displays by dichromats
   Color Research and Application, 24(4): 243-252, 1999.
   
   
2. Onur Fidaner, Poliang Lin and Nevran Ozguven.
   Analysis of Color Blindness
   
   
3. Gary W. Meyer and Donald P. Greenberg
   Color-Defective Vision and Computer Graphics Displays
   IEEE Computer Graphics and Applications, 8(5): 28-40, 1988.
   
   
4. Vivianne C. Smith and Joel Pokorny
   Spectral sensitivity of the foveal cone photopigments between 400 and 500 nm
   Vision Research, 15(2): 161-171, 1975.
    
5. Bruce Lindbloom
   RGB Working Space Information

Color Vision with ColorLookupTables

Any color correction can be expressed as a color look-up table (CLUT); a mechanism used in image processing to transform a range of input colors into output colors.  There are 16,777,216 colors available in the standard RGB color space.  One way of representing this data is to create an image containing 4096 x 4096 pixels — when arranged in a specific way, this image is called a Hald CLUT (see "Identity" for normal vision below).  Hald CLUTs are supported by ImageMagick, and GraphicsMagick.  Other possible uses would be to offload the data onto an FPGA or an ICC profile, thereby filtering the entire display.

The following images were created using Photoshop's PixelBender plugin and the Color Vision Library.  Google Chrome, and Safari were both fast enough to process this data without timing out, unfortunately, they don't allow right-click to save the <canvas> as a PNG.

Identity
Normal Vision

Protanopia

Simulate missing red-cone

Daltonize missing red-cone

Deuteranopia

Simulate missing green-cone

Daltonize missing green-cone

Tritanopia

Simulate missing blue-cone

Daltonize missing blue-cone

LMS Daltonization Algorithm

Implementations:

1. Matlab code from Analysis of Color Blindness
2. Python code from AccessibleMoin
3. Javascript code from Daltonize.org
4. PixelBender code from Daltonize.org

Composed of four primary steps:

1. Conversion of RGB coordinates into LMS, a color space suitable for calculating color blindness as it's represented by the three types of cones of the human eye, named after their sensitivity at wavelengths; Long (564–580nm), Medium (534–545nm) and Short (420–440nm). 
   
   
2. Simulation of color blindness by reducing the colors along a dichromatic confusion line, the line parallel to the axis of the missing photoreceptor, to a single color.
   
   
3. Compensation for color blindness by shifting wavelengths away from the portion of the spectrum invisible to the dichromat, towards the visible portion.
   
   
4. Conversion of LMS coordinates back into RGB using the inverse of the RGB->LMS matrix.

LMS daltonization evolution:

1. Analysis of Color Blindness
   Describes how to compensate for color-blindness by calculating the difference of the simulation, and then applying an error modification matrix.
   
   
2. Intelligent modification for the daltonization process of digitized paintings
   Describes how to improve the error modification matrix by modifying it to be adaptive to each image; increasing CPU usage and providing better results.
   
   
3. Intelligent Modification of Colors in Digitized Paintings for Enhancing the Visual Perception of Color-blind Viewers
   Optimizes the previous, reducing computational time through the use of color quantization, and caching.