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

    According to this algorithm:

    The contrast ratio between the two colors cr should be greater than 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 better 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 are roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming 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 for calculating 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 as follows:
    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 achieve a good result c should be greater than 500 and d greater than 125.

Color deficiency simulation

To simulate color deficiencies, I just copied the source code of a gimp (an image manipulation program) module and converted 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 acknowledgements for this algorithm are at the end of the page.

After obtaining the new colors by this algorithm I calculate their cr value or their c and d values, depending on the chosen version of the WCAG.

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

Please keep in mind that tritanopia is very rare.

Links

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

Acknowledgments

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 suggestions for improving the page, javascript code, layout or anything, just mail me at [email protected]. This is an open project and I would be glad to improve it!