Skip to Demo

Untitled on Purpose: Accessibility Test Page

This page includes basic accessibility errors and can be used to test reporting tools. It mirrors content from the Color Deficient Vision Detail Page

Color Design Gone Bad

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.

Merry Christmas: Why Red Green is Problemetic

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

full color (incorrect - it's grayscale)

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

Merry Christmas, Red/Green Colorblind Mode

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/White

Orange vs. Red-Orange

orange on white
#FF6600 on #FFFFFF

2.94:1 (fail)

red-orange on white
#DD3300 on #FFFFFF

4.61:1 (pass at AA)

Gray/White

Tests on Different Values of Gray on White
Grey Level WCAG Ratio
#000000 (Black) 21 : 1 (pass)
#333333 12.63 : 1 (pass)
#666666 5.74 : 1 (pass)
#777777
#777777 (large)
4.48 : 1 (fail)
OK for large text
#999999 2.85 :1 (fail)
#CCCCCC 1.61 : 1 (fail)

Forms Gone Bad: Comments

Your Name Your E-Mail Your Affiliation

 

What are your comments?

Try this Comment Form




 

List of Errors

  1. Page title?
  2. Vague link text
  3. Some images missing ALT tags. One has inaccurate ALT tags
  4. Some headings not H2, but just enlarged text
  5. Empty H2 tag (Dreamweaver artifact)
  6. Some text has low contrast and is small (typical of footer text on many sites)
  7. Some tables lack captions and proper headers
  8. Some forms have unlabeled fields

 

 

Top of Page