The words Color Contrast on a blue-purple background with faded out rectangles and a bright orange rectangle around the words

Your Color Choices Could Be Keeping Your Site or App from Digital Accessibility

4 min readAug 16, 2019

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.

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

Paragraph of black text with inline links identified only by a blue color which fails color contrast accessibility.

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

Paragraph of black text with inline links indicated by both a blue color and an underline, which passes for color contrast.

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.

Get the Full Accessibility for Developers Whitepaper
Download Whitepaper