Meet our unofficial mascot. Refers to image above of golden retriever guide dog.
The human eye contains rods which detects levels of light (dark versus bright) and three kinds of cones which distinguish among the different colors. If none of the cones are functioning (very rare), then a person has grayscale vision. If the cones are semi-functional (also rare), then the person sees colors, but they are muted.
More commonly, a person with color blindness (or “color deficiency”) has a difference in only one of the rods, and it is usually either the red rod or the green rod. The result is that some colors appear to be more similar or are muted. The different type of deficiencies are simulated below. Read more about different type of color vision here and here.
Almost 10% of men are red/green color blind. Despite the fact that red-green contrasts are very distinct for the vast majority of viewers, there are significant number of people for whom this is non-functional.
NOTE: Red-Green color blind people are better able to find camouflaged objects in natural settings. See This Article for more details.
Images Gone Bad: Merry Christmas in Different Color Vision Modes
The image below is “Merry Christmas” in green text on a red background which a color blind person may not be able to read. This is also problematic because it causes a visual vibration for users with normal color vision.
In grayscale, there is only a slight contrast because red and green are of nearly equal brightness.
In Deuterope Mode (Red/Green Color Blindness)
Appears as dark olive on medium olive in normal color vision. Simulation courtesy
Tables Gone Bad: Possible Contrasts
Here are some tables of good vs. not so good contrasts.
These contrast examples are by color scheme type.
Orange vs. Red-Orange
|orange on white
#FF6600 on #FFFFFF
|red-orange on white
#DD3300 on #FFFFFF
4.61:1 (pass at AA)
|Grey Level||WCAG Ratio|
|#000000 (Black)||21 : 1 (pass)|
|#333333||12.63 : 1 (pass)|
|#666666||5.74 : 1 (pass)|
|4.48 : 1 (fail)
OK for large text
|#999999||2.85 :1 (fail)|
|#CCCCCC||1.61 : 1 (fail)|
Forms Gone Bad: Comments
List of Errors
- Page title?
- Vague link text
- Some images missing ALT tags. One has inaccurate ALT tags
- Some headings not H2, but just enlarged text
- Empty H2/H3 tags (Dreamweaver artifact)
- Some text has low contrast and is small (typical of footer text on many sites)
- Some tables lack captions and proper headers
- Some tables have merged cells
- Some forms have unlabeled fields