The Science of Color Contrast — An Expert Designer’s Guide

Understanding the complexity of color contrast for better design and accessibility

This brief guide introduces UX designers to color contrast ratios and how to effectively apply this principle to your designs. This article does not delve into the complexities of choosing accessible colors for color blindness. Read more on color accessibility here.

The purpose of UX design is to facilitate a seamless interactive experience for users. As such, color selection and juxtaposition should not be solely based on your personal preferences. Of course, it should be grounded in your brand aesthetic, but also in the science of accessibility

Core Concepts

Luminance — The intensity of light emitted from a surface per unit area in a given direction.

Color Contrast — The difference in luminance between two adjacent colors or overlaid colors (foreground / background).

Dynamic Range — The ratio between the largest and smallest values that a certain quantity can assume. For color contrast, this is the difference between the brightest luminance and the darkest luminance. The eyes take time to adjust to different light levels, so designers need to take into account the dynamic range of the human eye as applied to digital screens.

Light Intensity and Dynamic Range

Optical Glare — Glare is caused by a significant ratio of luminance between the task and the glare source. This can also apply to digital and print sources, whereby reflected brighter light makes it more difficult for the human eye to discern adjacent objects. You can also apply this concept to screen glare, like what happens when you use a laptop outdoors.

Color Contrast Ratio —A property of a digital display system defined as the ratio of the luminance of the brightest color (white) to that of the darkest color (black) that the system is capable of producing. A high contrast ratio is a desired aspect of any display.

Human Eye Dynamic Range — The dynamic range of the human eye is about 20 stops, or 1,000,000:1. The contrast sensitivity of the human eye is greatest when the frequency of detail in a scene is at about 4 cycles per degree (source).

Calculating a Contrast Ratio

Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).

(L1 + 0.05) / (L2 + 0.05), whereby:

Web Content Accessibility Guidelines (WCAG) 2.0

The WCAG guidelines defines the following guidelines for accessible web content and associated contrast ratios.

Minimum Contrast Standards

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Enhanced Contrast Standards

1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Only passes for AA large text

Passes for all text types

Free Contrast Ratio Calculators

You can use these tools to quickly check your color schemes and make sure your content is accessible.

Webaim Contrast Checker — Free, online color contrast calculator

Contrast Checker — Free, online with grayscale

WCAG Contrast checker — Firefox addon

Color Contrast Analyzer — Chrome extension

This article was originally published on Justin’s Medium page.

Prototype with Sketch!

Prototype with Sketch!

Send artboards straight from Sketch into your Marvel projects.

Download Plugin

Sr. Product Designer at Auction.com — President of CA Product Designers — Co-Founder at TheTechLadder.com — Top Writer in Tech & Design at Medium

Related Posts

At times, it seems like eCommerce is a never ending search for conversions; for a strategy that leads to sale after sale. But, as you’ve undoubtedly realized by now, that’s sadly not possible. Sure, you can do something here and something there that will help you out—to a certain extent—but nothing remotely close to an eCommerce holy grail that makes… Read More →

There are lots of great tools for drawing wireframes today. However, I still prefer my good ol’ paper wireframing kit. In this post I’ll tell you why and explain how paper wireframing will make you a better designer. In 2012 I was planning on taking my wireframing skills to the next level. I had gotten the excellent app Paper by… Read More →

Your portfolio is a story about you and your work — your expression of growth through all the obstacles, surprises, successes and failures. This is your epic. Illuminate the arc of your career and why you matter. For the audience, your portfolio showcases your problem-solving superpowers, hard and soft skills, and your ability to reflect upon your successes and failures…. Read More →