Designing for Accessibility

Great web accessibility starts in the design. The designers focus should be the successful readability of designs. Keep in mind the challenges of visually disabled users – ranging from those that are color blind to the fully blind.

 

The two most important keys to designing for accessibility are:

  1. A color contrast ratio that passes AA guidelines. Test your contrast ratio using the WebAim Color Contrast Checker tool. Smaller text needs a lot of contrast, while larger headings can tolerate a wider range of colors and backgrounds.
  2. Using more than just color to convey important information. Preview your designs using the built in Adobe Photoshop CC Color Blind Simulator tool. Ensure intent and hierarchy of information are still being conveyed properly even with color distortion.
Quick tips:

  • Provide Good Contrast. Always check your colors with a color contrast tool. Be especially careful with light shades of gray, orange and yellow.
  • Watch the use of CAPS. All caps can be incorrectly read by screen readers and are difficult to read.
  • Use an adequate font size. Web accessibility standards define large text as 14pt bold or larger, or 18pt regular or larger.

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.