Fonts, Color and Contrast

Fonts

Although serif fonts are usually preferred for printed items, such as books and newspapers, the opposite holds true for websites and documents read online. Proportionally, the "ticks" and "tails" of serif fonts take up a larger amount of space on a screen than they do on a printed page. In general, sans serif fonts display better on computers and mobile devices. Sans-serif fonts are generally considered more legible than serif fonts, narrow fonts or decorative fonts. 

Decorative, narrow, or overly stylized fonts should be reserved for headlines and decorative texts only, as these sorts of fonts are often difficult to read even for users without visual impairments or reading disabilities.

Designers who are looking to maximize the legibility of online content should investigate fonts that have been created with readers with dyslexia or visual impairments in mind, such as Read RegularLexie Readable, and Tiresias.

 

When creating presentations with Microsoft PowerPoint be sure to use a larger font size, definitely larger than 18 pt. but usually closer to 30 pt. Use sans-serif fonts as a general rule but most importantly however, use a ‘safe’ font, these fonts are accessible but also available on every computer, so if you create your presentation on a PC but end up presenting from a Mac you will not have any issues. If you do not use a safe font be sure to remember to embed the font in your presentation: File > Options > Save > Embed fonts in the file (check) > choose Embed All or Embed Characters Used

If a document is primarily meant to be printed, other font options can be used.

list of accessible fonts

Additional Safe fonts include:

  • Book Antiqua
  • Calibri
  • Cambria
  • Century
  • Consolas
  • Constantia
  • Corbel
  • Courier New
  • Impact
  • Wingdings

 

Color

 

Ensure that color is not the only means of conveying information.

People who are blind, have low vision, or are colorblind might miss out on the meaning conveyed by particular colors. Be sure to

  • Add an underline to color-coded hyperlink text. That can help colorblind people know the text is linked even if they can’t see the color.
  • Add shapes if color is used to indicate status.
    For example, add a checkmark symbol  if green is used to indicate “pass” Green box with white check  and an uppercase X  if red indicates, “fail” Red box with black x 

 

Color Contrast 

 Note: The accessibility checker in Microsoft programs will not give you any notification about color contrast issues in your document. The accessibility checker in Acrobat Pro DC will not flag any issues but it will prompt you to check the color contrast. 

 

Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page. An important aspect of color on the Web for both low vision and colorblind users is sufficient contrast between foreground (text or graphics) and the background.  

Maximum contrast is black versus white, but this combination can be considered too overwhelming (it might cause glare). Other colors can be used, such as navy, dark green, or maroon for darks, and pastels for lights, to lessen the contrast. 

However, some designs are can so subtle that the contrast can actually be insufficient for some readers. Examples include contrasting light grey versus middle grey, middle pastels versus darks, or white versus light cyan (blue-green). If you plan to use a subtle color palette, it is recommended that you use a color analyzer to ensure there is sufficient contrast. 

 

The Web Content Accessibility Guidelines (WCAG) 2 requirements for contrast and color Level AA requirements are: 

  • The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: 

  • Large Text:  Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; 

  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. 

  • Logotypes: Text that is part of a logo or brand name has no contrast requirement. 

These contrast requirements also apply to text within a graphic, called "images of text" in WCAG 2. 

 

In order to check the contrast level of text you can use a Color Contrast Checker. In most online tests, you enter in the hexadecimal color code for the foreground (text) and background colors, and the tester generates a numeric result. Usually a low number or ratio indicates too little contrast. 

There are many different online contrast checkers: 

I like the starred checker because it has an eyedropper tool so you do not need to find the hex number of each color you are using. The hex number is not an option in Microsoft programs, so you need to use a tool which converts an RGB number to a Hex number (easily found online) 

 

 

Details

Article ID: 137790
Created
Thu 1/27/22 3:10 PM
Modified
Mon 3/14/22 1:11 PM