Our Blog

Thoughts, news, insights and sometimes just random musings.
2 minutes reading time (448 words)

WCAG: 1.4.3 Contrast (Minimum)

contrast-full

It's important that any text or images of text that appear on your site are a color that sufficiently stands out against the color of your background. This is referred to as color contrast, and WCAG calculates it as a ratio describing the relative luminance of the text and background colors. WCAG dictates that the minimum ratio you must meet is 4.5:1. Remember that, because that's the magic number.

There's an algorithm that's been developed to find this ratio (you can learn it if you want to be a show-off), but you can also access a lot of free resources that will allow you to quickly test your site (more on this in a bit).

There are some notable exceptions to this rule. You don't need to worry about your site having a color contrast ratio of 4.5:1 in the following situations:

  • Large Text. It's easier to read large text at lower contrast. If the text on your site is at least 18 point or 14 point bold, you only need a minimum contrast ratio of 3:1. This will give you more color choices to choose from when designing your site.
  • Incidental Text. Incidental text has no contrast requirement whatsoever. This includes text or images of text that serve a purely decorative purpose, are a part of an image that contains lots of other visual content, are a part of an inactive user interface component, or are invisible to users.

Logotype. There is no contrast requirement for any logos or brand names that may appear on your site.

Colour Contrast Analysers

As I mentioned before, there is a ton of free tools you can use to quickly and easily test the contrast ratio of your site. These are called Colour Contrast Analysers, and you can typically download them as software or browser extensions.

Here's an example of one at work. Let's start by opening a Colour Contrast Analyser and going to a webpage. For our purposes, we'll use this article from the New Yorker.

[Link:]

The program I'm using has a dropper tool that allows you to select the appropriate portions on your site as foreground and background. My program opens to black and white as a default. As you can see, the black and white components well surpass the minimum ratio of 4.5:1. For this example, let's look at that red-colored title, "Annals of Entomology"

The title has a contrast ratio of 4.6:1, which only just meets that magic number we're after. You can see that it fails AAA-level contrast, which is a higher standard than what we're working with here. The AA standard is 4.5:1, which is what is required by WCAG.