Choosing brand colours that remain readable
Choose colour roles as well as colour values: text, backgrounds, actions, accents and status messages need different treatment.
AI-assisted practical guide · Editorial approach
The useful starting point
Choose colour roles as well as colour values: text, backgrounds, actions, accents and status messages need different treatment. Test real text and controls for readability. A harmonious palette can still fail when used in the wrong combination or when colour is the only cue.
Understand the decision
Review the exact foreground and background pairings in the interface and printed materials. Small body text requires a different assessment from decorative shapes. Do not approve a palette without specifying which combinations are allowed. Keep functional messages understandable through words and symbols as well as colour, especially when different states must be distinguished quickly.
A practical approach
Review the identity in the smallest and most difficult places it must work: a mobile header, a label, a plain document and a real printed sample. Judge recognition and usability alongside appearance. Keep source files, export settings and asset ownership together so the next person can produce consistent work. An impressive presentation does not demonstrate that a system survives low-quality printing, long product names or a narrow screen.
- Define a role for every colour.
- Test text on actual backgrounds.
- Provide non-colour cues for important states.
- Review light and dark usage separately.
Illustrative example
A wellness business could keep a soft green for surfaces while using a darker approved colour for text. Its booking confirmation would include clear wording instead of relying on green alone. The exact contrast should be checked in the finished design, not inferred from the swatches in a brand deck.
A mistake to avoid
Do not assume a darker shade automatically meets an accessibility requirement. Test the actual pairing and text size in its intended use.
What to review
Track unreadable combinations and ambiguous controls during accessibility review, and add approved alternatives to the usage guide.
Turn the guide into a working brief
Prepare a compact usage sheet with approved files, minimum sizes, typography, colour roles and examples of acceptable variation. Ask the person who publishes everyday material to recreate one item using only that sheet. The mistakes they encounter are useful gaps in the system. Correct those gaps before a large rollout. Use genuine commissioned photography with permission where available; label illustrative imagery and record its source rather than presenting it as evidence of your people or premises.
Common questions
What should I prepare before asking for help?
Start with this checklist: Define a role for every colour. Test text on actual backgrounds. Provide non-colour cues for important states. Review light and dark usage separately. Add your business context, existing materials and the decision you need to make. A useful initial brief can include uncertainty; you do not need to invent answers before discussing scope.
How should I judge whether the work helped?
Track unreadable combinations and ambiguous controls during accessibility review, and add approved alternatives to the usage guide. Keep the observation period and definitions visible. Use the responsible team's evidence alongside the website journey; do not attribute every change in results to one asset or article.
Sources & scope
AI-assisted practical guide. Examples are illustrative; business-specific facts and sector claims need the responsible owner’s approval.
- W3C WAI: Images Tutorial
Reference for choosing appropriate image alternatives. Design methods and examples here are original practical guidance.
Use this guide to start your brief.
Share your business context, existing materials and what is still unclear. The guide title will be included so the conversation starts with the right problem.
Prefer email? Send a brief with this guide’s context.Related guides
How to test a logo before approving it
Test a logo where it will actually be used: small mobile headers, documents, labels and single-colour output.
Read the guide →A typography system for websites and proposals
A typography system assigns fonts, sizes, weights and spacing to repeatable roles.
Read the guide →Brand guidelines a small team will actually use
Useful guidelines answer everyday production questions with clear examples and accessible files.
Read the guide →