Don't rely on color alone.
If you are using images that provide important information (not just design elements), insure that there is sufficient contrast to allow the visitor to discern that information. Reveal how your images may appear to users with a variety of color blindness conditions.
There are online tools and recommendations to help web developers and designers to simulate various vision problems and to assist them with making design decisions below:
Color contrast
The difference and contrast in brightness between foreground and background colors should meet the standard recommended by the W3C.
"Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.
Color brightness is determined by the following formula: ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.
Color difference is determined by the following formula: (maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))
The range for color brightness difference is 125. The range for color difference is 500. (This is a suggested algorithm that is still open to change.)"
Source: http://www.w3.org/TR/AERT#color-contrast
Color Check:
Color Check determines the color difference and contrast between any two colors. You can check your own color combination by specifying the hexadecimal values of a foreground and a background color below. You can check if your color combination passes Checkpoint 2.2. For example, color combination of #ffffff and #cccccc does not pass Checkpoint 2.2 for the following reasons:
Brightness:
The difference in brightness between your foreground and background colors is 51 and is therefore insufficient. The W3C recommends a standard of 125 or greater.
Contrast:
The contrast between your foreground and background colors is 153 and is therefore insufficient. The W3C recommends a standard of 500 or greater.
Source: http://www.etre.com/tools/colourcheck/
Colorblind Web Page Filter -- See your web site through colorblind eyes with the colorblind web page filter.
To show obvious differences in colors, please check how our images from "red flowers" category will be viewed by someone with color blindness.
 This is how people with normal vision see the page |  protanopia (red/green color blindness; no red cones). It is difficult to distinguish colors between red and green with similar intensity (brightness). "dark red" appears almost as "black." |
 deutanopia (red/green color blindness; no green cones). Difficult to distinguish colors between red and green with similar intensity (brightness). |  tritanopia (blue/yellow color blindness; no blue cones). The distinction between blue and green is more difficult. |
Source: http://colorfilter.wickline.org/
Try Daltonize on Your Image Files
Images can be Daltonized before printing. Print applications where legibility is essential (for example, public safety documents, maps, and technical instructions) can all be made more legible for color-blind users....
http://www.vischeck.com/daltonize/runDaltonize.php
Images that are friendly to color blind people
Set of colors that is unambiguous both to colorblinds and non-colorblinds
| Black (0,0,0) | - Avoid the situation where important information is conveyed only in the form of color.
- Use magenta instead of red.
- avoid using red characters on black backgrounds, including blackboards
- For red, vermilion is used since it is recognizable also to protanopes.
- Colors between yellow and green are all avoided, since they are indistinguishable with yellow and orange.
- For green, bluish green is chosen so that it won't be confused with red or brown.
- Since violet is close to blue and appear the same to colorblinds, reddish purple is chosen.
- Between vermilion and yellow, three colors with different apparent intensity is selected.
- Sky blue and blue are chosen so that they are distinguishable with there difference in brightness and saturation.
- Even for non-coloblinds, thin lines and small characters in blue and yellow are hard read. For thin lines and small objects, use darker blue and orange is preferable to sky blue and yellow.
When combining colors from this pallet, - Use "warm" and "cool" colors alternatively.
- When using two warm colors or two cool colors, put distinct differences in brightness or saturation.
- Avoid combination of colors with low saturation or low brightness.
|
| Orange (230,159,0) |
| Sky Blue (86,180,233) |
| Bluish Green (0,158,115) |
| Yellow (240,228,65) |
| Blue (0,114,176) |
| Vermilion (213,94,0) |
| Reddish Purple(204,121,167) |
Source: http://jfly.iam.u-tokyo.ac.jp/html/color_blind/index.html
Illustrations by FeaturePics Authors that contain the recommended colors. |
|