Glossary

What Is Colour Contrast?

Q: What contrast ratio is 'safe' for any text?

A 7:1 contrast ratio passes both AA and AAA for all text sizes and is universally safe. Black on white is 21:1, the maximum possible. For branded colours, check your specific combination at webaim.org/resources/contrastchecker.

Q: Does color contrast ratio apply to placeholder text and disabled form fields?

WCAG 2.1 explicitly exempts inactive or disabled UI components from the 4.5:1 contrast requirement under Success Criterion 1.4.3, so disabled buttons and greyed-out inputs are technically exempt. However, placeholder text inside inputs is not considered disabled content and should still meet the 4.5:1 minimum, since sighted users read it to understand the expected input format.

Q: What is the difference between contrast ratio failures on body text versus decorative images?

WCAG 2.1 SC 1.4.3 applies only to text and images of text, not to purely decorative images, logos with no informational function, or incidental text embedded in photographs. If an image contains readable text that conveys content, that text must meet the 4.5:1 ratio relative to its immediate background within the image. Decorative images that contain no readable text are fully exempt from contrast requirements.

Q: Does colour contrast affect SEO?

Not directly, Google doesn't measure contrast ratios. However, poor contrast increases bounce rates (users can't read your content) and could trigger accessibility-related penalties in future algorithm updates. It's also a legal compliance issue.

Colour contrast in web design refers to the difference in luminance between a foreground colour (typically text) and its background colour. Sufficient contrast ensures text is readable for users with low vision, colour blindness, or in poor viewing conditions. The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios: 4.5:1 for normal text and 3:1 for large text at the AA compliance level.

How the contrast ratio is calculated

The calculation begins by converting each color's sRGB values (ranging 0 to 1) through a linearization formula: values below 0.04045 are divided by 12.92, while values above that threshold use the formula ((value + 0.055) / 1.055) raised to the power of 2.4. This step removes gamma encoding and produces linear light values. The relative luminance (L) of a color is then computed as L = 0.2126 * R + 0.7152 * G + 0.0722 * B, where R, G, and B are the linearized channel values. These coefficients reflect human eye sensitivity, which peaks strongly in the green range. Once both colors have a computed luminance value, the contrast ratio is expressed as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker one. The 0.05 offset accounts for ambient light reflected from a display. A ratio of 4.5:1 is the WCAG 2.1 Level AA threshold for normal text, 3:1 applies to large text (18pt regular or 14pt bold), and 7:1 is required for Level AAA compliance. WCAG 2.2 retains these thresholds, but the emerging APCA (Advanced Perceptual Contrast Algorithm) proposed for WCAG 3.0 takes a more nuanced approach. APCA considers font weight, font size, and polarity (light text on dark vs. dark text on light) rather than applying a single flat ratio. It uses a lightness contrast metric measured in Lc (lightness contrast) units rather than a simple ratio, producing results that more closely match how humans perceive contrast in real reading conditions. Color contrast only measures luminance difference, not hue difference, which is why two colors that look very different to some users (such as red and green) can still fail contrast checks. This is particularly important for users with deuteranopia or protanopia. Developers must not rely on color alone to convey information, a requirement covered separately under WCAG Success Criterion 1.4.1, but contrast ratio compliance under 1.4.3 is the primary measurable checkpoint for text legibility.

WCAG contrast requirements

WCAG 2.1 AA requires: Normal text (<18pt or <14pt bold) needs a 4.5:1 contrast ratio. Large text (≥18pt or ≥14pt bold) needs 3:1. UI components and graphical objects need 3:1. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Non-text elements like decorative images and disabled controls are exempt.

Contrast checking tools

WebAIM Contrast Checker (webaim.org/resources/contrastchecker), enter hex codes, shows pass/fail. Browser DevTools, Chrome and Firefox DevTools show contrast ratio when you inspect text elements. Canvas Builder's contrast checker tool (/tools/contrast-checker) lets you check any colour combination instantly. Figma has a built-in contrast plugin. Colour contrast is one of the most commonly failed WCAG criteria, always test before launch.

Common contrast mistakes

Light grey text on white background, a very common design mistake (e.g. #999 on #fff is 2.85:1, fails AA). Light text on pastel backgrounds, pastel colours often look lighter than expected. White text on light brand colours, e.g. white on sky blue or mint green often fails. Text over images, image backgrounds are unpredictable; use a dark overlay or semi-transparent background behind text.

Colour contrast best practices

Always test contrast ratios at every intended font size and weight combination, not just the body text, because a color pair that passes at 18pt bold may fail at 14pt regular. Use tools like the browser DevTools accessibility panel, the axe browser extension, or the WebAIM Contrast Checker during design rather than after build to avoid costly rework. Avoid using semi-transparent text over variable backgrounds such as images or gradients, since the effective contrast ratio changes depending on which part of the background sits behind the text at any given point. When building dark mode variants, recalculate contrast for every foreground and background pair independently, as simply inverting colors does not guarantee that passing ratios are preserved. For interactive states like hover, focus, and disabled, apply the 3:1 minimum ratio requirement from WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast) to UI component boundaries such as button borders and input field outlines, not just the text inside them.

Colour Contrast and Canvas Builder

Canvas Builder includes a free contrast checker tool at /tools/contrast-checker. Generated HTML uses Canvas template's tested colour system with contrast-compliant text/background combinations.

Start building free

Frequently asked questions

What contrast ratio is 'safe' for any text?

A 7:1 contrast ratio passes both AA and AAA for all text sizes and is universally safe. Black on white is 21:1, the maximum possible. For branded colours, check your specific combination at webaim.org/resources/contrastchecker.

Does color contrast ratio apply to placeholder text and disabled form fields?

WCAG 2.1 explicitly exempts inactive or disabled UI components from the 4.5:1 contrast requirement under Success Criterion 1.4.3, so disabled buttons and greyed-out inputs are technically exempt. However, placeholder text inside inputs is not considered disabled content and should still meet the 4.5:1 minimum, since sighted users read it to understand the expected input format.

What is the difference between contrast ratio failures on body text versus decorative images?

WCAG 2.1 SC 1.4.3 applies only to text and images of text, not to purely decorative images, logos with no informational function, or incidental text embedded in photographs. If an image contains readable text that conveys content, that text must meet the 4.5:1 ratio relative to its immediate background within the image. Decorative images that contain no readable text are fully exempt from contrast requirements.

Does colour contrast affect SEO?

Not directly, Google doesn't measure contrast ratios. However, poor contrast increases bounce rates (users can't read your content) and could trigger accessibility-related penalties in future algorithm updates. It's also a legal compliance issue.