Accessibility Best Practices: Color and Text

Reading Time: 3 minutes

Last post, we talked about the importance of captions, best practices for graphics, and tips for writing good alt text. Today, we’re looking at two other aspects of accessibility and usability – using color properly and working with text.  

Color 

Using color can be a powerful way to accentuate the information you’re presenting.  

But color shouldn’t be used as the only way to draw attention to or distinguish items. It’s easy to put warnings or urgent information in red, but that kind of visual indicator just doesn’t work for everyone. People who are red/green colorblind, for example, can have trouble distinguishing between and identifying those colors – they can appear simply as a shade of grey. Draw attention to the text in a different way – put the important information on its own line, use a symbol with it, or consider making the text bold (but avoid all caps because that’s considered yelling!).  

For example, the game Among Us has a task with four different colors of wires that players must connect to the matching terminal. When this game was initially released, it relied only on color as the identifying feature. However, the developers later updated the game to include unique symbols for each wire to provide another method for matching.  

We talked about the content of graphics last time, so we’ll look at the most important thing to consider for color here – having proper contrast. Having adequate contrast makes your content easy-to-read, and web accessibility guidelines make ensuring this simple. My favorite tool for checking this is the WebAIM contrast checker where you can input both your foreground and background colors to ensure they have enough contrast. If they don’t, you can tweak your colors on this webpage to find something that works! 

Text 

We’ll shift our focus over to text to round out this series. And text is where the idea that accessibility is usability and usability is accessibility is very clear.  

Chunking 

There’s a lot of things you can do to make your content easy-to-read, but the simplest is chunking, or using headings, lists, and paragraph breaks to separate content into sections.  

Consider this post. Its content is separated by headings, paragraphs are short, and important words or pieces of information are identified through styling.  

In fact, that last sentence could be presented as a list to make it even easier to understand quickly.  

Consider this post. Its content is:  

1. Separated by headings 

2. Broken into short paragraphs 

3. Highlighted through styling important words or pieces of information 

Descriptive Link Text 

Our last area for today is best practices for hyperlinks.  

It’s easy to just toss a link into content, but we want to avoid two things – “ugly” links and blind linking.  

Both are avoided for similar reasons. Ugly links are straight-up links of the entire URL (like you might find in a bibliography – but that’s an appropriate place to have them!). Blind links are when you use a phrase like “click here” as your link text.  

In both of these circumstances, it’s not easy for the user to know where they’re headed because the info is either hard-to-find in the URL or completely missing from the text.  

Let’s check out a couple examples: 

• “Ugly” link – Check out more information about accessibility at https://ctl.cedarville.edu/wp/tag/accessibility/. 
• Blind link – Check out more information about accessibility here.  
• Good link – Check out more information about accessibility in the CTL blog’s accessibility tag. 

Using proper link text is one of the simplest things you can do to improve your text! Users will be able to quickly understand exactly where each link is taking them and why.  

And this concludes our mini-series on accessibility at this time. We’ll be doing more in-depth dives into accessibility and usability topics in the future (including frameworks like Universal Design for Learning), so if there’s anything you want to hear about, leave us a comment below or email us at ctl@cedarville.edu. Please also don’t hesitate to contact us through either method if you have questions!  

Want to never miss a post? Subscribe here!