In our previous post, we covered the high-level guidelines that must be followed to conform with the Web Content Accessibility Guidelines 2.0 AA (WCAG 2.0 AA). This post focuses on design best practices and ADA compliance.
Some design guidelines to follow for modern web accessibility include:
- Take into account Color Blindness
- Design page text with sufficient contrast. Ensure the contrast ratio between text and background is at least 4.5:1.
- Do not use images of text.
- Keep animations simple.
- Touch targets must be large enough for the user to interact with.
Color Blindness
Color Blindness is the difficulty distinguishing between certain color combinations. The most common is red-green color blindness. The table on below shows five example color pairs of confusion.
Source: http://www.color-blindness.com/red-green-color-blindness/
As severity and type of color blindness can be very different, such color pairs are quite individual. When designing your website, ensure that colors are not your only method of conveying important information. For example, do not use red text to denote errors in forms.
Color Contrast
To comply with WCAG 2.0 AA level requirements, the color contrast ratio must be 4.5:1 for normal text (less than 18 point or 14 point bold) and a contrast ratio of 3:1 for large text (at least 18 point or 14 point bold). Paciello Group has a useful Colour Contrast Tool that helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.
Images of Text
Do not use images of text. Images are more likely to distort and pixelate when resized. It is good design best practice to style text with CSS rather than using image-based text presentation.
Keep Animations Simple
Allow the user to skip/pause the animations and avoid excessive use of animations and parallax. Make sure your video, animation, or other multimedia product does not contain flashing, strobing, or flickering elements as they can cause some people to experience seizures, dizziness, and nausea. You can use the Photosensitive Epilepsy Analysis Tool (PEAT) Tool to see if your content falls in these ranges.
Touch Targets
Content touch targets must be large enough to read and have a large enough interactive target area to tap comfortably with one finger. In addition, you should also ensure there is enough space between touch targets so that the user does not interact with the wrong element.