Here’s the only detailed guide to the main tools for creating a competent accessible design! Both newbies and professionals will find something new here. Let’s go!

What Is Accessible Design?

Accessibility in web design, as we define it, makes possible complete product usage by users of all abilities. It ensures a high-quality user experience and affects all the metrics from user satisfaction to conversion rate. In one of our latest interviews, senior designers name accessibility one of the key characteristics of great design.

Accessible Design
ILLUSTRATION OF TUBIK.ARTS

Around 15% of people worldwide live with various disabilities, and they would like to use the Internet and apps as others. That’s why every designer should think about making UX accessible:

  • You may also make someone’s life easier and better.
  • You widen your target audience as well.
  • You improve the quality of the UX for literally every user.

Now let’s find out what accessibility standards there are and how you can test your product for accessibility.

Accessibility Standards

3 standards pursuing the same goal: to make technology accessible to people with various types of disabilities.

  1. Section 508 is a US law that requires all technology developed or used by the government to be accessible for everyone.
  2. ADA (The Americans with Disabilities Act) is another law that prohibits any discrimination against people with disabilities and ensures equal opportunities for such people.
  3. WCAG (The Web Content Accessibility Guidelines) is a series of rules for making websites accessible by all people using any type of device. Its latest version has become an ISO standard.

As you can see, these standards cover all industries (governments, businesses, nonprofit organizations) to make their products and services accessible.

Tools for Accessible Design

Visual Impairments

Colorable

Tired of finding the best combination between text and background? Reverse or randomize it for some inspiration.

Colors

Ready-to-use 90 combinations of colors which you can use in your products.

Scope interface
SCOPE IS THE DISABILITY EQUALITY CHARITY IN ENGLAND AND WALES. THE USERS OF ITS SITE CAN CHANGE THE SITE’S COLOURS, INCREASE THE TEXT SIZE, OR HAVE THE SITE SPOKEN ALOUD

Contrast

macOS tool to help you determine the ratio of contrast in your interface elements. It is based on WCAG and helps you pick the right colors.

Contrast checker

Enter your text object and page background colors — get the result immediately!

Contraste

macOS tool which helps you analyze text accessibility with a combination of colors. Based on WCAG.

Hex Naw

Test your palette online — add up to 12 colors and see the result!

Stark

Plugin for Figma, Sketch, Adobe XD and Google Chrome. Includes contrast checker, colorblind generator, color suggestions, and also 9 color blindness simulations.

Trello interface
TRELLO HAS COLORBLIND FRIENDLY MODE FOR MONOCHROMATIC VISION

Color Safe

Online tool to quickly check the contrast of your text. Choose a background color, font options and see how good your color combination is.

Accessible color palette builder

Online tool for checking out your color set.

Adobe color interface
ADOBE COLOR HAS ALSO COLOR ACCESSIBILITY FEATURE THAT ALLOWS TO CHECK YOUR COLOR PALETTE FOR COLOR BLIND SAFE

Mobility Impairments

Android Switch Access

A tool that allows users to control their smartphones using volume buttons, external keyboards, or switches.

Auditory Impairments

Accessibility checklist

A checklist based on Section 508 and WCAG. There are a LOT of standards, but you can find the guidelines you need by using hashtags.

Apple Accessibility features

iOS and macOS features that will help to test your product’s audio, text, control, and mobility.

Apple Accessibility
APPLE IS THE ABSOLUTE CHAMPION OF ACCESSIBILITY: VOICEOVER, TYPING FEEDBACK, AUDIO DESCRIPTIONS, DISPLAY & TEXT SIZE, MAGNIFIER, REDUCE MOTION AND OTHER FEATURES FOR PEOPLE WITH SPECIAL NEEDS

Cognitive Impairments

The AY11 Project

Community-driven accessibility guideline based on WCAG. Includes all 3 levels of accessibility — A, AA, and AAA. It’s not only about text or contrast but also appearance, animations, and touch interfaces.

Hemingway App

Online checker and app for making your copies easier to read. Hemingway highlights complicated sentences, adverbs, and passive voice. Edit your text, make it simple to read and easy to understand.

PEAT

Photosensitive Epilepsy Analysis Tool helps you analyze videos and animation for potential visual risks.

Useful Resources for Accessibility Testing

Guidelines

Plugins

Tools

Summary

Accessibility standards and tools will allow you to create services for everyone. Make some good UX, help people enjoy your product — and they will love it.