Fylde-Digital-Logo-Final
Contact us
back to all

Build a WCAG ready brand color palette for SMEs with 60/30/10

A brand colour palette is the fixed set of hex, RGB and Pantone values your business uses everywhere, from your logo to your invoices, so customers recognise you instantly. Start by picking one primary colour that matches your brand’s personality, then check it against WCAG contrast standards before it goes anywhere near your website. Get that right and you have consistent recognition and a site that’s usable for everyone, not just the people with perfect colour vision.

TL;DR:

  • Choosing a primary color based on brand personality and testing it at multiple scales helps prevent costly redesigns later.
  • A palette should follow the 60-30-10 rule, with specific roles for neutrals, supporting colors, and accents, ensuring visual balance.
  • Contrast compliance with WCAG standards is necessary for text and UI elements, but logos are exempt from these accessibility rules.
  • Digital and print colors must be specified in hex, RGB, CMYK, and Pantone formats, with designers and suppliers provided all four for accuracy.
  • Professional help ensures brand colors translate correctly across digital, print, and real-world contexts, avoiding mismatches and accessibility issues.
Fyldedigital
Bring Your Brand Colours to Life
Fylde Digital helps businesses strengthen their digital presence through web design, SEO, social media, PPC, and print marketing.

Table of Contents

Choosing a brand color palette: how colour psychology maps to brand personality

Colour psychology in branding is not about “blue means trust” or “red means excitement.” Labrecque and Milne’s 2012 study of 208 brands found consumer preference is driven by how well a colour fits the brand’s personality, not by fixed colour meanings applied blindly. A quirky, playful brand painted in muted navy will feel wrong even though blue tests well for “trustworthy” in isolation.

Three variables do the real work:

  • Hue — the base colour family (warm reds and oranges feel energetic; cool blues and greens feel calm or clinical)
  • Saturation — how vibrant or muted a colour is; high saturation reads as bold and youthful, low saturation reads as premium or understated
  • Tone — how light or dark a shade sits; darker tones suggest authority, lighter tones suggest approachability

A financial adviser aiming for gravitas might choose a desaturated, dark teal rather than a bright cyan. A children’s activity centre might choose a highly saturated orange precisely because it breaks from the muted tones competitors default to. Neither choice is “correct” in the abstract; both are correct because they match the personality the brand wants to project. This is the crux of colour psychology in branding done properly: personality first, colour second.

Understanding brand colour terminology: hex, RGB, CMYK and Pantone

You’ll hit four colour formats when building a brand identity, and mixing them up is how logos end up the wrong shade on a printed banner.

  • Hex codes (e.g. #1E3A5F) are the digital standard, used in web design, email templates and social graphics
  • RGB is the underlying digital colour model hex codes translate from, mainly relevant to developers
  • CMYK is the print standard; a colour that looks vivid on screen often prints duller because CMYK has a smaller range than RGB
  • Pantone is a proprietary matching system that guarantees an exact, repeatable ink colour across different printers and paper stocks

Design guidance from Shopify recommends locking in exact hex codes for digital use and confirming CMYK or Pantone equivalents before anything goes to print. Your colour spec sheet should hand designers and suppliers all four values plus the semantic name (e.g. “Primary Blue”), so nobody is guessing. One exception worth knowing: logotypes are exempt from WCAG contrast rules, so your logo’s colours don’t need to pass the same accessibility tests as your body text.

How to pick a primary brand colour

Getting the primary colour right before you touch anything else saves you from rebuilding the whole palette later.

  1. Answer three questions first: What does the brand value (reliability, energy, luxury)? Who is the audience? What do competitors already own visually?
  2. Generate a shortlist using a colour wheel and harmony rules, complementary, analogous or triadic, to see which hues naturally pair with your shortlisted primary.
  3. Test each candidate at three scales: as a small logo mark, as a call-to-action button, and as a full-width background. Colours behave differently at each size.
  4. Score against a simple checklist: does it feel emotionally right, does it avoid looking identical to your nearest competitor, and does it stay legible when paired with white or black text?

Pro Tip: Screenshot your shortlisted hex codes onto a mock phone screen, not just a desktop mockup. A colour that reads as sophisticated on a 27-inch monitor can look muddy or garish on a 6-inch display, and that’s where most customers will actually meet your brand first.

Structuring your color scheme for branding: the 60-30-10 rule

A workable palette needs defined roles, not just a pile of colours you like. Shopify’s guidance suggests at least three core colours, with room for up to ten secondary or tertiary shades for larger brand systems.

  • Primary colour — your main brand identifier, used most often
  • Secondary colour — supports the primary, used for variety without competing
  • Neutrals — greys, off-whites and near-blacks that carry most of your body text and backgrounds
  • Accents — small, high-contrast colours reserved for calls to action and highlights

The 60-30-10 rule keeps this balanced in practice: roughly 60% of any layout in your dominant neutral or primary tone, 30% in a secondary supporting colour, and 10% in an accent that draws the eye to buttons or key messages. For anyone building a website, this maps directly onto CSS custom properties, --color-primary, --color-accent, --color-error, so developers apply colour consistently instead of hardcoding hex values into every stylesheet. Don’t forget a functional set for interface states: a green for success, a red for errors, and an amber for warnings, chosen separately from your brand palette so they don’t clash with it.

What are the WCAG contrast rules for brand colours?

WCAG 2.2 sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at the AA level, the standard most businesses should meet. AAA, a stricter tier, requires 7:1 for normal text and 4.5:1 for large text. Logotypes are exempt from both, so your logo can use whatever colours suit the brand.

Colour vision deficiency affects an estimated 3 to 8% of the population, rising to roughly 1 in 12 men in Caucasian populations. If your call-to-action button relies on red-versus-green alone to signal “click here,” a meaningful share of visitors genuinely cannot see the distinction you’re relying on.

Common failures and quick fixes:

  • Pale text on a light background: darken the text to near-black rather than lightening the background
  • Brand colour used as body text: reserve vibrant brand hues for headings or accents, and use a near-black grey for paragraphs
  • Red/green only signalling: pair colour with an icon, label or underline so meaning doesn’t depend on hue alone

Test everything with a contrast checker, and run your palette through Adobe Color’s accessibility tools, which flag conflicting combinations and simulate how your palette appears with deuteranopia, protanopia and tritanopia. Building these checks in at the ideation stage is far cheaper than discovering the problem after your website has launched.

Testing your palette across real-world contexts

A palette that looks right in a design file can still fail once it meets a browser, a printer, or a phone screen in direct sunlight.

  1. Build core mockups: a website header, a call-to-action button, a product pack or business card, and a social media post, since each reveals different weaknesses.
  2. Run a print proof before committing to a full run. Confirm the CMYK conversion, check the Pantone match against a physical swatch book, and see how the paper stock (matte versus gloss) shifts the perceived colour.
  3. Check across devices, an older phone screen, a laptop, a projector, since brightness and colour calibration vary widely.
  4. Simulate colour blindness using a dedicated tool rather than trusting your own eyes; simulators typically show the worst-case view, which is exactly what you want to catch.
  5. Show five people outside the project a mockup and ask what impression the colours give, before you ask what they think of the logo itself.

Your final hand-off package to a designer or developer should include hex, RGB, CMYK and Pantone values, semantic names, and clear usage rules stating which colour dominates and which is reserved for accents only.

How Fylde Digital helps small businesses build brand colours that hold up

A digital marketing agency can help small business owners turn a vague sense of “we want to look more professional” into a working colour system. Services include logo and brand identity design, web design that applies the palette correctly against contrast standards, and print-ready colour specs so your business cards match your website.,

Brand palette applied across three marketing outputs

Standing out without standing alone

Small businesses often chase distinctiveness as if it’s automatically a virtue. Sometimes it is, and sometimes it just confuses customers who expect a category to look a certain way, a pharmacy that suddenly looks like a nightclub raises questions nobody wanted answered. My rule of thumb: differentiate on saturation or tone within your category’s expected hue family, rather than abandoning that family altogether. A slightly bolder blue still says “healthcare”; a hot pink might just say “wrong.”

— tibor

Get your brand colours implemented properly

A professional agency offers a practical alternative to piecing your brand colours together yourself across a dozen different tools and hoping they match. Rather than a DIY palette that looks fine on your laptop and falls apart on a printed flyer or a mobile screen, a professional service can handle the whole chain, from picking the primary colour through to producing print-ready and web-ready files that actually match.

Fyldedigital

That covers logo and brand identity design, web design built to WCAG contrast standards from the start, and print production so your business cards, signage and packaging carry the exact same colours as your website, not an approximation of them. If your current site or branding already feels a little dated or inconsistent, request a free website and brand review through Fylde Digital’s web design services and get a straight answer on what your palette needs.

Where to check your work

Sources

FAQ

How many colours should a brand palette have?

Most workable palettes have at least three core colours, a primary, secondary and neutral, with room for up to ten secondary or tertiary shades in larger systems. Small businesses rarely need more than five in active use across their website and print materials.

What is the 60-30-10 rule in branding?

It’s a balancing heuristic where your dominant colour covers roughly 60% of a layout, your secondary colour 30%, and an accent colour the remaining 10%. This stops any single colour overwhelming a page or a printed piece.

Do logo colours need to pass WCAG contrast checks?

No. Logotypes are specifically exempt from WCAG contrast requirements, though the rest of your website text and buttons still need to meet the 4.5:1 (AA) minimum.

How much does it cost to get a brand colour palette designed professionally?

Pricing depends on scope, from a standalone logo and palette project to a full identity system, so current costs are best checked directly with Fylde Digital’s graphic design team.

Can I choose the same colours as my competitors?

You can, but research on colour and brand personality fit suggests it only works if that colour genuinely matches your brand’s personality, not just because a market leader uses it. Matching a competitor’s hue without matching their positioning tends to blur your identity rather than borrow their credibility.

Some More Cool Projects