Algorithms

Contrast ratio or Contrast / Brightness difference

You can choose between two algorithms to determine if the colors are good for accessibility.

1. The first is based on the Web content accessibility guidelines (WCAG) version 2 by the w3c.

   According to this algorithm:

   The contrast ratio (between the two colors) cr should be greater or equal to 5. The formula to determine cr is:
   cr=(L1+0.05) /(L2+0.05) where
   L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color.

   The relative luminance L is calculated in this way:
   L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are

   • if R_sRGB <=0.03928 then R = R_sRGB/12.92 else R = ((R_sRGB+0.55)/1.055) ^2.4
   • if G_sRGB <=0.03928 then G = G_sRGB/12.92 else G = ((G_sRGB+0.55)/1.055) ^2.4
   • if B_sRGB <=0.03928 then B = B_sRGB/12.92 else B = ((B_sRGB+0.55)/1.055) ^2.4
   where
   • R_sRGB=R_8bit/255
   • G_sRGB=G_8bit/255
   • B_sRGB=B_8bit/255
   R_8bit,G_8bit and B_8bit are the red,green and blue component of a color (from 0 to 255) and ^ is the exponentiation operator.

2. The second is based on the Web content accessibility guidelines (WCAG) version 1

   According to this algorithm:

   If the RGB components of the first color are r1,g1,b1 and of the second color are r2,g2,b2 then:

   contrast c

   c=abs(r1-r2)+abs(g1-g2)+abs(b1-b2)

   brightness difference d

   bright1=(299*r1+587*g1+114*b1)/1000
   bright2=(299*r2+587*g2+114*b2)/1000
   d=abs(bright1-bright2)

   To get a good result c should be greater than 500 and d greater than 125.

Color deficiency simulation

To simulate the color deficiences, I just copied the source code of the gimp (an image manipulation program) module and ported it to javascript.

The gimp version I used is 2.3 and the algorithm is based on an article by Hans Brettel, Francoise Vienot and John Mollon in the Journal of the Optical Society of America V14(10), pg 2647. (See http://vischeck.com/ for more info). The credits for this algorithm are at the end of the page.

Javascript isn't the optimum for the number crunching the algorithm requires, so the results aren't identical to the ones in gimp.

Anyway they're are not too bad and almost always they look very similar.

After computing the new colors by this algorithm I calculate c and d for them.

If all 4 values (normal,deuteranope,protanope and tritanope) are good, the script displays OK!.

Keep in mind that tritanopia is very rare.

That's all. If you have any proposal to improve the page, the javascript code , the layout or whatever, just mail me at gmazzocato@gmail.com. This is an open project and I would be glad to improve it!

Credits

The authors of the gimp module are:

• Michael Natterer mitch[at]gimp.org
• Sven Neumann sven[at]gimp.org
• Robert Dougherty bob[at]vischeck.com
• Alex Wade alex[at]vischeck.com

Go to the accessibility color wheel