A coherent palette assigns colours to roles. It does not require every paragraph, button and background to use the most distinctive brand colour.
Choose combinations that preserve readable information and understandable states while retaining the brand's visual character.
Start with functional roles
Define page background, primary text, secondary text, borders, main action and status colours. Keep the list small enough to apply consistently.
A single brand accent can appear in several places, but its meaning should not change unpredictably.
Do not use the same treatment for a primary action and an error if that makes the interface confusing.
Test actual colour pairs
Contrast belongs to a foreground-and-background combination, not a colour in isolation. A gold that works as decoration may be unsuitable for small text on white.
W3C's WCAG 2.2 contrast guidance specifies at least 4.5:1 for ordinary text and 3:1 for qualifying large text, with defined exceptions. Check the actual use rather than assuming a palette is accessible because it looks dark enough. W3C text contrast guidance.
This is one criterion, not certification of the complete store.
Keep secondary text readable
Descriptions, delivery notes and form help are often styled more faintly than headings. They still contain information customers need.
Do not make important conditions nearly invisible to achieve a quiet visual mood.
Use size, spacing and hierarchy alongside colour to distinguish secondary information without sacrificing legibility.
Separate decoration from meaning
A decorative accent can be subtle. A status such as unavailable or an error needs a clear non-colour explanation.
Do not rely on red versus green alone to communicate whether an option can be selected.
Labels and appropriate control states should carry the meaning even when colours are difficult to distinguish.
Review buttons in every state
Check normal, hover where relevant, keyboard focus, disabled and loading states. A palette that works for the idle button may fail when the background changes.
The selected or focused state should remain visible against nearby surfaces.
Do not assume the template's default state colours remain suitable after changing the brand accent.
Inspect images with overlaid text
A readable pair on a plain background does not guarantee readable text over a changing photograph.
Test the actual image crops on different screen sizes. Consider a controlled text panel when the photograph creates unpredictable contrast.
Do not force the image to accommodate text at the expense of showing the product accurately.
Keep page families connected
Apply the role system across home, collection, product, bag and checkout. Avoid a generic cart palette that abruptly breaks the storefront identity.
At the same time, preserve the clarity of totals, errors and required actions. Brand expression should not obscure the commitment stage.
Document the roles so later pages do not invent slightly different colours for the same purpose.
Check real content
Use long descriptions, small labels and genuine prices. A mood board with a few large words does not test the typography customers will read.
Inspect the page at ordinary viewing sizes and with relevant accessibility checks.
Do not claim a universal emotional response or conversion increase from a particular colour. The practical goal is consistent, usable presentation.
Maintain the palette deliberately
When a colour changes, recheck its combinations and states rather than updating only the homepage screenshot.
Keep the approved values and their roles in a simple reference for the implementer.
A strong palette gives the store a recognisable character while leaving the information easy to use. Visual restraint and accessibility are not opposing goals; they require deliberate combinations rather than indiscriminate use of a fashionable shade.
Test an ordinary maintenance change
Before freezing the palette, replace a product photograph with a much darker image and enter a longer category name. Check whether text still has a dependable background and whether labels remain readable. Then change the merchant accent to another plausible brand colour. If every change requires repairing individual buttons, the palette needs clearer functional roles. Document which colours are decorative and which are permitted for text, borders and controls so future edits do not silently undo the checks.
Examples are illustrative. Confirm current features, charges and suitability before making a business decision.
Explore this topic → · Find an oBizee setup guide · Ask about your store