Web Accessibility
Policy & Procedures
Tools & Resources
Questions?
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 |
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. |
|

