Keep the bold palette. Design the colour relationships.

A vivid brand colour does not have to serve every job in an interface. Keep it where it carries character, give text and controls deliberate foreground/background pairs, and inspect the actual states. Calling a swatch “accessible” skips the relationship that determines whether it works.

Blankout's Tactile and Modular expressions make the distinction visible. Both use yellow, blue and red, but their page grounds and colour roles differ. A colour that is useful as a large field may be unsuitable for small lettering on the page around it. The answer can be a different role for the same palette, rather than replacing every vivid colour with a muted one.

This Note includes a live matrix from the site's colour tokens. It is a small, reproducible example of testing pairs. It is not a conformance assessment of the whole website.

Start with duties, not a row of swatches

Name the surfaces and foregrounds you need: page ground, primary text, secondary text, control boundary, focus indicator and expressive field. Pair each field with a foreground. A palette sheet that gives only six hexadecimal values leaves those decisions to every person implementing it.

For Tactile, our yellow field is a muted acid yellow on warm stock. The paired text is dark. Blue and red fields use their own paired light foregrounds. Modular changes the fields and the surrounding ground; its pairs are separately measured. These are the current implementation choices, not a claim that the same pairs will suit another brand.

The live matrix below follows the selected expression. The ratios come from the actual token values, not a screenshot or a rounded colour estimate. Switch expression to inspect the different assignments.

Keep text, controls and colour meaning separate

W3C's minimum text-contrast guidance specifies 4.5:1 for ordinary text and 3:1 for qualifying large text, with defined exceptions. Its logo exception does not extend to surrounding interface text. Compare unrounded results to the threshold; a displayed 4.50 can conceal a value below 4.5.

Non-text contrast addresses visual information needed to identify controls, states and meaningful graphics, generally against adjacent colours at 3:1, with its own conditions and exceptions. A decorative divider and a boundary needed to identify an input do different jobs. They need not share one token simply because both are lines.

Use of Color concerns information conveyed through colour alone. Add a visible word, shape or other suitable cue when colour distinguishes a state. A red field named “error” in the design file is not enough if the rendered interface leaves the visitor to infer its meaning from hue.

Those requirements support different checks. Passing a text pair does not establish that focus is visible, an error is understandable, or every control can be operated. The commissioning brief should name the required accessibility target and the relevant review work, rather than treating a contrast export as the whole answer.

Repair the role before discarding the colour

The before specimen uses the expressive yellow as lettering. On the light Tactile ground it has little contrast. The repaired control keeps the yellow as a field and uses its dark paired foreground. The colour still carries the identity, while the text gets a clearer job.

In Modular, the dark ground changes that comparison. The live ratio may show that the same yellow works there as text. That is the point: a failure belongs to a pair and a use, not to the name “yellow.” Review the measured result in the selected expression instead of copying a verdict from the other one.

The repaired example is a real link. Reach it with the keyboard and inspect the focus state. Its text names the destination, and the arrow supports the action without being the only label. The deliberately poor specimen is a labelled teaching image in text form, not a broken control offered as the main way to continue.

Give images and states their own check

A solid colour pair cannot account for every image crop behind a heading. If text overlaps photography or generated artwork, inspect the actual crop at each important size. A locally dark patch may move away on a phone. A reliable text area, an intentional backing surface or a separate caption can be more maintainable than continually adjusting the picture around the words.

Check hover, focus, selected, error and disabled states where they exist. Use the same content when comparing states so that a shorter label does not disguise a layout problem. If two expressions are offered, both need the relevant checks even when they share the same component.

The pairing worksheet records foreground, background, measured ratio, intended use and the decision. Use it with actual control screenshots and keyboard observations. Keep the source values so another team can reproduce the calculation after a colour changes.

Make the colour decision maintainable

Store relationships where the next implementation can use them. A field and its paired text should travel together. Keep a separate role for text on the page when an expressive field colour cannot do that job. Name an owner for checking new combinations introduced by editors or future features.

Our handover demonstration follows one colour change through several outputs. The same principle applies here: a change is complete when the relevant pairings and states have been checked again. Blankout's identity work includes those application decisions alongside the palette itself.