Wednesday, August 3, 2011

Color contrast


Although many color design rules originated to support visual impairments, they are beneficial for all users. Reading is not an innate ability; we do not learn to read simply by watching others read. It requires effortful study and attention. Reading can be one of the most cognitive recourse intensive things a user does on a website. For this reason, it is vital that we as UX designers, facilitate easy reading for all users. This will ultimately help users discern text, paragraphs, and text bodies much more efficiently. Background / foreground Color testing is often judged on two primary attributes, the contrast of the colors  and the brightness of the colors. Equations and standards for meeting accessibility requirements have been developed by W3C http://www.w3.org/TR/WCAG10-CSS-TECHS/. These standards provide detailed calculations for determining color contrast effectiveness. These formulas are as follows:


 Brightness Difference:
            The brightness difference is found by subtracting the figure index from the ground. The brightness index is found by multiplying each RGB value by a predefined partition of 1000. The values are then summed together and then the total is devided by 1000. The value for Red is 299, the value for Green is 587, and the value for blue is 114. So the completed equation would be: (299R + 587G + 114B)/1000. Next you subtract the index of the 
figure from the background and you have the difference.


Color Difference
            Color difference is very similar, however, the index is simply a summation of all RGB values and the difference is found by subtracting one from the other.
The range for color brightness difference is 125. The range for color difference is 500.

Many calculators have been created to do this for you.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.