Booklet

author

Hack University

Development

How to Optimize for Accessibility in an App

How to Optimize for Accessibility in an App

What is accessibility?

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

Why should we care?

- We can impact someone's life by making inclusive & easy to use products.

- One billion people have disabilities. So, our products can be used by them.

- Having better accessibility support leads to better UX and cleaner code.

Here are great tools for checking color contrast and simulating color blindness

Making accessible colors

Contrast https://usecontrast.com

This is a simple macOS app to check color contrast ratios and identify accessible color pairings based on WCAG Guidelines

Hex Naw https://hexnaw.com

A free online tool for testing entire color systems for contrast and accessibility. We can test about 12 different colors at the same time.

Color blindness simulators

Stark https://getstark.co

A paid Sketch plugin that will let us simulate different types of color blindness to ensure an inclusive product development.

Color Filter https://www.toptal.com/designers/colorfilter

An online tool by Toptal that lets us test our websites according to different types of color blindnesses. We first enter a URL and then select the type of color blindness to simulate.

Next post...

We'll explain more important terms that everyone needs to know for accessibility. We'll also walk through other powerful accessibility testing tools commonly used by designers and developers around the globe.

So be on the lookout!

Join our tech and design community! @hackuniversity

More booklets by Hack University

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets