Color and Contrast

Color contrast impacts the readability of your content on the web and in print. It is especially important for users who are low vision or for users who are colorblind.

Color blindness is the decreased ability to see certain colors or distinguish differences in color. Red–green color blindness is the most common form of color blindness, followed by blue–yellow color blindness and then total color blindness. Worldwide, there are approximately 300 million people with color blindness, almost the same number of people as the entire population of the United States.

The main symptom of color blindness is not seeing colors the way most people do. People who are color blind, may have trouble seeing:

• The difference between colors
• How bright colors are
• Different shades of colors

When creating web content, we must carefully consider the use of color. Color choices impact site visitors, who may be color blind, have low vision, or some other color-visual impairment.

There are two accessibility issues related to choice of color:

1. Do not rely solely on color to convey meaning.
2. Ensure that there is adequate contrast between foreground and background colors.

Avoid Using Color Alone to Convey Meaning

It is important to avoid using color alone to communicate information. For example, links in the School of Medicine (SOM) web system are colored blue. This can pose a problem to people who cannot see the color blue. They will be unable to distinguish links from surrounding text. To ensure that links are accessible, we’ve include an underline to ensure the links stand out, independent of color.

Images and Color

You do not typically need to include any information about colors in the alternative text for the images on your web site. However, if you are using images to provide an indication of function or meaning, you must include the color and/or meaning within the image’s alt text. If you use an image of a green circle to indicate that a ski trail you are describing is rated as an easy trail, then the ALT text for that green circle should be “green circle, easy” so that screen reader users know what is being communicated.

Provide Adequate Contrast

Color contrast refers to a calculated ratio of the difference between foreground and background colors. Some users have difficulty perceiving text if there is too little contrast. As such, we must ensure all content, such as text, links, buttons, etc., provide enough contrast so that users with low vision can see and interact with it. A high contrast ratio will also help users who are outside or in a bright environment.

Contrast between text and its background must meet required WCAG’s Color Contrast standards. UNC adheres to the W3C Web Content Accessibility Guidelines 2.0, level AA compliance for color contrast ratios. According to these standards, the contrast requirements are:

1. 4.5:1 for normal sized text (standard links, body copy, etc.)
2. 3:1 for large text. Large text is defined as:
   • Bold font weight with an 18px or larger font size, or
   • 24px or larger font size
3. 3:1 for UI elements and graphics

The larger the font and wider the stroke, the more legible text will be at lower contrast. Therefore the contrast requirement for a larger font is lower. W3C recommends starting at 18px regular weight text or 14px bold text for what they deem as “large text.” The base font size for text in the School of Medicine web system is 16px and therefore does not fall within the large text size.

UNC/SOM Colors

In general, the color choices on the School of Medicine (SOM) web site will be controlled by the default White Coat theme. Color, font family and font size for global elements (body content, headers, links, etc.) have been styled to ensure proper accessibility. These elements should not be modified.

There are some instances where editors are given the opportunity to select a color. In these instances it is up to our users to ensure they follow these guidelines and that they perform their own tests for compliance.

Below are the hexadecimal color codes of the primary and web alternative color palettes in the University Branding and Identity Guidelines as well as common colors used in the School of Medicine web system.

Are UNC/SOM Colors Accessible?

Below are various combinations of UNC and SOM colors, using normal sized text, to demonstrate their contrast ratio and whether or not the combination is accessible. Remember, to meet WCAG 2.0 level AA conformance for color contrast, we must achieve a contrast ratio of 4.5:1 or better for normal sized text (standard links, body copy, etc.).

Red can be difficult to work with because the color is neither very dark nor very light and is hard to contrast to a sufficient level.

Note that the default red color choice in the editor is #ff0000, which fails the contrast test. This color should be changed to #cc0000, a slightly darker red, that does provide sufficient contrast. The following video will show you how to use the appropriate red as well as choose other accessible colors.

Accessibility Videos

Resources

These free tools can help you make color-accessible choices.

• WebAIM: Color Contrast Checker
• Tanaguru Contrast Finder – do you have an inaccessible color you wish to use? This checker will help you find the closest accessible variant.
• WebAIM article about color contrast and low-vision.
• WebAIM article about colorblindness.
• Colorblind web page filter by Toptal – provide a url and preview what the web page looks like to a color blind person.
• Vischeck Colorblind Image Filter – This utility allows you to upload an image in order to see how it would be viewed by users with different types of color blindness.
• Contrast Ratio by Lea Verou
• W3C: Use of Color – understanding success criterion.