📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Request Demo

Accessibility Tools for Designers and Developers

How to impact people's lives by supporting accessibility in your products

It’s a practice of creating apps, sites, and products usable for everyone, including people with visual, motor, auditory, speech, or cognitive disabilities.

Why should you support accessibility?

In this guide, you’ll find accessibility testing tools, colour contrast checkers and colour blindness simulators, both for designers and developers who work with web and mobile.

“Supporting accessibility could impact someone’s life by making inclusive and easy-to-use products.”

???? Tools for making accessible colours

Contrast – A simple macOS app to check colour contrast ratios and identify accessible colour pairings based on WCAG Guidelines.

Accessible Colour Palette Builder — A great tool for building accessible color palettes. Enter up to 6 colours and see the colour matrix to know which colors can be combined.

ColorBox — A tool that algorithmically builds accessible colour systems. It also sorts by colour, hue, saturation, and luminosity when picking colour combinations.

Contraste — a free app for checking the accessibility of text against the WCAG rules.

Hex Naw — A free color accessibility tool for testing entire color systems for contrast and accessibility. You can test about 12 different colors at the same time.

90 examples — A free collection of accessible colour themes:

Contrast Checker — Another free colour accessibility tool that helps check the contrast between the background of an element and the page itself.

Colorable — A free web-based contrast tool:

Accessibility Tools Colourable

???? Colour blindness simulators

Stark — A paid Sketch plugin that will let you simulate different types of colour blindness.

Color Oracle — A free color blindness simulator. It uses the algorithm for simulating colour vision impairment, so you can see colors as they are seen by colorblind people.

Toptal’s color filter — This online tool lets you test your website and shows you how people with different color blindness will see your pages.

Accessibility Tools Toptal

???? Accessibility testing tools

ANDI — A free accessibility testing tool for web content:

WAVE — A free web accessibility evaluation tool:

Accessibility Tools

AChecker — A free accessibility testing web app, which allows you to check accessibility by web page URL, HTML file or even markup. Also, it enables additional options, such as CSS, HTML validator and more.

A11ygator — A free web tool to analyze websites against WCAG. Also available as a browser extension and as Twitter bot. And to find more accessibility tools, check Awesome Design Tools list.

???? Tools for iOS developers

Accessibility Inspector is a part of Xcode, the main IDE for developing iOS apps. Think of it as a built-in accessibility checker that goes through an iOS application and tries to find accessibility issues. Accessibility Inspector shows parts of an iOS app that can be done better and helps to check iOS assistive technologies.

VoiceOver helps navigate the app screen without seeing it. It also can be used for testing iOS apps accessibility, when you enable it and try to use your app.

VoiceOver gives audible descriptions of what’s on your screen — from battery level, to who’s calling, to which app your finger is on. You can also adjust the speaking rate and pitch to suit your needs. When you touch the screen or drag your finger over it, VoiceOver speaks the name of the item your finger is on, including icons and text. To interact with the item, such as a button or link, or to navigate to another item, use VoiceOver gesturesiPhone User Guide

Accessibility Tools Voice Over

Take a look at Accessibility on iOS section on the Apple site to learn more about assistive technology, which you can support in your iOS app:

Useful Guides & Resources

In this guide, we focused more on tools to help you build products usable for more people rather than accessibility practices (which are equally important). So these guides will teach you to follow best practices:

Great image by Pablo Stanley

With all those tools and knowledge we can create more accessible products, reach a bigger audience and make life better for someone. I think it’s a solid motivation to start supporting accessibility in your design and development.

Originally posted on Lisa’s Medium page.

Swift Learner & Marketer & FlawlessAppio co-founder. Part of CocoaHeadsUA team ????‍♀️ 2017 Product Hunt Maker of the Year Runner Up. Techstars London Alumni.

Related Posts

What is Design Thinking? “Design thinking is a human-centred approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.” — Tim Brown, president and CEO, IDEO Design thinking is a fluid, research and data-driven approach to identifying a problem, the people it affects, exploring solutions… Read More →

This is the second of three articles about our journey growing a culture of accessibility at Trade Me. For tips on getting started, see ‘Growing a culture of accessibility at Trade Me’. After understanding a bit more about our users’ needs and making some progress towards a more inclusive product, we started working towards getting buy-in from our peers. If… Read More →

What is User Experience? User Experience (UX) is the value that you provide to your users when they are using your product. It is a term that is mostly associated with beautiful looking User Interfaces. But, by principle: User Experience Design (UXD or UED) “is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and… Read More →