Determining Color Readability and Viability

If you are a developer (like me), have you ever wondered how to determine if the color set you are using on your web page or in your software is a good choice?  After all, there are lots of things to consider.  Color makes what you present “eye catching”, and can boost the enthusiasm of your target audience.  It can attract attention to an important area, or help distinguish regions of information.

On the downside, the wrong color choices can make your information displeasing, hard to read, and actually discourage readers.  Also, colors which may look really good, can be near impossible to distinguish by individuals with varying degrees of colorblindness.

So, how do we make sure the colors we have chosen do not do the exact opposite of what we want?

The answer, at least for text, is some math.  There are 2 methods to test a color combination, the first being the older AERT algorithms proposed by W3C, and the second being the Luminosity Contrast Ration adopted by WCAG 2.0.

AERT Suggested Algorithm

The AERT suggested algorithm is a set of 2 formulas used to derive a Brightness value and Color Difference value.  These two values can be used to determine the viability of the color and to ensure the colors chosen are both “pleasing”, as well as distinguishable regardless of ability or inability to see any given color.  The formulas are not perfect, but are very simple to use, and produce good results.

Before using the formulas, break down the colors into their red, blue, and green decimal values.  There are a number of ways to do this, including several online tools.  Then just plug your numbers in, and check the results.  For these formulas, we will use FG for foreground colors and BG for background colors.

Brightness Difference Formula:
FGResult = (( FGred x 299) + (FGgreen x 587) + (FGblue x 114)) / 1000
BGResult = ((BGred x 299) + (BGgreen x 587) + (BGblue x 114)) / 1000
BrightResult = AbsoluteValue(FGResult – BGResult)

If BrightResult is greater than 125, a good brightness difference has been achieved.

Color Difference Formula:
RedResult = AbsoluteValue(FGred – BGred)
GreenResult = AbsoluteValue(FGred – BGred)
BlueResult = AbsoluteValue(FGred – BGred)
DifferenceResult = RedResult + GreenResult + BlueResult

If DifferenceResult is greater than 500, a good color difference has been achieved.

If both contrast and color difference return good values, then the color choices are good ones.

If the end users are allowed to pick colors, these formulas can be used to determine the user has made good choices, or warn them if they make poor choices.

Luminosity Contrast Ratio

The Luminosity Contrast Ration algorithm has been adopted by WCAG 2.0.  Success Criterion 1.4.3 requires that the visual presentation of text and images of text has a contrast ration of at least 4.5:1.  This algorithm is a little more complicated to use, however, it produces much more accurate results.

Just like the AERT formulas, begin by converting the colors into their red, blue, and green decimal values.  Then, just plug in your numbers into the formulas.

FGLUred = (FGred / 255)^2.2
FGLUgreen = (FGgreen / 255)^2.2
FGLUblue = (FGblue / 255)^2.2
FGLuminosity = (FGLUred x .2126) + (FGLUgreen x .7152) + (FGLUblue x .0722) + (.05)
BGLUred = (BGred / 255)^2.2
BGLUgreen = (BGgreen / 255)^2.2
BGLUblue = (BGblue / 255)^2.2
BGLuminosity = (BGLUred x .2126) + (FGLUgreen x .7152) + (FGLUblue x .0722) + (.05)

If FGLuminosity > BGLuminosity,

Contrast Ratio = FGLuminosity / BGLuminosity

Otherwise,

Contrast Ratio = BGLuminosity / FGLuminosity

If the resulting Contrast Ratio is greater than 4.5 then a good Luminosity Contrast has been achieved.

Using the Algorithms

Often either method by itself can verify the color choices being considered, however, often both methods are used in conjunction to ensure the best possible and most accurate results.  Verifying both values from the AERT method and testing results from the Luminosity Contrast Ratio algorithm will verify that the colors will be readable as well as good to look at.

Reference Material:
http://www.w3.org/TR/2005/WD-WCAG20-20051123/appendixA.html#luminosity-contrastdef
http://www.w3.org/TR/WCAG20/
http://juicystudio.com/article/luminosity-contrast-ratio-main-colour-contrast-analyser.php
http://tools.cactusflower.org/analyzer/
http://stackoverflow.com/questions/301869/how-to-find-good-looking-font-color-if-background-color-is-known