Design for all of your readers.
Hi bloggers! My name’s Kjell Reigstad, and I’m a designer at Automattic. This is part three in my monthly series on “The Principles of Design.” In this series, I share some of the basic tenets of design, and we explore how to apply them to your blog.
Not everyone who visits your blog will experience your design the same way you do. For instance, two colors that seem totally distinct to you may appear quite similar to someone else. A paragraph that looks great to you may be unreadable to others. There are a number of visual impairments that can drastically alter how people see your blog. As designers, it’s important to create a positive experience for all readers. This is the concept of accessible design.
Below, we’ll learn about some common types of vision impairment and review tips for how to design for them.
Low vision and color blindness
Low vision refers to a wide set of issues that aren’t solved by typical glasses, contacts, or eye surgery. According to the World Health Organization, this condition affects approximately 246 million people worldwide. Low vision can make reading, driving, recognizing faces, and differentiating between low-contrast text and colors a challenge. People with this condition may experience things to be hazy or blurry, and can have blind spots in the center or periphery of their vision.
Color blindness is also extremely common. It’s estimated that 1 in 12 men and 1 in 200 women experience some form of it. Color blindness can take on many forms, but two of the most common types are protanopia and deuteranopia. Both of these can make it hard for people to differentiate between reds, oranges, browns, and greens, and sometimes between blues and purples. This graphic aims to illustrate the effect:
Making accessible design choices
You can learn about accessibility on WordPress.com by visiting our Accessibility support page.
On WordPress.com, a great place to start designing for these conditions would be to activate one of our accessibility-ready themes. These themes have all been tested specifically for accessibility. Beyond your theme selection, there are some simple design choices we can make to aid the visually impaired.
Easily readable text
Maintaining high text contrast is probably your most important consideration. You want to make sure people can actually read what you post! If your text sits on a lightly colored background then make sure you’re using a dark text color, and vice versa. Not only does this help your vision-impaired readers, but it makes reading easier for just about everyone.
In our Customizer, if you choose text and background colors that are too close, we’ll automatically apply higher contrast to maintain readability. Give it a try!
In addition to the color of your text, make sure your font size isn’t too tiny. We all know that small text is hard to read, but it can be near-impossible for those with vision impairments. 10pt text is a good absolute minimum, but it doesn’t hurt to go larger than that. Personally, I try not to drop below 14pt for article text.
Not sure how to create headings? Our Visual Editor support page can help!
It also helps to break up your text with headings (like I’m doing in this article!). The larger heading text will help low-vision readers and screen reader technology scan through longer posts.
Clear, descriptive links
This high-contrast rule applies to your links too. Make sure your link color is sufficiently distinguishable from your normal text color. It’s also a great idea to incorporate underlines or italics to distinguish your links from your regular text. Adding another visual cue like this means readers won’t have to rely on color alone to recognize where to click.
Also, make sure that your text links are descriptive. This helps ensure that people using screen reader technology (and anyone who’s just tabbing through the links on your page) can get a sense of where the links lead. Generic text like “Click here” probably doesn’t make sense out of context.
Color blind-friendly palette
Referring to the color wheel examples above may be helpful when choosing your overall palette too. You might want to avoid layering red and green colors, since they may be indistinguishable for some of your color blind readers. Same with purple and blue. If you do use either of those color combinations, it’s a good idea to introduce a hefty amount of light and dark contrast to compensate.
Our Image Settings support page explains how to add alt text and captions.
You may think that blind readers are out of luck when it comes to your photoblog. But that doesn’t have to be the case! Be sure to include captions or alt text for your images so that everyone can get the picture. We’ve shared some great tips for writing captions in Quick Fixes to Images in Your Posts, and David Kennedy has some great tips on writing alt-text on his blog.
Another good image-related tip is to use actual text (as opposed to text inside an image) whenever possible. This helps visually impaired readers who use their browser’s zoom feature to enlarge text. Unfortunately, text in images gets blurry and hard to read when it gets bigger. Actual text does not. In addition, screen reader technology won’t be able to read text within images to blind and low-vision visitors.
There are a number of tools that could be helpful when designing for accessibility. Here are a couple of my favorites:
- Many online tools let you test out color contrast. One my favorites is Contrast Ratio. All you have to do is input the names (or hex values) of your foreground and background colors, and it will let you know how they match up to a common set of accessibility standards.
- Vischeck lets you upload an image to preview how it might look to those with color blindness. Try uploading a screenshot of your site if you’re curious! Alternatively, if you use Photoshop, the app has built-in color blindness filters that you can use to test out your graphics.
Have any other ideas? Feel free to share in the comments!