Give each colour a job it can do

The supporting sentence is still part of the service

The small grey sentence beneath a price may be the part that tells you what you are buying. It can also be the first thing a design makes faint. A clear heading and a confident button do not help much if the condition beside them is difficult to read. I would start the colour decision with that sentence’s job, then decide how to make it quieter without making its information disappear.

The warm coral is not the problem in isolation. Its neighbour, the text size and the part it plays decide whether a pairing works. The same accent can fail as small lettering on cream and succeed as a filled background beneath dark words. That leaves a brand more room to repair the page than a verdict that its favourite colour is inaccessible. The calculated pairs below show two ways to keep it.

The original palette exercise here uses a cream canvas, dark ink, warm accent, muted grey and a darker accent. It is not an audit of the Hamsa website. The aim is to follow exact values through a design decision: which colours can carry ordinary text, which work as backgrounds, and which need another cue before they can communicate a status reliably?

Calculate the relationship, then name the requirement

WCAG’s relative-luminance definition converts the sRGB channels into linear values, combines them with specified weights, and uses the lighter and darker luminances in a contrast ratio. [1] The accompanying Python file follows that definition for opaque six-digit hex colours. It also checks two reference relationships: black against white gives 21:1; identical white against white gives 1:1. The five palette outputs are reproducible calculations, rather than judgements made by looking at a screenshot.

For ordinary text, WCAG’s minimum contrast criterion uses 4.5:1; qualifying large text uses 3:1, with specified exceptions. [2] Choose the requirement for the actual content before declaring a pass. A large display heading and a small form hint can share a colour token while needing different treatment. Enlarging a heading does not rescue the small sentence underneath it, and making every supporting sentence enormous is rarely a useful design repair.

Keep the full calculated number for a threshold decision. W3C explicitly warns against rounding a value up to the threshold. [2] A displayed ratio can be shortened for a table, but the comparison should use the underlying result. Also check the real foreground and adjacent background: transparency, a gradient or an image behind the words can make a nominal token pair an incomplete description of what the person is trying to read.

Five pairs, two ways to keep the accent

Warm accent #ef8065 against cream #f6f3ed produces approximately 2.3864:1. In this exercise it fails the ordinary-text requirement and also falls below 3:1. Using it for a small “Find out more” link is therefore a poor assignment. The colour can remain in decorative areas where it is not carrying required information, or become a filled background with a different text colour.

Dark ink #222a2a on the warm accent produces approximately 5.5462:1. This pair lets the button retain its warm fill while its label meets the ordinary-text contrast requirement. It repairs the foreground/background relationship, rather than changing the accent itself. The component still needs meaningful wording and suitable interaction states; this calculation establishes the specified colour pair’s contrast, with those other parts left for review.

For a text link on cream, darker accent #9b3824 gives approximately 6.3526:1. It can carry ordinary-sized words where the lighter accent cannot. The muted grey #8c918b against cream reaches only approximately 2.9002:1, so the proposed supporting copy fails too. Main ink on cream reaches approximately 13.2355:1. These results make a concrete revision possible: keep the light accent for warmth, use dark ink on its fill, and use the darker accent or ink for small information.

The highest ratio need not belong to every element. Placement, weight, size, spacing and wording can give a supporting sentence less prominence while leaving it readable. That is a better design problem than making the qualification faint enough to stop competing with the heading. Nor would swapping cream and coral fix their weak ratio: the same two luminances still enter the formula. The button works because its text becomes dark ink, changing the pair rather than merely reversing it. That distinction matters when a token system offers inverse variants which look different but carry exactly the same contrast limitation.

A label and a boundary answer different questions

Imagine an input with readable dark text but an almost invisible outline. The text contrast calculation does not establish whether the empty control is identifiable. Non-text contrast concerns meaningful visual information needed to identify controls and states, with a 3:1 adjacent-colour requirement and important qualifications about which visual information is necessary. [3] It is not a universal instruction to add a dark border to every object on a page.

Follow one component through its empty, filled, focused and error states. A dark entered value can coexist with a focus ring that disappears on a coloured panel; a passing button can acquire faint lettering on hover. Name the two surfaces in each check: ring against panel, error text against error background, value against input fill. The token name dark cannot establish any of those relationships. The surrounding page matters too. A variant that works on a pale card may not work in the footer. Give its author a supported choice—a suitable variant, another surface or a restriction on where it belongs—rather than expecting each page editor to rediscover and repair the same combination. A default text calculation remains useful, but it cannot supply the answer for all these different visible states.

Do not reduce a status to a coloured dot either. In an approval table, “Approved”, “Waiting for review” and “Needs changes” should remain distinguishable without identifying a particular hue. WCAG’s use-of-colour criterion asks that colour not be the only visual means of conveying such information. [4] Text labels, meaningful icons and shape can work alongside the palette. Their job is to preserve the distinction when colour perception or display conditions differ.

Review the page after the arithmetic

The downloadable HTML puts the same original sentence in each pair. It makes the comparisons available for inspection, including the deliberately weak examples. The ratios describe the specified opaque colours; how comfortably a person reads the page also involves type, spacing, display conditions and their own needs.

After repairing the pair, read the words in their actual position. Can the person see the qualification before committing, and does the button label remain available on its real background? Does the error explain the problem beside the field? A contrast spreadsheet will happily pass a sentence placed below the action it qualifies. The arithmetic and the information order need each other, because the reader needs both legible words and a chance to encounter them in time.

Record tokens by role when possible: body text on canvas, muted supporting text, action fill with its label, link text, focus indicator and status treatment. That makes a future brand adjustment easier to review than a collection of attractive unnamed hex values. If a colour changes, the associated pairs and states give the team a finite set of relationships to inspect. The brand can evolve without asking every page author to rediscover the same failure.

The five calculations leave the visual direction largely intact. The warm accent can keep its fill, dark ink can carry the button label, and the darker accent or ink can carry small text on cream. Statuses still need words or another meaningful cue. Keep those roles with the palette, so a future editor can understand why the same coral is welcome in one place and unsuitable in another without having to repeat the original argument.