• Calendar
  • Maps


Using Color

Individuals with visual disabilities have difficulty seeing content that does not create a significant contrast with its background. Blind users are not able to notice different colors used on a web page.

Any colors chosen for text, icons or other symbols should contrast greatly with the background. Color should never be used as the sole means of representing information.

Avoid referring to colors, sizes, shapes and other physical traits as the only method of description. For example, don't say "Click the big, round, blue button," as users with visual disabilities will not know which button this refers to.

Examples

Color Contrast

Text 18pts or lower should have a minimum color contrast ratio of 4.5:1.

Great Color Contrast (21:1)

Adequate Color Contrast (4.5:1)

Insufficient Color Contrast (1.87:1)

Text 18pts or higher should have a minimum color contrast ratio of 3:1.

Great Color Contrast (21:1)

Adequate Color Contrast(3:1)

Insufficient Color Contrast (1.24:1)

Color Coding

Information should never be conveyed only using color. Any information denoted using color should also be denoted using an alternative, accessible method.

For example, the following list shows names of people invited to a party. Those who cannot attend are marked in red. In this case, you will need to include a text description of the distinction.

  • Name 1
  • Name 2 (not attending)
  • Name 3
  • Name 4
  • Name 5 (not attending)

Resources

Benefits

These measures allow individuals with visual disabilities to understand content presented visually, as well as users of assistive technology to interpret information communicated via the use of color.

Best Practices

  • Any text smaller than 18 pts must have a minimum color-contrast ratio of 4.5:1.
  • Verify that any text larger than 18 pts has a ratio of 3:1.
  • Confirm any information conveyed through the use of color is also communicated via other accessible means.

Checking for Correct Usage

  • Use the WAVE tool to make sure content meets the minimum color-contrast requirements.
  • Turn off all style sheets (CSS).
    • If all of the information remains clear, no information is conveyed solely through the use of color.