Two pairings fail. Both are tempting. Both are refused.
Ochre on chalk is about 2.1:1. Corn on chalk is about 1.9:1. Body text needs 4.5:1 under WCAG 2.2 AA. Neither pairing is anywhere near it, both of them look wonderful in a mock-up, and the build declines to render either.
The two failures, and what happens instead.
| Pairing | Ratio | Needed | What the build does instead |
|---|---|---|---|
| Ochre #E2871B on chalk #EDE6D6 | 2.1:1 | 4.5:1 | Uses ochre deep #8F4F07 at 5.1:1, or flips it so ochre is the ground and ink is the text at 5.9:1 |
| Corn #E9B93D on chalk #EDE6D6 | 1.9:1 | 4.5:1 | Uses the darkened corn companion, held to large text only, or ink on corn at 8.8:1 |
| Ochre on a reversed band | Varies | 4.5:1 | Every button on a moss, ochre or accent ground has its foreground forced to ink |
| Corn on ochre | 1.5:1 | 4.5:1 | Never rendered. It is the pairing the stylesheet names explicitly as the one to avoid |
How the guard actually works.
At authoring time
- Named in the tokens file
- The failing pairs are annotated in the stylesheet itself
- Deep variants published
- ochre-deep and the corn companion exist precisely so nobody reaches for the pigment
- Reversed grounds
- ground--ochre and ground--moss force their foreground to ink
At render time
- Buttons on accent grounds
- Foreground forced to ink, not inherited
- Eyebrows and links on ochre
- Forced to ink
- Headings on ochre
- Forced to ink
- Poster tiles
- Ochre and corn tones get ink text; every other tone gets chalk
What is not guarded
- Illustration plates
- They carry no text, so the question does not arise
- Chart fills
- Labelled in ink, outside the fill
- Beast marks
- Decorative, and aria-hidden
Why name the failures rather than delete the colours.
The obvious response to a pigment that fails contrast is to darken it until it passes. We did that, and the result is ochre deep — a perfectly good brown that is not the colour on the poster.
So both exist. The bright one is a ground and an illustration colour and it is the reason the site looks like the thing it is imitating. The dark one is the text colour. Keeping both, and naming the failing pairing in a comment in the tokens file, means the next person to open that file is told about the trap before they fall into it.
Deleting the bright pigment would have solved the accessibility problem and lost the identity. Keeping it without the annotation would have kept the identity and shipped something illegible about twice a year.
The guard, in two columns.
Enforced
- Every failing pair named in a comment in the tokens file
- A published dark companion for both failing pigments
- Foreground forced to ink on every accent ground
- Contrast ratios published on the palette pages, rounded down
- Focus rings that do not rely on colour alone
Refused
- Any body text on ochre or corn
- Any button label that inherits its colour from a bright ground
- Any ratio quoted more favourably than it measures
- Any colour used as the only carrier of meaning
- Any "it is only a caption" exception
This is not the whole of accessibility
Contrast is the part of accessibility that is easiest to measure, which is why it is the part everybody publishes. Reduced motion, focus order, target size, form labelling and sensible headings all matter at least as much and are harder to put in a table.
The questions the guard gets.
Because the bright one is the identity. A wheat-pasted farm-shop poster is ochre and corn, not brown and olive, and a site that removed them would be a tidier site that looked like nothing in particular.
Corn does, because it is the summer state and people reach for it. The other three are never used as text colours at all, so there is nothing to guard.
AA allows 3:1 for text above 24px, or 18.66px bold. Neither failing pair clears even that, which is why they are refused outright rather than allowed at display sizes.
On a demonstration build, probably. If you find one, it is a bug rather than a decision, and we would like to be told.
The palettes themselves.
Five pigments that move with the year, and five that refuse to.
