Colour Contrast Explained

What Contrast Is

Contrast, in the context of web design, refers to the difference in brightness between two colours — most commonly between text and the background behind it.

Contrast is measured as a ratio. The ratio compares the relative brightness (called luminance) of two colours. The scale runs from 1:1 (no contrast at all — identical colours) to 21:1 (maximum contrast — pure black on pure white).

You do not need to understand the mathematics behind this. What matters is knowing what the ratios mean in practice and how to check whether your colour combinations meet them.

Why It Matters

Low contrast text is difficult or impossible to read for a significant portion of your audience.

This includes people with low vision, people with certain types of colour blindness, older adults whose visual acuity has declined, and anyone reading on a screen in bright sunlight or on a low-quality display.

It also affects people without any visual impairment who are simply tired, distracted, or reading quickly. Low contrast creates friction for everyone.

Beyond the practical impact on readability, contrast is also a legal consideration in many jurisdictions. Accessibility standards are increasingly referenced in accessibility legislation, and failing to meet basic contrast requirements can expose organizations to legal risk.

WCAG Contrast Standards Explained Simply

WCAG stands for Web Content Accessibility Guidelines. These are internationally recognized standards for making web content accessible. They are published by the World Wide Web Consortium (W3C) and are referenced in accessibility legislation in many countries, including Canada.

You do not need to read the full guidelines. Here is what you need to know about contrast.

Level AA (the standard most organizations aim for)

WCAG Level AA requires:

• A contrast ratio of at least 4.5:1 for normal-sized text
• A contrast ratio of at least 3:1 for large text (18pt or 14pt bold, roughly 24px or 18.67px bold)
• A contrast ratio of at least 3:1 for user interface components like buttons, form fields, and icons

Level AAA (enhanced accessibility)

WCAG Level AAA requires:

• A contrast ratio of at least 7:1 for normal-sized text
• A contrast ratio of at least 4.5:1 for large text

Level AAA is not required for most organizations, but aiming for it where practical improves readability for everyone.

What these numbers mean in practice

Black text (#000000) on a white background (#ffffff) has a contrast ratio of 21:1 — the maximum possible. This always passes.

Dark charcoal text (#1a1a1a) on white has a ratio of approximately 19:1. This always passes.

Medium grey text (#767676) on white has a ratio of approximately 4.54:1. This barely passes AA for normal text.

Light grey text (#999999) on white has a ratio of approximately 2.85:1. This fails AA for all text sizes.

Small Text vs Large Text

The contrast requirements are different for small and large text because larger text is inherently easier to read even at lower contrast.

Normal text (small text)

Normal text is anything below 18pt (approximately 24px) for regular weight, or below 14pt bold (approximately 18.67px bold). This is most of the text on a typical website — body paragraphs, navigation links, form labels, and similar content.

Normal text requires a minimum contrast ratio of 4.5:1 to meet WCAG AA.

Large text

Large text is 18pt (approximately 24px) or larger at regular weight, or 14pt bold (approximately 18.67px bold) or larger. This typically includes main headings and large display text.

Large text requires a minimum contrast ratio of 3:1 to meet WCAG AA. This is a lower requirement because the larger size makes it easier to read even with less contrast.

Common Contrast Mistakes

These are the contrast failures that appear most frequently on small business websites.

Light grey text on white backgrounds

This is the most common contrast failure. Designers often use light grey text to create visual hierarchy — making secondary information appear less prominent than primary information. The problem is that many grey values that look subtle and refined on a high-quality monitor fail contrast requirements and are genuinely difficult to read for many users.

If you want secondary text to feel less prominent, use a slightly smaller font size or a lighter font weight rather than reducing contrast to the point of failure.

Coloured text on coloured backgrounds

Using brand colours for both text and background can create beautiful designs that fail completely on contrast. Blue text on a light blue background, green text on a light green background, and similar combinations are common failures.

White text on light-coloured backgrounds

White text works well on dark backgrounds but fails on light or medium backgrounds. A common mistake is using white text on a medium blue or medium green background that does not provide sufficient contrast.

Text over images without sufficient overlay

Text placed directly over photographs or complex backgrounds is almost always a contrast problem. The contrast varies across the image, meaning some parts of the text may be readable while others are not. If you use text over images, add a dark overlay or a solid background behind the text.

Placeholder text in forms

Placeholder text in form fields is often styled in light grey to distinguish it from entered text. This frequently fails contrast requirements. Placeholder text should meet the same contrast standards as regular text.

Buttons, Forms, and Navigation

Contrast requirements apply to more than just body text. User interface components also need to meet contrast standards.

Buttons

Button text must meet the 4.5:1 contrast requirement against the button background. The button itself must also have sufficient contrast against the page background (3:1 minimum) so that users can identify it as a distinct element.

A common mistake is using a medium-brightness brand colour as a button background with white text. If the brand colour is not dark enough, the white text will fail contrast requirements.

Form fields

Form field borders must have sufficient contrast against the page background (3:1 minimum) so that users can identify where the field is. Text entered into form fields must meet the standard text contrast requirements.

Navigation links

Navigation links must meet contrast requirements against their background. This includes hover states — if a link changes colour on hover, the hover colour must also meet contrast requirements.

Colour Blindness Considerations

Colour blindness affects the ability to distinguish certain colours from one another. The most common form is red-green colour blindness, which affects approximately 8% of men and 0.5% of women.

Contrast ratio calculations are based on luminance (brightness), not colour. This means that a colour combination can pass contrast requirements while still being problematic for people with colour blindness if the two colours appear similar in brightness.

Practical guidance

• Never use colour alone to convey meaning. If you use green to indicate success and red to indicate an error, also use text labels or icons.
• Avoid using red and green as the only distinguishing factor between two states or options.
• Test your designs in greyscale. If the design still communicates clearly without colour, it is likely accessible to people with colour blindness.
• Avoid using colour combinations that are commonly confused: red/green, blue/purple, green/brown, and green/grey.

How To Check Your Contrast

You do not need to calculate contrast ratios manually. Several free tools make it straightforward.

What you need

To check contrast, you need the HEX colour codes (or RGB values) for both the text colour and the background colour. HEX codes look like #1a4f8a or #ffffff.

Free contrast checking tools

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker) — Enter two colour codes and it immediately shows the contrast ratio and whether it passes AA and AAA requirements.
• Colour Contrast Analyser — A free desktop application that lets you pick colours directly from your screen.
• Browser developer tools — Most modern browsers include contrast checking in their accessibility inspection tools.

What to check on your website

• Body text colour against page background
• Heading colours against their backgrounds
• Navigation link colours against the navigation background
• Button text against button background
• Button background against page background
• Form field text against field background
• Form field borders against page background
• Any text placed over images or coloured sections
• Footer text against footer background