Part of the Accessibility for Developers Whitepaper
This article is one part of a comprehensive whitepaper about building accessible digital products, written in partnership between truematter and Progress. You can download the full whitepaper from the Progress site.

————

Color contrast is an area of accessibility where many, many websites and applications fail compliance royally. Many organizations’ brand colors are not created with online accessibility in mind, so when these colors on viewed on a screen, the result is often poor color contrast.

This area of accessibility requirements can cause a lot of heartache because, in some cases, it can mean tweaking your established brand colors to meet accessibility standards. Not a fun sell to the folks in marketing and communications departments. If at all possible, organizations should plan their color palettes and design systems with digital accessibility in mind to avoid a world of frustration later on.

The WCAG Guidelines

The general rule of thumb for accessibility compliant color contrast is that it must be easy to differentiate text from its background and links must clearly stand out from non-linked text.

  • Distinguishable Principle – These guidelines fall under WCAG’s principle that online content and interactions must be “distinguishable.”

Use More than Just Color to Indicate Actions

Guideline 1.4.1 requires that “color is not used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

Create Solid Color Contrast

Guideline 1.4.3 requires that “the visual presentation of text and images of text has a contrast ratio of at least 4.5:1.”

What it Means for Users with Disabilities

People with low vision or who don’t see colors well (those with color blindness, for example) can’t read text or identify links if the foreground color is too similar to the background color. This mean they can’t identify actions easily or easily read any of your content. Even where the contrast ratio between text and the background is acceptable, you should still never assume that color will be enough to help a user identify links.

Best Practices

Check color contrast for all text.

Use a tool like WebAim Color Contrast Checker to see if your text falls into compliance. The minimum contrast for regular text is 4.5:1 unless you are using large text (at least 18 pt or 14 pt bold). For large text, the minimum contrast is 3:1.

Two blue buttons with white text. A lighter blue button is on the left and fails WCAG requirements because there is not enough contrast between the white text and blue background. A darker blue button is on the right and passes the requirements because it has higher contrast.

Button contrast comparison: The light blue on the left (the organization’s brand color, by the way) did not meet color contrast standards. When darkened slightly, the blue passes.

Add a non-color design element to identify text links.

Identify links in a way that does not rely solely on color. Use design elements like underlines, carats, or icons.

Example: Relying Only on Color to Identify Links

A long paragraph from the WCAG guidelines with a link in blue in the middle of the paragraph. The link is blue but gives no non-color indication that it is a link, so it does not pass contrast compliance.

Link identification relies on color: This link within the paragraph would not pass contrast compliance because the user must rely on color differentiation alone to identify the link.

Example: Using a Second Non-Color Indicator for Links

A long paragraph from the WCAG guidelines with a link in blue in the middle of the paragraph that is also underlined. The link is blue and also gives a non-color indication that it is a link in the form of an underline). It passes contrast compliance.

Links can be identified without color: This link within the paragraph passes contrast compliance because even if the user cannot differentiate the blue link color from the black text, the underline also indicates a link.

Do Everyone a Favor

The rules of color contrast aren’t just useful for those with disabilities – they are helpful and courteous to everyone using your site or app. You don’t have to have an official disability to find low color contrast hard to read and generally unpleasant. There are some combinations of background and text color that will make any set of human eyeballs scream.

Also, unfortunately, many sites and apps use inconsistent link colors or do not differentiate well between text and links. That leads to general uncertainty about what can and can’t be clicked, regardless of ability or disability. Do yourself a favor, do your business a favor, and do all of your users a favor. Pay careful attention to color contrast in your digital products.

Brightly colored rectangles yellow, blue, orange, green, red, violet each depicting an area of accessibility practice with an icon such as photos, code, videos, etc.
Get the Full Accessibility for Developers Whitepaper
Download Whitepaper

————

About truematter

Our team has been doing the real work of user experience since the earliest days of the commercial web. We’re out to make your digital products a whole lot better.

We practice what we preach – we even tweaked our own brand colors for better digital accessibility. It wasn’t fun, but it was the right thing to do.

Authors: @bekahable & @baileysendsword
Editors: @ExperienceDean
Graphic: @djosephmachado