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

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. 

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 (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 (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:

• Microsoft Word: Add a Heading
• Google Docs: Add a Title, Heading, or Table of Contents

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:

• Everything You Need to Know to Write Effective Alt Text from Microsoft
• Make Your Document More Accessible: Include Alt Text (Google Docs)

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:

• Create Accessible Hyperlinks in Word

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:

• Create Accessible Tables in Word
• Google Docs: Add and Edit Tables

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:

• Microsoft Support: Add Alternative Text to a Shape, Pic, Chart, etc. 
• Microsoft Support: Insert a Caption for a Picture

In order to be accessible to people with disabilities, PDF documents must follow all of the guidelines for good document design described in earlier sections of the guide. There are additional considerations specifically for screen reader compatibility.

Screen readers are often used by people who are blind, have low vision, or have certain cognitive, learning, or reading disabilities. Screen reading software relies on the tag tree, the underlying code behind the visible document, to interpret the document's contents and reading order. If the document is improperly tagged or if there is no tag tree at all, the document will not be accessible to anyone using a screen reader.

The tag tree comes from the source document when it is exported to PDF. The best way to ensure that your PDF is accessible is to first ensure that the source document (Word, InDesign, PowerPoint, etc.) is accessible. If you don't have access to the source document or if you PDF was scanned, there are some steps you can take to remediate the document for screen reader compatibility.

To learn more, sign up for a Digital Accessibility: PDFs session in the Tufts Learning Center or check out PDF Accessibility: Basic Remediation (YouTube) on the TTS YouTube channel.