Colour contrast for web designers

Who this is for

Designers, developers, and agencies building or updating Canadian websites who want to catch obvious contrast problems early and prepare for qualified human review.

Why colour contrast matters

Low contrast makes text hard or impossible to read for people with low vision, colour blindness, or when using a device in bright sunlight. Good contrast helps everyone read comfortably on any screen.

Normal text vs large text

Normal body text, form labels, and most links need at least 4.5:1 contrast. Large text (18pt or larger, or 14pt bold) only needs 3:1. Buttons and important CTAs should meet the normal-text standard.

Brand colour traps

Brand colours that look vibrant on a mood board can fail contrast when used for text. Always test the actual hex values against the real background colour. Create accessible variants of your primary and secondary colours before they reach production.

Buttons and links

Primary buttons should have strong contrast between text and background. Secondary buttons and links need enough contrast against the page background and surrounding text. Test hover, focus, and active states.

Forms and errors

Error messages, helper text, and required-field indicators must remain readable. Do not rely on red alone to communicate errors. Test placeholder text contrast as well.

Text over images

Hero sections and promotional banners often place text over photos or gradients. Use a solid background colour, a semi-transparent overlay, or a different layout if text becomes hard to read.

Focus indicators

Keyboard focus outlines must be visible and high-contrast. Test focus states on buttons, links, form fields, and custom components. A faint focus ring is not enough.

What automated checks can help with

Inline style contrast detection, quick colour-pair testing with the contrast checker, and spotting obvious low-contrast text in sample HTML. These tools surface quick wins before manual review.

What still needs manual review

Full CSS, gradients, image backgrounds, hover/focus/disabled states, dynamic content, and brand palette variants across all templates. Automated checks cannot prove a design system is fully accessible.

Suggested workflow for agencies and designers

Define accessible colour tokens for text, backgrounds, buttons, links, errors, and focus states before design handoff.
Use the colour contrast checker on key colour pairs during design reviews.
Run the website accessibility checker on important templates to catch inline contrast issues.
Test hero text, CTAs, forms, and focus states manually in real browsers and devices.
Document colour variants and contrast decisions for developers and future updates.
Include contrast review in QA checklists and pre-launch sign-off.