Get your contrast right

Color contrast is one of the minimum requirements for designing an accessible digital interface.

Fortunately, it's something that most of us are familiar with — plenty of resources, tutorials, and tools exist to make sure we get color contrast right.

But is it something we truly understand? Have you ever wondered how contrast ratios are calculated? What is contrast? How does the human eye perceive color?

On this note, I'll be exploring the science behind color contrast — how it works, the difference between perceptual and mathematical models, and practical applications in UI design.

A primer on digital color

Before we dive deeper, we should first understand how color actually works in the digital world.

Essentially, every color on a screen is represented by a combination of three primary colors: red, green, and blue.

This is called additive color — which makes up the RGB color model.

On the web, we can get 16.7 million different colors by mixing these three primary colors — pretty impressive!

Relative luminance

The next step is to understand what contrast is, and how it relates to color.

Contrast is a measure of how different two colors are from each other. In technical terms, it's the difference in relative luminance between two colors.

Relative luminance is a measure of how bright a color is relative to pure white, the brightest color. It's the foundation for how we perceive color contrast, since it helps us determine the brightness of colors in relation to each other.

How do we calculate it? Pretty simple — someone already did the work of figuring out the formula.

Luminance = 0.2126×R + 0.7152×G + 0.0722×B

Notice how we multiply each channel by a slightly different value?

This is because the human eye perceives brightness differently across the color spectrum.

For example, we perceive green as brighter than blue, and the equation compensates for this.

A perceptual approach to color contrast

Now that we have the theory down, it's time to talk about how it applies to color contrast.

The Web Content Accessibility Guidelines, the standard for web accessibility, defines an algorithm for calculating color contrast ratios.

On WCAG 2, the current working version, contrast ratio is calculated using a simplified perceptual model — using the formula we saw earlier, attributing a weight to each color channel.

The algorithm calculates contrast simply by dividing the luminance of each color, giving us a ratio between 21:1 (maximum contrast) and 1:1 (minimum contrast).

This excessive simplicity causes false positives and negatives — as mentioned by Andrew Somers, the creator of APCA:

The W3C’s specification for determining sRGB contrast (…) is not perceptually uniform and as a result creates ‘contrast ratios’ that are not meaningful. The end result is incorrect contrast choices.

The coming version of the standard, WCAG 3, introduces a new, more sophisticated algorithm that makes up for the existing flaws in WCAG 2.

It’s called Accessible Perceptual Contrast Algorithm (APCA).

How does APCA work?

The APCA algorithm accounts for the perceived contrast of relative luminance, aiming to be a perceptually uniform system for color contrast.

It's a big improvement from the WCAG 2 algorithm — you can dive deep into the details in Andrew Somers’ interview with Colleen Gratzer.

The most significant change is the scoring system.

The contrast ratio is now between 0 and 100 — the higher the number, the higher the contrast.

The APCA system segments the contrast into five categories of accessibility, to help in determining the appropriate contrast levels for different types of content:

The score also changes depending on font size and weight — a thinner font will need a large size to meet a certain contrast level.

You can check the APCA Font to Contrast Table from ACHECKS for a full overview.

Another important change is the way foreground and background colors are treated.

The WCAG2 algorithm was symmetrical — meaning it didn't matter if you swap foreground and background colors — the contrast ratio would be the same.

APCA introduces the concept of polarity — dark text on a light background (positive polarity) is treated differently than light text on a dark background (negative polarity). This better matches how human vision works — as shown by the Kofkka ring illusion.

All these improvements make APCA a much more robust & accurate tool — helping reduce false positives and negatives.

This solves those classic WCAG 2 false negatives, such as white text on orange buttons, that technically failed the 4.5:1 ratio but were easy to read in practice.

How I incorporate this into my workflow

There are several ways to make it easy to get contrast right in your daily workflow — no matter if you're a designer or a developer.

Contrast plugin in Figma

I'm a simple person, so I like to use simple tools. Contrast includes an intuitive contrast checker, and a scan option for finding contrast issues in a selection or page. All for free, with no log in / sign up required. It just works.

However, if you want a more robust solution, I highly recommend checking out Stark — which includes a full suite of accessibility tools, integrations, team collaboration, and AI (of course).

Chrome DevTools

Chrome DevTools shows you the contrast ratio of any selected element — but using the old WCAG 2 system, which is not ideal.

However, there's an option hidden away under Settings > Experiments, where you can enable APCA.

You could also use the Stark Accessibility Checker, which is the official Chrome extension from Stark.

OKLCH color model

I've been starting to use the OKLCH color space lately. If you’re used to working in HSL, it’s a conceptually similar model — the order of the values is just reversed:

The key advantage of OKLCH is that it is based on human perception. The perceived difference between colors is consistent across the spectrum, making it easier to select colors that meet contrast requirements.

If you want to dive into the details, I highly recommend reading this article.

Luminosity blend mode in Figma

This is more of a trick I use to compare color luminance across a set of colors.

Figma includes a Luminosity blend mode, which will convert a color to grayscale. By stripping away color hue, and comparing exclusively the lightness of each color, you can get a sense of how much color contrast you have.

I find this very useful when building a color palette — by matching the lightness level, you will get perceptually equal colors.

I hope this note helped you get a better understanding of color contrast — how it works, why it's important, and how to make sure you get it right.

For me, building an intuition of how color works and understanding the nuances in human perception really helped me make better design decisions. Color is a complex topic, and it's been a constant learning journey to understand it better.

Finally, just a heads-up that WCAG 3 is still a draft (for a long time now). But in my opinion, you should use APCA as your default for color contrast. Real accessibility is more important than just complying with the current standard — and APCA does it better.