Colour Contrast and Accessibility – A Complete Guide

Colour contrast is a key part of accessible design. It determines how easily people can see and read your content on a website, app, or social media post.

However, it remains one of the most common accessibility issues. For example, the State of Accessibility 2024 report and our own review of EU websites ahead of the EAA deadline both showed that poor colour contrast is among the top problems found online.

In this guide, you’ll learn what colour contrast is, why it matters, how to measure it, and how to apply it effectively across your website, app, and other digital content.

What Colour Contrast Means

Colour contrast is a measure of the difference in luminance or perceived brightness between two colours. It describes how much a foreground element (like text, icons, or buttons) stands out from its background, affecting how easily people can see, read, and interact with the content.

Colour contrast applies everywhere colour is used. It’s key in digital spaces like websites, apps, graphics, and videos, and it also matters in the physical world, from packaging to signboards. Good contrast makes content visible and understandable in every context.

In digital interfaces, this concept becomes even more critical.

A page has many elements that must stay clear and usable. For example, a button needs enough contrast in two ways: the text should stand out against the button colour, and the button itself should be distinct from the background so users can easily interact with it.

---

Why Colour Contrast Matters

Not everyone sees colours the same way.

People with low vision, colour blindness, or ageing eyes often struggle when text and background colours lack sufficient contrast. For these users, low contrast between text and background can make content difficult or even impossible to read.

But it’s not just about disability. Everyday conditions can make reading hard for anyone.

Think about reading your phone outside on a sunny day. Low-contrast text can be hard to see in the bright light. Or at night, when your screen is dim and your eyes are tired after a long day, pale text on a dark background can almost disappear.

Good colour contrast helps in all these situations. It improves readability, usability, and overall comfort for everyone, not just for people with vision impairments.

---

Methods for Measuring Colour Contrast

There are two main ways to measure colour contrast.

The first is the WCAG contrast ratio, which relies on a mathematical formula to compare the brightness of two colours. The second is the APCA method, which focuses on how people actually perceive contrast rather than just calculating it.

Let’s look at both.

1. WCAG Contrast Ratio (Mathematical Approach)

The WCAG contrast ratio method measures the relative luminance difference between the foreground (such as text or icons) and the background behind them. This helps determine how much the two colours stand out from each other.

The contrast ratio is calculated using the following formula:

Contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Here,

• L1 is the relative luminance of the lighter of the colours, and
• L2 is the relative luminance of the darker of the colours.

The resulting value ranges from 1 to 21, commonly written as 1:1 to 21:1. A ratio of 1:1 means there is no contrast at all, such as white text on a white background. A ratio of 21:1 represents the highest possible contrast, like black text on a white background.

According to WCAG 2.1, here are the minimum recommended contrast ratios:

Type of Text or Element	Minimum Contrast Ratio
Normal text	4.5:1
Large text (18pt or 14pt bold)	3:1
User interface components and graphical objects	3:1

---

2. APCA (Advanced Perceptual Contrast Algorithm)

The Accessible Perceptual Contrast Algorithm (APCA) is a modern way to measure colour contrast. Unlike the WCAG contrast ratio, which is purely mathematical, APCA is perceptual. It focuses on how people actually see contrast in real viewing conditions.

The APCA calculates a Lightness Contrast (Lc) value that reflects how readable text appears on its background. It considers the brightness of the colours, the font size, the font weight, and whether the text is on a light or dark background.

The Lc (Lightness Contrast) value typically ranges from -105 to +105.

• Positive values represent dark text on light backgrounds.
• Negative values represent light text on dark backgrounds.
• A higher absolute Lc value means stronger contrast and better readability.

For example, +105 and -105 both indicate excellent contrast, making the text highly readable and easy to distinguish. Values close to 0, such as +1 or -1, show very little difference between the text and background, making it difficult to read comfortably.

Below are the recommended Lc levels for different types of text and visual elements.

Lc Value	Recommended Use	Notes
±90	Preferred for body text	Best for long reading. Use with fonts ≥18px/weight 300 or 14px/weight 400. Too high for large bold text.
±75	Minimum for body text	Good readability for 24px/300, 18px/400, or 14px/700. Works for most normal paragraphs.
±60	Content text	For readable non-body text like captions or subheadings.
±45	Large or bold text	Suitable for headings or icons with fine details. Around 36px/normal or 24px/bold.
±30	Less-critical text	For placeholders, disabled text, or large solid icons. Minimum 5.5px thickness.
±15	Decorative elements	For dividers or outlines. Anything below this may not be visible to many users.

---

Tools for Checking Colour Contrast

Colour contrast tools help ensure your colours meet accessibility standards and stay readable. They generally fall into two categories: design-stage tools, which check contrast as you design, and cross-stage testing tools, which test finished work or live pages.

Design-Stage Tools

Ideally, colour contrast should be addressed at the design stage. Building it into your workflow early ensures every colour choice supports readability and accessibility from the start. These tools let you check contrast as you design, helping you fix issues before they become a problem.

Recommended tools:

• Contrast by WillowTree: A powerful Figma plugin that supports both the traditional WCAG contrast ratio and the newer APCA method.
• Stark: A popular plugin for Figma, Sketch, and Adobe XD. It checks contrast ratios, simulates different types of colour blindness, and offers real-time feedback on accessibility.
• AccessibleWeb: A free browser extension that works on any web-based design platform, including Canva, Visme, and Figma, in the browser.

---

Cross-Stage Testing Tools

Some tools work equally well during and after the design process. They’re especially useful for checking how your colour choices hold up in real-world conditions, such as live websites, exported graphics, or final layouts, to ensure everything remains accessible and readable.

Recommended tools:

• WebYes Colour Contrast Checker: A simple online tool that checks colour contrast ratios based on WCAG standards.
• APCA Contrast Calculator: Uses the newer APCA model to measure contrast as humans perceive it, ideal for testing dark mode and modern designs.
• WebAIM Contrast Checker: A widely used tool for testing colour combinations. You can enter colour codes or pick shades directly to see if they pass WCAG guidelines.

---

How to Create an Accessible Colour Palette for Your Brand

Your brand colours are part of your identity, but they also need to work for everyone. When building your colour palette, it is important to make sure the colours not only look good together but also meet contrast standards for clear readability.

Here’s how to create an accessible palette:

Step 1: Generate an accessible colour palette

Use tools like the Venngage Accessible Colour Palette Generator to build your palette. Enter your main brand colour, and the tool will create several accessible options, such as vibrant, monochromatic, or contrasting palettes. Then, choose the one that best suits your brand.

Step 2: Define how each colour will be used

An accessible palette works best when each colour has a clear purpose. Think about how your colours will appear across different types of content, such as your website, app interface, social media graphics, and marketing materials.

Here’s a simple guide:

• Background colour: Choose a neutral or subtle tone that makes other elements stand out. It should work in both light and dark themes.
• Text colour: Pick a shade with strong contrast against the background to keep content readable.
• Link colour: Make sure links are easy to identify and have enough contrast with both the background and surrounding text.
• Button or accent colour: Use a bold colour for buttons, calls to action, or highlights while maintaining good contrast.
• Overlay or image text colour: If text appears over images or videos, use overlays or shadows to keep it readable.

Once you define these roles, apply them consistently across all brand touchpoints. This keeps your colours accessible, recognisable, and easy to read whether someone is viewing your content on a screen, in an app, or on social media.

---

Wrapping Up

Colour contrast isn’t just a design detail. It’s essential for making content both readable and interactive. Whether you’re choosing brand colours or designing a website, good contrast helps users see, understand, and engage with your content.

By testing your colours early, using the right tools, and following accessibility standards, you can create designs that look great and work well for everyone. Good colour contrast helps your content stand out and ensures your message is clear to all users.