Which colors to choose for your website? A practical plan

Short intro

Color is not just style. It drives recognition, hierarchy and user decisions. This article gives a practical step-by-step: from brand values to palette, how to apply contrast and WCAG, plus a simple test method you can run in a sprint.

Why color is functional

Color signals priority. A primary color makes CTAs consistent. Accent colors deliver emotion. But poor color choices reduce readability and block people with visual impairments. So pair brand choices with technical constraints.

Step 1 — Start with brand and users

• Define brand values concretely: reliable, friendly, fast, premium. Translate those to color associations: blue = trust, green = sustainability, black/gray = premium.
• Consider your audience. Older users and people with low contrast sensitivity need different defaults. Build this into your brief.

Practical: create a mood board of 8–12 images. Pick three colors that fit best. That becomes your starting palette.

Step 2 — Build a base palette (tokens)

A usable palette typically contains:

• Primary (1 color) — main action buttons, active states
• Secondary (1 color) — secondary actions
• Accent (1–2 colors) — highlights, links
• Neutral scale — backgrounds, borders, text scales
• Feedback colors — success, error, warning

Example table: palette structure

Store hex or HSL values. Use design tokens so developers set them once. Material Design’s color system is a good reference: Material Design 3 — Color.

Step 3 — Contrast and accessibility (WCAG)

WCAG 2.2 defines readable thresholds. Don’t rely on intuition: dark color on light background can still fail if the ratio is too low. Key levels:

• AA: 4.5:1 for normal text, 3:1 for large text
• AAA: 7:1 for normal text

Different UI elements have different criteria. Read the official rules here: Web Content Accessibility Guidelines (WCAG) 2.2.

The explanation of contrast calculations is here: Contrast (Minimum) — Understanding SC 1.4.3.

Note: contrast ratio alone doesn’t cover all issues. Brightness and chroma differences matter too. Also test for common forms of color vision deficiency.

Step 4 — Test method (fast, repeatable)

Follow this method in three steps. You can do it in 1–2 hours per template.

1. Automated scans (15–30 min)
   • Run an accessibility linter in CI (axe-core, Lighthouse). These tools flag immediate contrast failures.
2. Manual checks (30–45 min)
   • Measure contrast for main text blocks and CTAs using a contrast checker (hex input).
   • Verify icons, status badges and error messages.
3. Visual simulation (15–30 min)
   • Use color-blindness simulators (protanopia, deuteranopia). Test critical flows: forms, cart, checkout.

Perform the full test on your most visited templates: home, product, checkout, account.

Step 5 — Implementation: tokens and component library

• Export colors as design tokens in your design tool and as CSS variables in code.
• For web, use CSS custom properties with fallbacks. Example:

:root { --color-primary: #0a62ff; --neutral-100: #f7f8fa; }

• Document when color overrides are allowed. Example rule: "Primary can be desaturated in hero backgrounds, but not for body text."

Teams like DevCru keep semantic tokens (brand-primary, bg-surface) separate from raw hex values to simplify future rebrands.

Quick contrast reference table

(For edge cases consult the WCAG spec) — WCAG 2.2.

Launch checklist

• Tokens defined in design and code
• Contrast checks done across templates
• Color-blindness simulations completed
• Component library updated with tokens
• QA pass by a second designer or dev

Indicative costs: palette and token setup 500–2.000 EUR; full audit plus component updates 1.500–6.000 EUR. Actual price depends on scope.

Practical notes and pitfalls

• Don’t introduce many primary colors. Two is usually enough.
• Never skip contrast testing because an element is "minor." Small text causes the most trouble.
• Don’t rely solely on color to convey status. Add icons or text for clarity.
• Trendy pastel palettes often struggle with contrast. That doesn’t mean you can’t use them, but you must test.

Final words and next steps

Work in phases: brand -> palette -> contrast -> testing -> tokens -> rollout. If you plan a redesign, connect color choices to component work so future maintenance is minimal. For a deeper redesign read our page about website redesign and see how our services can help implement tokens and audits.

If you want us to run a short color and accessibility audit, get in touch via /contact.