Research Guides: Accessibility Best Practices for LibGuide Content Creators: Color Contrast

Color Contrast Examples | UTK Color Palette | WebAIM Contrast Checker | Guideline Exceptions | Resources

"The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read..." ^[1] So, how do you go about determining if the text on your site has a contrast ratio of at least 4.5 to 1? Fortunately, the default text and background colors (dark grey text against a white background) are sufficiently contrasted to pass this test. However, if you really need to alter the color scheme, a few solutions are available.

Best Practice:

The default colors for text and background are the best options. It is recommended that you leave these options as is to mitigate contrast issues.

Before we jump into the options you available to test your color choices, let's look at some examples of why this is important. We'll begin with four examples of various levels of contrast.

The label "Good" is added to the example with sufficient contrast. "Bad" is added to the examples that do not meet minimum contrast levels. Depending on your own vision level, you may or may not be able to see the contrast levels. As such, the Good/Bad label will be listed inside of the example as well as underneath.

Example taken from the Springshare SpringyNews article 5 Tips to Help You Build Accessible LibGuides Content.

High Contrast - Good

Low Contrast - Bad

Color-Blind Inaccessible - Bad

Not Enough Contrast - Bad

Using UT Orange

According to the official UTK Brand Guidelines' Accessibility and Color website, "None of our brand colors meets the minimum level of contrast when used in combination with Tennessee Orange. This includes orange text on a white background and white text on an orange background." ^[2]

This means that orange should not be used as a text or background color.

Not Enough Contrast - Bad

UTK provides a palette of preferred colors to use, which includes online media. The recommended web palette is automatically applied if you use standard font and background colors - including links!

However, there are times when you may need to move outside the standard realm. In these situations, the UT Brand Guideline's website has two pages to reference.

Colors - This site provides a list of UT's official colors and accents, as well as the codes needed to use each color.
Accessibility and Color - This site matches each official UT color with backgrounds that provide sufficient contrast.

Tip:

Font size is taken into consideration with text / background contrast. Large Text is generally defined as being above 18 point text or 14 point bold text. (The default font size with LibGuides is 18 point.)

Additionally, UTK qualifies large text as text wrapped in the headline tags <h1>, <h2>, <h3>, or <h4>. ^[2] (Header tags are covered in the Semantic Markup tab.)

Perhaps you need to move away from UT's official branding colors. Your text and background colors will still need to provide sufficient contrast. The website WebAIM: Contrast Checker allows you to enter a foreground color (the text) and a background color.

The site will return results that indicate whether the contrast passes or fails each portion of the guideline.

The results include minimum and maximum requirements for normal text, large text, and graphical / user interface components (like a text entry box).

Best Practice:

When using WebAIM's Contrast Checker, it is best practice to make sure that all minimum and maximum requirements are met.

Tip:

Large Text is generally defined as being above 18 point text or 14 point bold text.

The caveat to using the WebAIM: Contrast Checker website is that you must know the font and background color's HEX code. (Color HEX codes begin with the pound sign followed by a six numbers/letters. For instance, the color white is #FFFFFF and black is #000000.) Don't worry though, there are several websites available for you to find this information. Such as:

Wikipedia's Web Colors
W3Schools' Color Picker
Adobe's Color Wheel and Extractor
You can even access UTK's color palette on the University's site Brand Guidelines

Tips:

When using the WebAIM: Contrast Checker, if you want to use a specific color but it fails to meet the requirements, you can use the scrolling bar under the Lightness header to change the color hue by slight variations. Sliding to the right will lighten the color while sliding to the left will darken it.

Logotypes and incidental text are excluded from this guideline.

Logotypes

"Logo images with text are exempt from some of the accessibility requirements." ^[3] For instance, according to the WCAG guidelines, "Text that is part of a logo or brand name has no contrast requirement." ^[1] (Logotypes are also exempt from text in images guidelines, which is covered in the tab Text in Images.)

Example:

UT Logo

The University of Tennessee logo includes white text on an orange background. Variations of the logo also contain orange text on a white background. "The university logo combines two elements: the icon block and the wordmark. Together, these elements uniquely communicate both our tradition of excellence and our position as a dynamic public research university." ^[4]

The text included in the image is considered part of the logo and therefore is not confined by the color contrast guidelines. However, alternative text should be included (as discussed in the tab Alt Text).

Additionally, even though it is acceptable that the logo contains insufficient contrast, you should not use the same color combinations for text on your guides.

Incidental Text

WCAG defines four types of incidental text:

Inactive: An inactive element, like a disabled Submit button ( ), is identified visually by its lower-contrast state.
Pure decoration: Decorative text that is not meant to be read. An example of this might be a picture of a bookshelf on a library homepage. The titles of the books are not meant to be read by the user.
Not visible to anyone: Text that is meant to be hidden, like an invisible skip link would not need to meet any contrast requirements until it becomes visible.
Part of a picture that contains significant other visual content: Text that is not an important part of the information in the image, like a name tag on the shirt of a person in a photo of a party, does not need to meet any contrast requirements. (This item is covered in detail in the tab Text in Images)

As a rule of thumb, text that would be part of the image's alternative text should probably meet contrast requirements while text that would not be added to alternative text can usually be considered incidental. ^[5]