Skip to main content

1 in 12 men and 1 in 200 women are color blind in the United States.

Based off these numbers, there would be about 1,600 individuals at UNC that are color blind.

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 allow anyone using a smartphone or tablet with a glossy screen to better read pages when in a bright environment.

UNC adheres to the W3C Web Content Accessibility Guidelines 2.0, level AA compliance for color contrast ratios. Minimum standards, set forth by WCAG’s AA guidelines, must be met for content to be interpreted correctly by users with visual impairments. According to these standards, we must achieve the following contrast ratios:

  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

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.

Color Example Hex Color Code Color Name
#4B9CD3 Carolina Blue
#13294B Navy
#151515 University branding calls this black but it’s actually a dark gray
#000000 Ture black
#FFFFFF White
#F8F8F8 Light Gray
#4f4f4f The default color of text on School of Medicine web sites

 


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.).

Example Hex Color Codes Contrast Ratio Pass / Fail
Example Text #4f4f4f on #ffffff 8.19:1 pass
Example Text #4f4f4f on #4B9CD3 2.72:1 fail
Example Text #000000 on #4B9CD3 6.99:1 pass
Example Text #4f4f4f on #13294B 1.77:1 fail
Example Text #4f4f4f on #F8F8F8 7.71:1 pass
Example Text #ffffff on #4B9CD3 3:1 fail
Example Text #ffffff on #13294B 14.51:1 pass
Example Text #ffffff on #151515 18.26:1 pass
Example Text #ffffff on #F8F8F8 1.06:1 fail
Example Text #4B9CD3 on #13294B 4.83:1 pass
Example Text #4B9CD3 on #151515 6.08:1 pass

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.

Example Hex Color Codes Contrast Ratio Pass / Fail
Example Text #ff0000 on #ffffff 4.0:1 fail
Example Text #cc0000 on #ffffff 5.9:1 pass

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

Improving Accessibility With Color Contrast

Discover how to identify whether the colors on your website have sufficient contrast between text color and its background.
3 min. 36 sec.

Understanding the Role of Color in Accessibility

Take the guesswork out of designing for color blindness and learn how to improve the accessibility of your websites.
4 min. 40 sec.

 


Resources

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