Earlier today I found myself writing visual design requirements for a new website design that must have a very high standard of web accessibility. As it won’t be me working on the visuals—and by that I mean the Photoshop / Fireworks stage—I felt the need to be very explicit and turned to the Web Content Accessibility Guidelines (WCAG) 2.0 to help.
Use of colour
Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (WCAG 2.0 criterion 1.4.1)
Minimum contrast
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. (WCAG 2.0 criterion 1.4.3)
Visual Presentation
- Blocks of text to be no wider than 80 characters.
- Text is not to be justified (aligned to both left and right margins).
- Line spacing (leading) to be at least space-and-a-half within paragraphs, and paragraph spacing to be at least 1.5 times larger than the line spacing.
Seizures
Web pages will contain no elements that flash more than 3 times in any one second period. (WCAG 2.0 criterion 2.3.2)
Consistent identification
of components that have the same functionality within a set of web pages. (WCAG 2.0 criterion 3.2.4)
Additional requirements
I also added that navigation elements must have a large clickable surface area and specified that contrasting colours must be provided for navigation elements hover / focus / active styles.
