How can website text stay readable without losing your brand colour?
A pale brand green can work well in a logo yet become difficult to read when used for small copy on white. There are options between abandoning the colour and using an identical shade everywhere. First define its role: text, background, emphasis or decoration. This article does not rate a brand’s complete accessibility. It offers a concrete workflow for checking foreground and background combinations during website design and handover.
List usage pairs rather than isolated swatches
Five colours in a brand presentation can produce many combinations on a website. Supporting copy sits on a light background, button text on an accent panel, and card headings over photographs. Record the foreground and immediate background together for every important component. A colour code by itself cannot describe contrast.
Prioritise information needed to act or decide: dimensions, form instructions, errors and links. A large decorative heading may be readable while its small explanatory copy is not. Do not limit the review to the homepage hero. Use pages filled with realistic content so the less prominent but important text receives attention too.
Connect measurements to design choices
WCAG’s text contrast criterion specifies at least 4.5:1 for ordinary text and 3:1 for large text. The large-text category has technical conditions; do not decide solely by how big something feels on screen. Ask the implementation team to check the calculated ratio using the actual foreground and background colours.
When a combination is insufficient, try darkening the text, lightening its background or putting image-overlay text in a solid panel. The original brand colour can remain in an accent line or decorative shape. The aim is not to make everything black, but to choose deliberately which colour performs each communication task.
Check difficult areas of photographs
A heading readable over a dark corner may land over a pale wall after mobile cropping. Do not rely on a photograph’s average colour. Try the different areas that could sit behind the text at different aspect ratios. If reliable readability cannot be maintained, separate the text from the photograph.
A translucent overlay depends on the picture below it. When an editor replaces the photograph later, the original measurement may no longer apply. Define a simple image-selection rule and an owner for the check. Review framing decisions alongside our mobile image art-direction guide, rather than treating the crop as an unrelated production step.
Compare text on the same background
Review the states, not only the default view
Inspect hover, keyboard focus and selected states as well as the default button. Where light and dark themes exist, review their combinations separately. Include useful text or symbols when meaning would otherwise depend on colour alone; an error should not be communicated only by a red border.
Keep a component-level record with the colour pair, observed issue and responsible person. A few successful measurements do not establish that the entire website is accessible. Our Erhan Mobilya project offers brand-presentation context; this illustrative palette was not taken from it. Share readability decisions as explicitly as visual assets in the website design handover, so later content changes can be reviewed consistently.
Frequently asked questions
Must we replace the brand colour?
Not necessarily. A darker shade may suit text while a lighter version remains useful for backgrounds or decorative areas. Measure the combination before deciding.
Does a contrast check prove full accessibility?
No. Keyboard operation, content structure, labels and other aspects need separate checks. This work provides evidence only about the colour combinations assessed.