menu

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. That's a document by the the w3c which is the world reference for web accessibility.

    According to this algorithm:

    The contrast ratio (between the two colors) cr should be greater or equal to t.
    For normal accessibility (AA level according to the guidelines), t is 4.5 for normal text and 3 for large text. For enhanced accessibility (AAA level according to the guidelines), t is 7 for normal text and 4.5 for large text.

    A text is considered large if its font-size is at least 18 point, 14 point for a bold font or, for Chinese,Japanese and Korean (CJK) fonts,a font size that would yield an equivalent size.

    For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but you would need to check this for the particular fonts in use. More info can be found in the WCAG definition of large scale text.

    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 RsRGB <=0.03928 then R = RsRGB/12.92 else R = ((RsRGB + 0.055)/1.055) ^2.4
    • if GsRGB <=0.03928 then G = GsRGB/12.92 else G = ((GsRGB + 0.055)/1.055) ^2.4
    • if BsRGB <=0.03928 then B = BsRGB/12.92 else B = ((BsRGB + 0.055)/1.055) ^2.4
    where
    • RsRGB=R8bit/255
    • GsRGB=G8bit/255
    • BsRGB=B8bit/255
    R8bit,G8bit and B8bit 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 (now obsolete)

    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 deficiencies, 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.

After computing the new colors by this algorithm I calculate their cr or their c and d, according to the chosen version of the WCAG.

If all 4 values (normal, deuteranope, protanope and tritanope) are good, the script shows a checkmark.

Please keep in mind that tritanopia is very rare.

Links

For additional information on colorblindness and a test to discover if you're color blind please visit http://colorvisiontesting.com.

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

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