Section 508 Compliance

HTML Coding Tutorial

Use Color for Design, not Context

(c): Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
Explanation: Good web design may use color and other visual markers to help users navigate the site. For example, visited links may be a different color, font, or size to help users remember where they have been in the site.
Importance: Using colors, especially for directions, causes multiple problems for users who are blind, color blind, or visually impaired.

Bad Examples

1.  Do not use colors to denote importance
Fields in red are required:

First Name
Last name
Address
City
Zip
Looking at these instructions, if a user cannot see or is color blind, they will not know what fields are required.
2.  Do not use colors as directions
Click the green button to continue
Green button   Red button
Looking at these instructions, if a user cannot see or is color blind, they will not know what to do to continue.

Good Examples

1.  Use markups to denote importance
Fields with '*' are required:

First Name*
Last name*
Address
City
Zip
Looking at these instructions, if a user cannot see or is color blind, they will still know what fields are required.
2.  Use words as directions
Click "Next" to continue
 
Looking at these instructions, if a user cannot see or is color blind, they will still know what to do to continue.

Do-It-Yourself Fixes

There are two simple ways of testing a web page to determine if this requirement is being met: by either viewing the page on a black and white monitor, or by printing it out on a black and white printer. Both methods will quickly show if the removal of color affects the usability of the page.

If the removal of color affects the page, you can go in and add/edit the code until the page is usable without color.