Color

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 and would be impossible to read.

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

These are minimums! The higher the contrast the easier it will be for users with visual impairments, including color blindness, to read and understand.

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.

Example: Find the RGB or Hex value of your text color (Word for Windows)

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

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 0 46 109 / Hex #002E6D) 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 guide which includes the entire palette of recommended colors along with their corresponding RGB and Hex values. 

It is important not to rely on color alone to serve as an indicator of state (on/off, good/bad, etc.) or function (links, required form fields, important information, etc.)

Indication of state or status

In order to indicate on/off status, you may be tempted to use a toggle like the one below.

For users who cannot perceive color differences it will be difficult or impossible to determine the on/off state of each option. A better way would be to include a textual indicator in addition to color, as in the example below:

Another example might be the use of color when indicating status as in this example:

For individuals who cannot perceive color differences in this example, the addition of shape along with color will provide another indication of the status.

Indication of Function

There are times when color is used as a design choice to designate function. Some common examples include changing text color to indicate a hyperlink, or using red text to indicate important notices or information. It is important to add some other visual indicator in addition to color.

For example, links will often be another color and will also be underlined. Important text is often in red but may also be italicized or have a border or shading. Required form fields may be in red but also include and asterisk. 

Good data visualizations often incorporate color in their design. Whether a simple pie chart, bar chart, line graph, or a more complex visualization type it is important not to rely on color alone to identify data, data series, categories, trends, etc.

Most data visualization tools (Excel, Tableau, etc.) offer additional options including:

• data labels
• pattern options in addition to color
• shapes to differentiate trend lines