Documents

Documents created using MS Word, Google Docs, InDesign, or other desktop publishing software must be created with accessibility in mind. An accessible document is one that can be:

  • read
  • understood
  • navigated
  • and interacted with

by people with disabilities in an equally effective manner as a person without a disability. This includes people with blindness or low-vision who may be using screen reading software, people who may have one of the many forms of color-blindness, people with fine motor skill impairments that may prevent them from using a mouse, and people with cognitive or learning disabilities.

An accessible document should contain:

  • Good color contrast.
  • Structured headings.
  • Structured bulleted/numbered lists.
  • Alternative text for all meaningful non-text content.
  • Meaningful, plain-text hyperlinks.
  • Properly formatted tables that are used only for data, not for layout.
  • Some means other than color to represent data in charts or graphs 

Many desktop publishing platforms provide some means of checking the accessibility of your document, either while you are working or as part of the final review process. Note that most automated accessibility checkers do not check all of the criteria listed above. Some manual review will be needed.

Visit the Tufts Learning Center to register for an instructor-led Digital Accessibility: Word session.

Color Contrast

What is color contrast?

Color contrast refers to the relative luminance (you can think of it as brightness or saturation) between colors. It is often represented as a ratio, such as 3:1.

The higher the color contrast ratio the easier it is to distinguish between two colors. For example, black/white has the highest contrast of 21:1. On the other hand, white/white would be the lowest contrast of 1:1.

There are strict color contrast minimums that must be adhered to in order to comply with digital accessibility guidelines. They include

  • Body text must have a color contrast of at least 4.5:1
  • Large text (18pt or larger) must have a color contrast of at least 3:1
  • Non-text content (buttons, graphics, charts, etc.) must have a minimum contrast of 3:1

How do I know what the color contrast ratio is for my colors?

In order to determine the contrast ratio between your text and background or between your chart elements you can use a color contrast checker like the WebAIM Contrast Checker, or the TPGi Colour Contrast Analyser

Whichever color contrast checker you use, you will need to know the color value for each of the colors you are using in your document. Color values are described numerically using either the RGB (red-green-blue) value or the Hex value (referring to the fact that it is a hexadecimal number). For example, a shade of light blue can be described as RGB  49,114, 74 or as Hex #3172AE.

Find the RGB or Hex value of your text color (Win)

To find the RGB or Hex value of your colors in Word (Windows):

  1. Place your cursor anywhere in the text.
  2. Click the Home > Font Color dropdown on the ribbon.
  3. Choose More colors...
  4. Choose Custom

 

Location of the font color button on the MS Word toolbar.

Location of the RGB and Hex color codes in MS Word.

Find the RGB or Hex value of your text color (Mac)

For the Mac the steps are slightly different:

  1. Place your cursor anywhere in the text.
  2. Click the Home > Font Color dropdown on the ribbon.
  3. Choose More colors...
  4. Choose Color sliders
  5. Choose RGB Sliders. 

RGB slider dialog box on the Mac

Determine the ratio between the text and background

You can then use your color contrast checker to determine the color contrast ratio between your chosen colors.

Tips:

  • The RGB value of white is 255, 255, 255 and the hex value is #FFFFFF.
  • The RGB value of black is 0, 0, 0 and the hex value is #000000.

Are there recommended colors to use at Tufts?

Tufts Classic Blue swatchTufts Classic Blue (RGB 62, 142, 222 / Hex #3E8EDE) is NOT accessible for body text, but it can be used for heading text larger than 18pts.

 

Tufts Accessible Blue swatchTufts Accessible Blue (RGB 52, 96, 148 / Hex #346094) can be used for both body text and heading text.

 

On the Communications and Marketing: Brand Guides and Logos page you will find the complete Branding Guidelines Reference guide which includes the entire palette of recommended colors along with their corresponding RGB and Hex values. 

Good heading structure, especially in longer documents, ensures that your document is easily readable and understandable by sighted users as well as users who may be relying on screen reading software. Good heading structure also provides users with options for navigating a long document, for example by opening the Navigation Pane in Word or the Document Outline in Google docs.

Unfortunately, many document authors simply change the font size and color in the hopes that users will recognize text as a heading but this kind of styling is strictly visual. It carries no structural meaning.

In order for your headings to lend structure to your document and allow them to be used as navigational aids you must use the built-in heading styles. Heading styles can be modified to look however you like, but they still retain their semantic, or structural meaning. For example
 

  • Heading 1 is usually used as the document title.
  • Heading 2 represents major sections of the document.
  • Heading 3 represents sub-sections within each Heading 2 section.
  • And so on...

Once you have assigned proper headings to your document sections, you should not only be able to view the document structure the Navigation Pane (in Word) or the Document Outline (in Google), but you will also be able to automatically generate a document Table of Contents. 

For more information, see:

Alternative text, also referred to as "alt text", is a textual description of graphical content in a document. This text allows blind or low-vision users of screen reading software to be able to understand the non-textual content contained in document objects such as images, charts, or graphs. Alternative text should only be included for graphical content that conveys information. Purely decorative graphical content can be marked as decorative and will be ignored by the screen reader.

Alternative text should be:

  • Concise (usually no more than a sentence or two)
  • Equivalent (describing the purpose of the graphical content)
  • Non-redundant (do not repeat information already provided in visible text)

Note also that you should not include "image of..." or "picture of...", as the screen reader will already announce the object type.

For more information, see:

 

Screen reader users will often use a shortcut key to get a list of hyperlinks in your document. For this reason, hyperlinks in a document should be meaningful, plain text whenever possible. This has the added benefit of making your document more readable for all users.

For example, instead of using https://admissions.tufts.edu/tuition-and-aid/applying-for-aid/international-student-aid/ it is preferable to use Financial Aid for International Students. Also, avoid using meaningless links like click here, or more. These can be confusing for both sighted users and users of assistive technology.

Additionally, you should use some means other than color alone to distinguish your hyperlinks from the surrounding text. It is standard practice to use an underline to identify the presence of a link.

For more information, see:

 

Data tables allow document authors to present tabular information in a way that allows sighted users to make associations between individual cells and their corresponding column and row headers. Tables also allow screen reader users to associate individual cells with corresponding headers, but only when they are formatted properly.

A properly formatted table has:

  • A uniform number of rows and columns (no merged or split cells)
  • A single designated column-header row.
  • If appropriate, a single designated row-header column.
  • No blank cells.

For more information, see:

Finally, tables should never be used as a page layout device. While they may be invisible to sighted users, these layout table are interpreted as data tables by the screen reader.

The following guidelines apply to charts and graphs that are created in Word or imported directly from Excel (if your chart or graph is a screenshot you won’t be able to do these things in Word).

Use of color

Data visualizations such as pie charts, line charts, bar charts, etc. should never rely on color alone to convey information. Always use a pattern in addition to color or, better yet, use data labels if there is room. 

Refer to Microsoft Support: Present Data in a Chart for information on how to customize your chart in Word for Windows or Mac.

Alternative text

We often rely on charts to communicate complex information visually, so it may be difficult to summarize the contents of a complex chart in a few sentences. If you are unable to summarize the contents of the chart in the alt text field, consider making an accompanying data table available or including a visible caption describing the contents of the chart.

Refer to: