Picking a brand accent usually happens against one background. You are staring at a dark hero, you try a colour, it sings, you commit. The problem arrives two sections later when the page flips to a light ground and that same colour comes with it.
For this site the accent is #C8F250, an electric lime. Against the ink
ground it measures a contrast ratio of 15.18:1 — far beyond
what WCAG asks for, and it looks the part. Against the warm off-white used for the
alternating sections, the same colour measures 1.50:1.
4.5:1 is the minimum for normal body text. 1.5:1 is not a near miss. It is roughly the contrast of pale yellow on white.
Where it actually bit
A washed-out decorative flourish is survivable. This was not decorative. The accent had been used for:
- The
01/02/03numerals on the process steps — real text, carrying real meaning - The diamond bullets on every service list
- The short rule that sits before each section eyebrow
The step numbers are the serious one. They are content. Anyone reading that section on a bright screen, or with even mild low-vision, would have been looking at three faint smudges where the structure of the process was supposed to be.
The fix is a second token, not a compromise
The instinct is to find one colour that clears 4.5:1 on both grounds. Resist it. A hue dark enough to read on off-white will be muddy and lifeless on near-black, and you will have traded a real accent for a colour that is merely adequate twice.
Keep the accent that works, and give it a light-ground twin in the same hue family:
--accent: #C8F250; /* 15.18:1 on ink */
--accent-on-paper: #4C6410; /* 5.88:1 on paper */The olive is unmistakably the same colour family — it reads as the brand, not as a second brand — and it clears AA comfortably. Anything meaningful on a light section uses it. The lime stays for dark ground and for the full-bleed accent panel, where it earns its keep.
Test it, don't eyeball it
We found the replacement by generating candidates and measuring them rather than nudging a colour picker until it felt right. Seven shades were scored against the actual paper value; the first that cleared 4.5:1 with headroom won. That took about a minute and removed the argument entirely.
The broader rule: a contrast check is per pairing, not per colour. If your design alternates grounds — and most good ones do — then every token needs checking against every ground it will actually land on. A palette that passes on your hero says nothing about the section below it.