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.
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.