F5.03.2Color-code interferencedesignresearch

Overlap between brand and semantic colour causes misreading

Aliases: hue collision · brand-status clash

What it is

A health product picks a medical-cross red as its primary; error notices are red as well. Header, campaign slot and failed validation share a screen, and people treat the header as an alert — or the real error as brand decoration. The role list can say “brand is brand, error is error”. If the two hues sit in one discriminable bin, what is read is still one colour.

Why it happens

Category judgements work on bins, not on token names. Two reds that are close in CIELAB fall into the same “warm, alerting” class; calling one brand and one danger does not retune the classifier. Misreading then runs both ways: brand surfaces become status, status surfaces become brand. The larger area wins — a header out-shouts one line of validation, so the page “alarms everywhere”, or the red sentence is dismissed as livery.

Overlap does not require an identical hex. Different lightness, same hue, still merges in peripheral vision. A thin stroke or a swapped icon helps someone already looking at that patch; it does not fix misclassification during a glance.

Studying it

Use Stroop-like interference: a brand-red header on the same screen as error-red inline text. Measure the judgement “is there an error?” and its latency. Independent variables: ΔE / hue-angle gap between brand and error, brand-colour area, presence of a non-colour cue. Dependent variables: false alarms, misses, first fixation.

Also ask “is this your brand?”. Overlap does not only mint false alarms; it can turn the real brand into noise on an error-heavy page.

Where it stops holding

  • Some industries are red (emergency, stop). Avoiding it entirely looks unlike the domain. Separate brand red from error red with shape, placement and copy rather than pretending the primary can go green.
  • Mono print, e-ink and strong colour-vision deficiency turn “somewhat alike” into “the same colour”; misread rates rise.
  • Users who have never met the brand will not read header red as identity — they will only feed it into status judgement, which is worse for newcomers.

Applying it

  • Measure hue angle between the brand primary and error / success / warning. If they share a warm or a green bin, change the secondary brand colour or the status slot; renaming the token is not a fix.
  • If the industry must keep that red, make error “red + icon + a fixed copy position”, and pull brand red out of banners and badges so it remains on the mark only.
  • Do not paint promo strips in brand red — that spreads the overlap from the header into the content.
  • How to check: print brand and error as two swatches; from a metre away, ask someone who has not seen the mockups which one means “something is wrong”. If they point at the wrong one or cannot choose, they are not yet apart.

Related

  • Same group: F5.03.1 Brand colour carries identity; functional colour carries state · F5.03.3 Brand colour should not emphasise anything except the primary action
  • Nearby: F5.02 Semantic colour · F5.10 Cultural colour semantics
  • Search terms: color-code interference · hue collision · brand color

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F5.03.2