accessible graphics

5 Immediate Fixes for Accessible Graphics

Here are 5 fixes to make your graphics more accessible.
In: accessible graphics, Accessibility

An accessible graphic is one that can be understood by its viewer.

As the folks at Critical Design Lab say, access is a practice. No graphic will ever be fully accessible to everyone everywhere, but you can take steps today to move closer.

Below I've detailed five fixes that you can make for your graphics. I promise I did not know any of these when I started. I detailed part of my own journey in this Instagram post.

Contrast

Contrast often makes the difference between a readable graphic and one that is not. But look around the internet and high contrast is not always present.

Personally, I thought I could eye-ball contrast. That I'd know what's readable just by looking at it. I was wrong. When I started using Coolers' Contrast Checker, I realized just how off I was.

Of 24 possible combinations of colors, only 8 have enough contrast to use regularly. After I did this exercise, I changed my colors to ones I could use differently.

Six columns indicate which colors work and which ones don't together.
This was my color contrast check of my brand colors.

Tools:

  • Color Contrast Checker. I'm sure there are others, but I love this tool from Coolers.
  • Web Accessibility Evaluation Tool. WAVE is a plugin for your web browser. It will note any issues both with structure and aesthetics.

To Do:

  • Check your brand colors. Or common colors if you don't have brand colors. Run the contrast checker on each of them. What works together? Make a cheat sheet for yourself.

Font Choice & Size

We choose between hundreds of fonts regularly. (Ask me how long this takes me). But many are difficult to read. Fancy script fonts are often unreadable.

A simple test of readability is to look at the font with the following characters: eoIl1. That's a lower case e, lower case 0, upper case I, lower case l, and the number 1. Look at how similar (or different) the e and o look. Can you tell them apart? What about the I, l, and 1? Below I've added some options.

Look at the images below. They all say future proof skills lab. Which ones are readable and which ones are not?

Part of the work of accessibility for me is retraining my eye around what I like. I love the look of a script font, but I love being understood more.

Additionally, be cautious of the font-weight you use. Super thin type is all the rage from a design standpoint but can be very hard to discern.

Justification & Capitalization

How text is justified (which side It lines up to) impacts readability. For blocks of text, left justification is easier to read than full (flush to both sides), right, or center justification.

When we read, we take in the shapes of words. When EVERYTHING IS CAPITALIZED we're creating rectangles Instead of shapes that can be read. If you look at my feed, this is my biggest weakness.

Below you'll see the original graphic I created with a quote from Martin Luther King, Jr.'s "Letter from a Birmingham Jail" and the fix taking justification and capitalization into account. Also note, the gray isn't high enough contrast either.

Plain Language

Kelsie Acton wrote a piece On Plain Language that is one of my most recommended articles. She details the following steps to make your language more accessible:

  • Use the most common vocabulary possible so that readers aren’t stopped by unfamiliar words
  • Use active voice, so it is clear who is doing what
  • Use short sentences
  • Use headings, lists, bullet points, and white space to make information clearer
  • Use definitions to introduce readers to complicated vocabulary

Sometimes, I want to be clever more than I want to be clear. But then I'm sacrificing the opportunity to be understood.

Image Descriptions

Almost everything I know about image descriptions I learned from @higher_priestess on Instagram.

Image descriptions are really important on Instagram in particular. Alt-text is very short and often graphics are loaded with text.

Image descriptions can be long or short. It depends on your preference and capacity. If there is text in your image, be sure to repeat it in the caption. This way screen reading software can tell what you're saying.

This post is particularly helpful when I'm low on capacity: Tips for adding Image Descriptions when you are disabled / low spoons by @higher_priestess


Remember: access is a practice. You don't have to get all the way there in one sitting. And "all the way there" is not possible in real life. Take small steps.

Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to Future Proof Skills Lab.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.