Accessible Visual Design

We’ve all encountered bad visual design in an online course,  which was a problem, because the awful design choices amounted to one thing: cognitive overload that created barriers to learning. To avoid cognitive overload and facilitate learning, a course’s visual design elements must anticipate the needs of disabled learners and be accessible. Three big concerns for accessible visual design are typography, color contrast, and composition. Fortunately, it isn’t difficult to make these three elements accessible, and thereby open up your course to a wider range of learners. 

 Serif fonts have a horizontal stroke on each letter (a serif). They are easy to read and great for print, and they look formal and traditional The most well-known example of a serif font is Times New Roman, but Cambria, Garamond, and Georgia are also serif fonts. 

"Sans"  is French for “without,” so sans serif fonts lack the serif on each letter. Sans serif fonts are widely popular for web design and e-learning. They provide a smooth reading experience and present well in digital media. The most well-known and used sans serif font is Helvetica, but other commonly used sans serif fonts are Arial, Calibri, and Verdana. Sans serif fonts such as Lexie Readable, Read Regular, and Tiresias were designed specifically for dyslexic learners. 

Script fonts look like handwriting. They have long tails and are used for decorative text such as invitations and thank-you notes. Script fonts should be used sparingly because they can be difficult to read. On the other hand, they add a touch of decoration and are great in small doses. Common script fonts are Pacifico, Comic Sans, Lobster, and Corsiva.

Display fonts are very distinctive and create a very specific feeling or mood. They are great for titles or decorative text elements, but as they can also be difficult to read, they should be used on occasion to spice up your titles and word graphics. Examples of display fonts include Impact, Ribeye Marrow, Chango, and Algerian. 

Hierarchy is the combination of fonts and spacing that tells the reader which information they should focus on in a given block of text. Title, heading, subheading, and paragraph font choices should be made with the end goal of drawing the reader’s attention to the important content and helping them organize the information correctly as they take it in. Make sure to limit the number of fonts that you use within a page to no more than three, because perceiving and deciphering new fonts creates cognitive overload. Also be sure that you use contrasting fonts types, such as a display font, a serif font, and a sans serif font

There is no *best font* for accessibility, but there are rules of thumb to use when choosing an accessible font:

1. Keep it simple. Fonts with simple shapes and patterns make it easier for the brain to analyze and absorb information. Avoid fonts with complex shapes and patterns because they are distracting.

2. Stick with the familiar.  Helvetica, Arial, Times New Roman, Cambria and Calibri are all widely recognized and easily understood.

3. Avoid ambiguous fonts. When font letters appear too similar to each other, it creates ambiguity that the brain lags to process. Pay special attention to these letter pairings: C vs O, e vs o, 1 vs i vs I  vs l. 

4. Consider the weight and spacing. Heavier, thicker fonts are easier to read than thinner, light fonts. Make sure that the kerning and leading are sufficient that the word will read clearly and unambiguously.

5. Good Contrast. Make sure the text has a sufficient color contrast from the background. (more on this in the next section).

6. Avoid too small fonts. Fonts that are too small are inaccessible because they are difficult to read. Make sure your font is large enough to be read easily. 

Colors come in families. The warm color family, associated with summer, daylight, sunrise, and fire, tends towards the red part of the color spectrum. The cool color family, associated with winter, nighttime, rainy days, and ice tends towards the blue part of the color spectrum. The muted color family has low saturation, meaning that  gray tones were added to decrease the intensity of the color.

The combination of colors used in a design is called the color scheme, and there are 5 of them:

• Monochromatic: Uses tints and shades of one color. 

• Analogous: Uses colors located adjacent to one another on the

• color wheel.

• Complementary: A high-contrast mix of colors that are placed opposite of each other on the color wheel. 

• Split complementary: a 3-color scheme using one base color and the two colors adjacent to the base color’s opposite color.

• Triadic: A 3-color scheme that uses a mix of colors evenly spaced on the color wheel. 

If trying to select a color scheme is overwhelming and confusing, stick with a 3-color palette of one base color and two accent colors, and make sure your background is light or neutral. Websites like Paletton, Colormind, and Canva Color Palette Generator are useful in helping you create a palette for your online course. Then be consistent in how you use the color palette to create a uniform look for each page of your online course. 

While color is very useful for creating visual cues and organization, you must be careful to not rely on ONLY color to direct a learner’s attention. You also need to make sure that your colors have a sufficient contrast with the background; this is especially true for the font colors and page backgrounds. Without sufficient contrast, many learners won’t be able to see anything at all. WebAIM’s Color Contrast Checker can help you make sure that your design has sufficient contrast.  The addition of patterns/textures to the color will help visually impaired learners understand what key information is being communicated by that color. Color Safe is very helpful for generating accessible palettes with the correct contrast ratios. 

Repetition creates strong unity of effect by repeating visual elements in a pattern. The repetition of colors, fonts, graphics creates strong visual connections between ideas and establishes a visual style for the course. It indicates that the page is clearly part of a given module or course, and aids in navigation because learners don’t have to re-learn the controls for each module or page. Repeat the main page elements--buttons, banners, and formatting--to give a sense of continuity and consistency to each module. Repeating colors, fonts, and shapes will enhance the spatial relationships between these elements on a page. The easiest way to guarantee repetition is to use templates that already feature repeating elements so that you don’t have to worry too much about arranging the page by hand. 

Contrast is a key part of successful page composition. Contrasting opposing elements creates focal points that direct the learner’s attention. It also creates a visual hierarchy or distinction between elements, and enables the learners to quickly read and understand the information of the page. High contrast font colors, wildly disparate text sizes, and alternating bold and minimal graphics will all make the information stand out. Well-proportioned whitespace gives the learner’s eye a place to rest while reading. 

Proximity is the grouping of related elements closer together. Objects that are close together or even overlapping are seen as one element, and distantly placed elements are not. Close proximity of page elements implies a relationship between those elements. For example, an illustration or graphic placed next to the text that describes it is a good use of proximity to denote a relationship between the text and that graphic. Make sure that captions are immediately next to the image being captioned. Squint at the page to see if the grouping of elements that are connected visually really do belong together.

Alignment is the rational and deliberate placement of page elements to improve clarity. alignment is most easily achieved by using an invisible grid to line up the elements.Your margins should be wide, and your columns should be relatively narrow because both of these increase the readability of the page.  Blocks of text should always be left-aligned. Center alignment is very formal, and it creates unsightly “ragged edges” of text. Graphics can be aligned relative to the center of the page, but the text in your buttons and tables should be aligned on the same baseline instead of centered inside the element. Alignment reinforces the connection between content elements and creates a visual hierarchy for the page. 

Text alignment is also important, as font choice is the only first step in the visual design of a pleasing and meaningful text arrangement. After that, concerns such as leading, tracking, and kerning, come into play. Kerning is the space between individual letters, and tracking is the uniform spacing of all letters within a word or a given range of characters. Leading is the spacing between lines in a given block of text. Balance within words and paragraphs will enhance the readability of your content and the visual consistency of your overall visual design.