Visual website design patterns, UX decisions & layout examples for Canadian businesses
Visual System

Website Colour & Contrast

Choose web colour systems that support hierarchy, brand identity and readable interfaces.

Use colour roles, not random hex values

Define colours for text, surfaces, borders, primary actions, secondary actions, success, warning and focus. Reusing those roles makes components consistent and reduces bugs when new sections are added.

Brand colours do not need to dominate every surface. A restrained neutral system often makes a distinctive accent colour feel stronger.

Check real component combinations

A colour may pass on white and fail on a pale card. Test buttons, disabled states, hero overlays, footer links and form placeholders in the actual component context.

Do not use colour alone for meaning

Status and validation should also use text, icons or patterns. A red border with no explanation does not tell every visitor what went wrong.

Consistency matters more than novelty

A site usually feels more polished when a small colour system is used consistently than when every section introduces a new decorative palette.

Related design guides