# The Power of Accessibility and Inclusivity in Design

- Link: https://chatterblast.com/blog/the-power-of-accessibility-and-inclusivity-in-design/
- Published: 2021-09-17T15:13:07-04:00
- Author: Cailin Giles

Inclusive design is something that UX and UI designers are trained to pay attention
to. After all, having an app that works for everyone is necessary for a successful
product. Other kinds of designers, though — whether they focus on print or digital—
don’t always keep accessibility at the forefront of their work. 

[**Accessible design**,** usable design** and **inclusive (universal) design**](https://www.washington.edu/doit/what-difference-between-accessible-usable-and-universal-design)
are three different design concepts. Accessible design focuses on making the needs
of people with disabilities the priority. Usable design is important for creating
products that are easy to use. Inclusive design is designing something that is able
to be used by everyone, with limited need for adaptation.

To start, I want to talk about color. Designers _love_ color. In fact, playing around
with color is one of my favorite parts of designing or illustrating. But sometimes,
the prettiest palette in my eyes is a disastrous headache for someone else. [300 million people](https://www.clintoneye.com/color-blindness.html#:~:text=There%20are%20an%20estimated%20300,are%20color%20blind%20(0.5%25).)
in the world experience some type of color blindness. Being color blind doesn’t 
mean you can’t see color, it just means that you have a decreased ability to see
the differences in color.

For context, here are two images. The first is an image edited for no visual impairments.
The second image has been edited to show what someone with [Protanopia](https://www.britannica.com/science/protanopia)(
unable to differentiate between red and green) might see.

[[

Using [Adobe’s Color Blind Safe](https://color.adobe.com/create/color-accessibility)
tool, here’s how ChatterBlast’s primary color palette fares on an accessibility 
level: 

[[

Our color palette is color blind-safe!

Using a color contrast ratio of **4.5: 1** for text or graphic elements is the minimum
[according to the Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
This means that you could have a higher contrast between the text color and background
color, but anything below would not be considered accessible. Adobe has a great 
new [tool](https://color.adobe.com/create/color-contrast-analyzer) for identifying
a solid color contrast for design. 

[[

Here’s an example of what different type of contrast ratios look like.

Another important tip for designing is to not use color as the sole indicator for
conveying meaning. This becomes increasingly clear in infographics that haven’t 
been designed with accessibility in mind. A good practice is to add some sort of
pattern or symbol to go along with the color. So even if the color is important 
to the story, there is a second indicator to differentiate between the visuals on
the screen. 

[**Typography**](https://chatterblast.com/letters-are-our-friends-with-their-own-personalities/)
and the way we use text is another vital part of design. It’s important to remember
that not everyone will have the same experience looking at a font. **Twitter** recently
[designed a new typeface](https://slate.com/technology/2021/08/twitter-font-redesign-chirp-franklin-gothic.html#:~:text=Others%20took%20issue%20with%20the,users%20are%20complaining%20of%20headaches.)
for their app, believing that it was designed to be universally accessible. The 
entire redesign was put in place to increase inclusivity. They upped the contrast
on many visual elements, changed the color themes for both day and night modes, 
and softened some of the UI motions. But still, many users claimed the new font 
gave them headaches.

> Just FYI, if you truly want to be accessible, you could design the app to give
> users the option to change the contrast, font, size etc. to whatever works best
> for them. Also maybe you could actually have a wide range of disabled people test
> these features before implementing them
> — Sarah⁷ (@LadyKnightEllen) [August 13, 2021](https://twitter.com/LadyKnightEllen/status/1426264411644235782?ref_src=twsrc%5Etfw)

> The new typeface worsens my astigmatism. I cannot read without having a headache.
> My systems typeface is tailored for my eyesight.
> — P’Sot (@_psot) [August 11, 2021](https://twitter.com/_psot/status/1425521778839887872?ref_src=twsrc%5Etfw)

The problem with this is that what is accessible for one person, might not be the
same for another. While someone might need higher contrasts in colors due to vision
impairments, someone else might have sensitivities that are affected by such. I 
think for an app as large as Twitter, their next step would be to develop options
for their users to decide what color profiles work best for them.

 https://twitter.com/OuchMouse8/status/1426296515459440647?s=20

The loud discourse has since quieted, but those who are negatively affected by the
redesign are probably still quietly suffering. 

If you’re interested in learning even more about accessibility and incorporating
more inclusive practices into your design, here’s a list of references and tools
for a smoother, more accessible experience:

 * [Google’s Material Design System](https://material.io/design/usability/accessibility.html)
 * [Microsoft’s Inclusive Design Manual](https://www.microsoft.com/design/inclusive/)
 * [Google Color Tool](https://material.io/resources/color/#!/?view.left=1&view.right=0)
 * [Adobe Color Accessibility Tools](https://color.adobe.com/create/color-accessibility)
 * [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/)
 * [Google’s Inclusive Marketing Guide](https://all-in.withgoogle.com/?_ga=2.260659912.411524586.1631537220-609778463.1631537220)
 * [Ashley Bischoff’s Presentation on Accessible Images](http://www.friendlyediting.com/assets/altrock/index.html#cover)
 * [Hemingway Editor for Readability](https://hemingwayapp.com/)
 * [Contrast Checker](https://contrastchecker.com/)
 * [Vox Accessibility Checklist](http://accessibility.voxmedia.com/#designers)