shared/references/color-and-contrast.md

# Color and Contrast

Use color as a role system, not a palette moodboard

## Assign color roles

Define only the roles the asset needs

- background
- surface or field
- primary text
- secondary text
- brand color
- accent
- status or semantic color
- material/environment color

A single color may serve multiple compatible roles

## Build value hierarchy first

Check the design in grayscale or mentally reduce it to light and dark masses

The hero, message, and supporting information should retain their intended order

Hue cannot rescue weak value structure

## Accent discipline

Use saturation where attention is needed

A highly saturated accent loses force when several other elements are equally saturated

Default to one dominant accent family unless the brand or concept needs more

Do not use a random complementary gradient as a substitute for a palette decision

## Brand color

Preserve supplied brand values when exact color fidelity matters

Do not flood the entire visual with the brand color by default

A brand can be recognizable through proportion, typography, image behavior, spacing, crop, and material choices as well as hue

## Text contrast

For digital text where WCAG 2.2 AA applies, target

- at least 4.5:1 for normal text
- at least 3:1 for large text

Logotypes are excepted from that specific contrast requirement

If the design surface or image generator cannot calculate contrast, treat these ratios as a verification target for a deterministic finishing step

Do not rely on drop shadows to rescue fundamentally low-contrast body copy

## Color as signal

Do not use color as the only carrier of a critical distinction

Combine with position, label, shape, weight, or pattern when the distinction must survive color-vision differences or poor displays

## Environmental color

In photoreal work, let surfaces pick up believable bounced color and reflections from the scene

Avoid color-grading the product so aggressively that the product no longer matches its real finish

## Common slop patterns

Reject by default

- black plus gold used as the entire argument for luxury
- cyan plus magenta used as the entire argument for technology
- rainbow gradients with no role structure
- every element using the brand accent
- low-contrast thin type over busy imagery
- multiple unrelated color temperatures in one scene without motivated sources