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