Accessible design

A Beginner’s Guide to Accessible Website Design

A Beginner’s Guide to Accessible Website Design
By Christine Lhowe | May 14, 2018
Share:

Successful design is much more than simply making something look good—it’s approachable, understandable and usable. In order to design for a wide audience, it’s essential to keep in mind users with varying levels of ability. We recently wrote a blog post about Alternative Text (Alt Text) that spoke about the importance of assigning text descriptions to images in order to help visitors using screen readers who often times have low vision. Alt Text is an important component of accessible website design—designing for the needs of people with disabilities.

Highlighted below are additional guidelines in color and typography to keep in mind when designing for users with vision impairments such as low vision and color blindness. These can and should be used throughout all aspects of design including web design, branding, print design and signage. 

COLOR

Color creates emphasis and evokes emotion. It helps draw attention and direct a user’s eye to certain areas.

Combining Colors

When used properly, color enhances a design and creates visual interest; however, using the wrong colors together can make it very difficult for users with low vision to understand. If colors used near each other are too similar, it becomes difficult to distinguish—leaving the content not readable or messaging not understandable. 

A general guideline to follow, stated by the RGD AccessAbility Handbook, is to ensure that there is at least a 70% difference in color value. This is referred to as using colors together that have high contrast—as opposed to low contrast. For example, reading dark gray text on a black background is difficult to read because certain shades of gray are very similar to black; whereas, reading white text on a black background is easy to read because white and black have high contrast. 

Don’t Rely on Color

Color can be confusing for those who are colorblind. To design accessibly for all levels of color understanding, designers shouldn’t rely solely on color to communicate, but should also make sure to clarify with text.

To give a specific example, one of the most common types of color blindness is red-green color blindness where individuals are either unable to distinguish the difference or aren’t able to see the colors clearly. This becomes an issue in web forms where a common association of green is “success” and red is “error.” The unaffected user will understand whether their input was successful or not, but this isn’t as easy for those who are colorblind. A text labeling system to accompany the colors helps all to understand.

TYPOGRAPHY

Type is used to communicate information, convey personality, and create emphasis. A typeface is a specific design of the alphabet such as Helvetica or Times New Roman. Not all typefaces are created equally.

Typeface Legibility

When designing for users with low vision, it’s not just about using large type. Legible and readable typeface selection is key. Below are a few guidelines to keep in mind when selecting a typeface.

  • Context: Where is the type being used? Is it a headline with two lines of text or multiple paragraphs with many lines of text? A more decorative typeface might be readable in a headline but not as easy to read in paragraphs of text.



  • Stroke Relationship: If there is too much contrast between thick and thin strokes in the letterforms, certain portions of the letters might become difficult to read, especially when used in smaller sized text in body copy. While large stroke variation is okay for headlines, it’s not recommended for body copy.



  • X-Height Size: The x-height is the middle portion of the letterform (the size of the lowercase x). Some typefaces have smaller x-heights than others. The smaller the x-height is, the more difficult it is to read when placed in a large amount of text. Often times it’s not the size of the type that makes something legible, it’s the size of the x-height. Two typefaces of the same size might look like very different sizes because of the x-height.



Text alignment

Text alignment refers to the position of text on a page. When setting type, you want the alignment of your text to enhance a user’s experience. The key here is ease of reading. Similar to typeface selection, some alignments work in some scenarios but not others. Generally, when setting large amounts of copy, left aligned or justified text are best. This allows your user to quickly be able to find the next line of text. While center aligned or right aligned may be great for headlines where people aren’t reading as much, it can become frustrating for people when used for large amounts of text because finding that next line is difficult.

Design should simplify and help improve the quality of life, not complicate it. While this post is speaking specifically about accessibility and designing for people with disabilities, following these guidelines will provide universally good design for all.

Share:
Blog Home Next Article
HEY, YOU! Want to Grow Sales This Year? Contact your marketing A-team and we’ll show you how...