What Is Colour Contrast?
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.
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 & 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.
Try Canvas Builder →