Purposeful colour: contrast, brand identity and functional roles

A colour can look excellent on a large specimen and become difficult to read in a small label. A strong brand accent can highlight an action or compete with an error message. The important question is therefore not only which colours are selected, but what each one does.

This guide develops a system for a fictional consultancy. The anthracite, white and red palette is educational. Calculated contrast values apply only to the stated opaque sRGB pairs. They do not constitute a complete assessment of an actual website.

1. Give colour a task

Do not begin with a long list of attractive shades. Identify the roles first: page background, raised surface, main text, supporting text, primary action, border and status message. A colour may serve several roles when their context remains understandable.

Our consultancy uses a warm pale background for longer reading, dark text for basic legibility and selected red accents for actions and identity. These roles explain the eventual use more clearly than a collection of hexadecimal values.

Decide which roles the interface genuinely needs. A small information site does not automatically require ten status colours. A complex business application may need more distinctions. Extend the system deliberately when an additional requirement appears.

Document boundaries as well. A decorative surface can allow variation, while a confirmation message needs accurate wording and a meaningful state. Calling a colour “green” does not define what the application has actually confirmed.

2. Assess brand effect in context

Colour contributes to recognition, but works together with form, type, imagery and language. The same red surface can feel different in a restrained consultancy site and a promotion dominated by large prices and exclamation marks.

Avoid universal promises based on colour psychology. “Blue always creates trust” is not a useful project rationale. Audience, cultural setting, sector and the surrounding design affect interpretation. Explain the role of a colour within the complete identity instead.

For an existing brand, inventory the current identity first. Which colours are established? Which screen values are actually specified? A print reference does not automatically produce the same screen effect. Make that translation deliberately rather than inheriting a value from an arbitrary file.

Review a proposed palette on a home page, service description, form and dark presentation. A mood board communicates atmosphere. Application shows whether information and actions become understandable.

3. Name roles rather than isolated shades

Semantic names support maintenance. --color-text describes a purpose, while --dark-gray-2 mainly describes appearance. Base colours can retain technical names, but components benefit from referring to the roles they require.

:root {
  --color-page: #f3f0e9;
  --color-surface: #ffffff;
  --color-text: #202326;
  --color-action: #d00000;
  --color-on-action: #ffffff;
}
.service-card {
  color: var(--color-text);
  background: var(--color-surface);
}
.action-primary {
  color: var(--color-on-action);
  background: var(--color-action);
}

This sketch establishes colour relationships only. Spacing, focus and other interaction behaviour are not implemented. Names do not replace assessment either. Changing the action colour requires reviewing its accompanying text as a pair.

4. Assess contrast as a combination

A single colour is not inherently readable or unreadable. Its background and use determine the combination. White on a strong red may provide suitable text contrast while that same red against anthracite performs considerably less well.

The W3C explanation of minimum text contrast describes 4.5:1 for ordinary text and 3:1 for qualifying large text under the relevant AA criterion, along with exceptions. The conditions in that guidance matter to a complete assessment.

The values below were calculated for this article from the stated colours. Display values are rounded to two decimal places. Decisions near a threshold use the unrounded result; rounding should not make a failing value appear to pass.

5. Inspect actual rendering

A value in a design file is only a starting point. Transparency, overlaid surfaces and background imagery can change the visible combination. A partially transparent label cannot simply be evaluated as its original solid text colour against white.

Gradients need attention too. Text may be readable in one position and weak a few pixels away. A protective surface or a different image crop can be more reliable than assuming a shadow resolves every background.

Inspect the browser's actual values and the surface immediately behind the text. Image backgrounds require checking the intended crops. A mobile composition may place a different brightness behind the same label.

Our example therefore reviews image headings, cards, form instructions and the footer rather than just palette specimens. Each area has a different context. A strong result for body copy does not establish the legibility of every other label.

6. Communicate meaning beyond colour

The W3C explanation of colour use addresses colour as the sole visual means of conveying important information. Practical responses include explicit error wording and understandable identification of required inputs.

A red field border does not explain what is wrong. “Enter an email address we can reply to” identifies the correction. Its association with the relevant field also needs preserving. Colour supports that message rather than carrying it alone.

The same principle applies to charts. Describing a series only as “the red line” can make its identity hard to establish. Direct labels, patterns or distinct markers provide another relationship. Tables may benefit from written states rather than several unexplained coloured dots.

Links should not rely solely on a barely noticeable colour change either. An underline or another clear convention can communicate the function. Maintain that meaning throughout the site.

7. Separate actions from warnings

Strong brand colours are also often used in warnings. That overlap is not automatically a problem, provided shape, wording and placement explain the difference.

Red can identify a primary action in the example palette. A warning receives an explicit symbol, heading and explanation rather than looking like an ordinary action control. A red contact link, conversely, does not need alarming language.

Derive states from the actual process. Information, input errors, pending work and confirmed outcomes make different claims. A green panel should not imply successful delivery if a request has only been queued.

A state matrix records the trigger, wording, symbol and visual treatment. That makes the explanation consistent when several contributors later add features. The intended meaning remains explicit rather than being reconstructed from colour choices alone.

8. Include non-text contrast

Text is not the only relevant information. Input boundaries, selected states and meaningful parts of a graphic may also need contrast. Assess what is necessary to identify the component or understand the information in each actual case.

The W3C non-text contrast explanation discusses a general 3:1 relationship against adjacent colours under its stated AA criterion and exceptions. A decorative divider is different from the only visible boundary of a necessary input.

Review focus, selection and error indicators in their real states. A field can be recognisable normally but lose its orientation when focused on a coloured surface. An added symbol may help without automatically satisfying every other requirement.

Acceptance should include actual keyboard and selection journeys. Inspecting an active-state specimen is insufficient to show whether the indicator stands out during use within the whole page.

9. Maintain separate light and dark palettes

A dark presentation is not reliably produced by inverting every colour. Surfaces still need distinguishable levels. Text, borders and accents must suit the new backgrounds. A red suitable in light mode may be inadequate for small text on a dark surface.

Define the roles again for dark mode. The brand accent might remain in surfaces and decorative details while readable labels use white. The actual combination determines the decision.

Inspect images and logos too. A transparent dark wordmark can disappear against a dark header. A screenshot with its own light interface should not be indiscriminately inverted, because that changes the represented application.

Both modes share brand logic and functional meaning without requiring identical absolute values for every role. Document the mapping so that a new component is not tested in only one presentation.

10. Specify colours unambiguously

CSS supports several notations and colour spaces. A maintainable foundation records the values actually in use. Arbitrarily mixing near-identical colours creates unnoticed differences and makes later changes harder.

The MDN CSS colour reference explains available forms. A newer colour space is not an automatic quality guarantee. Supported browsers, actual rendering and assessed contrast still matter.

Explicit sRGB hexadecimal values are sufficient for this educational palette. A later expansion should deliberately address conversion and fallback behaviour. Do not assume that results from different tools are identical without checking their underlying representations.

Specify opacity as well. A partly transparent colour is a different decision from its solid equivalent. Surroundings become part of the visible result and therefore part of the review.

11. Keep an understandable assessment record

Record the element, state, foreground, background and assessed requirement. A list of isolated values does not show whether text qualified as large or which surface appeared behind it.

Retain the date and relevant version. New brand values, imagery or surfaces trigger reassessment of affected combinations. One successful specimen is not permanent approval of arbitrary future variations.

12. Avoid common mistakes

Weak supporting text is a frequent problem. Because information is considered secondary, it becomes almost invisible. A quieter placement with good readability is usually more useful. Importance and perceptibility are separate questions.

A palette made entirely of action colours creates another problem. If every surface advances equally, orientation disappears. Neutral and restrained regions are active design decisions because they make selected accents understandable.

Unreviewed state variants are also risky. A normal button may be carefully designed while hover is added through arbitrary lightening. That can reduce text contrast. Treat every variant as another actual combination.

Finally, colour cannot explain an undefined process. A confusing workflow remains confusing with a new palette. Establish meaning and sequence before designing how they are communicated.

13. Reproduce a simple contrast calculation

A small JavaScript function can calculate contrast for opaque six-digit sRGB hexadecimal colours. This educational example accepts only that narrow input form. It does not inspect a website, background images or transparent layers.

function luminance(hex) {
  if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new Error("Invalid sRGB hex");
  const channels = hex.slice(1).match(/../g).map(part => {
    const value = parseInt(part, 16) / 255;
    return value <= 0.04045
      ? value / 12.92
      : ((value + 0.055) / 1.055) ** 2.4;
  });
  return channels[0] * 0.2126 + channels[1] * 0.7152
       + channels[2] * 0.0722;
}
function contrast(foreground, background) {
  const a = luminance(foreground);
  const b = luminance(background);
  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
}
const ratio = contrast("#777777", "#ffffff");
console.log({ ratio, meets45: ratio >= 4.5 });

The return value remains unrounded. An interface can round its display while making the decision from the original number. The grey example shows why this matters: almost meeting a threshold is not the same as meeting it.

A production assessment tool needs additional requirements, including the origin of values, supported notations and treatment of transparency. A larger tool is not necessarily better if its calculation basis is unexplained.

Even a correct function answers only the mathematical part. Whether the text qualifies as large and what a graphic communicates depend on the actual use. A single ratio cannot replace that contextual judgement.

A practical workflow therefore identifies the visible combination, calculates the relationship and evaluates the applicable requirement on the actual element. This keeps the automated result distinct from the human assessment.

A concrete acceptance task can compare two messages: a successfully delivered enquiry and one still awaiting professional review. Both may use a friendly presentation, but they should not communicate the same claim. Review their explicit wording without colour first, then ask whether the visual treatment reinforces the distinction.

The same method works for table states. “Open”, “In progress” and “Completed” should retain their meanings without coloured backgrounds. Colour may support quick orientation, but should not be a prerequisite for understanding the record. A reviewer can inspect the words, the row relationship and the selected state as separate questions. That makes a proposed correction more precise than simply changing every badge to a brighter shade.

14. A reliable colour-system checklist

• Colours have named content and functional roles.
• Brand effect is reviewed on real pages, not specimens alone.
• Text contrast is assessed through specific pairs.
• Rounding does not disguise a failed threshold.
• Transparency, crops and gradients are included.
• Important states also use understandable wording or shape.
• Actions and warnings remain distinguishable.
• Focus and meaningful non-text cues are reviewed.
• Light and dark modes have complete role mappings.
• CSS values and actual rendering agree.
• Changes have a reproducible assessment record.

Common colour-design questions

Can the brand colour be used unchanged for every text?

Only when the particular combination and use are appropriate. A brand value alone does not guarantee legibility on every surface.

Does a strong contrast ratio establish complete accessibility?

No. Contrast is one important part. Structure, interaction, understandable content and other applicable requirements also matter.

Is a coloured chart sufficient without other labels?

If colour alone identifies the information, another recognisable relationship is missing. Direct labels or other distinguishing characteristics can help.

Sources and further reading

The linked W3C WAI explanations of text contrast, non-text contrast and colour, and the MDN reference, were checked on 9 November 2026. The example palette, calculation table and review workflow are original editorial material.

Continue with Assessing business website quality and Accessibility and the scope of Germany's BFSG.