Skip to content

Design Accessibly Resources

Jump to bottom
Cathy O'Connor edited this page Dec 13, 2018 · 27 revisions

List of resources and references used in my design accessibly talks.

Check Web Pages

For accessibility issues that can be detected in the code, including color contrast:

  • Google dev tool: Lighthouse plugin for Chrome includes accessibility tests.
  • WebAIM Accessibility evaluation tool: WAVE, Chrome plugin. View the contrast tab. Shows only contrast issues. Includes color contrast checker you can use to find a combination of colors that does pass.

Check Color codes

When creating your visual UI style guideline, check the color codes (in hexadecimal) for text on a background and make sure they pass the minimum WCAG2.0 AA guideline:

Simulators

Show how differently sighted individuals may be viewing your web or mobile apps.

Color vision deficiency simulators:

  • Color therapy glasses which come in many colors try: red, or purple lens.

  • Red-blue(cyan) anaglyph 3D paper glasses. Close one eye.

  • Answer Buzzers, Learning Resources. Brightly colored buttons that have different sounds. (Button Colors: blue orange, green magenta) can be used in demos for color vision deficiencies with goggles or app simulators.

Mobile App simulators (free)

Color Vision Simulator (CVSimulator) by Kazunori Asada shows deuteranopia, protanopia, and tritanopia:

Accessibility Guidelines

Other resources - Videos

Publications

Clone this wiki locally