Platform
A branded customer portal that stays accessible
Letting customers apply their own colours is a good feature and an accessibility hazard. How to allow branding without shipping unreadable text.
9 min read · Reviewed 2026-09-21
In short
Pull three or four candidate colours from the logo, pick one as the accent, and then derive everything else — a darker variant for text, a soft tint for backgrounds, a hover state. Check each derived colour against the surface it will sit on before you commit to it, and expect the brightest colour in the logo to be unusable for text.
A logo is designed to be seen at a distance on a background somebody chose. An interface palette has to carry small text, borders, disabled states and error messages on surfaces you cannot fully predict. Turning the first into the second is a real transformation, not a copy.
Extraction gives candidates, not answers
Automatic extraction — whether from a colour-picking tool or your own code — reliably returns colours that are in the image and unreliably returns colours that are meaningful. Common surprises:
- The most frequent colour is the background, which is usually white and therefore useless.
- Antialiasing along edges produces intermediate colours that appear in the histogram and exist nowhere in the design.
- A gradient becomes a dozen near-identical entries, crowding out a genuinely distinct accent.
- A logo with a dark outline yields near-black as a "brand colour".
So: extract, then choose by eye from three or four candidates. The chooser should be a person, once, not an algorithm every time.
One accent, then derive
| Role | How to derive it | What it must pass |
|---|---|---|
| Accent (graphics, fills) | The chosen colour | 3:1 against its background if it carries meaning |
| Accent text / links | The same hue, darkened until it passes | 4.5:1 against the page background |
| Soft tint | The same hue at very low saturation | Dark text on it must reach 4.5:1 |
| Hover | A small lightness step from the base | Visibly different without being a new colour |
| Focus ring | Do not derive — keep a fixed, tested colour | 3:1 against both the control and the page |
The second row is the easy one to skip, and skipping it is how a branded interface ends up with links you cannot read. A colour that looks vivid on a poster can measure under 2:1 on white: GENV's own accent, #00D4B2, is 1.90:1, while the deeper #008477 derived from it is 4.60:1. Deriving a darker text variant, automatically, from the same hue keeps the identity and makes the text legible.
Worked example, honestly
GENV's own palette makes this concrete. The brand teal is #00D4B2. Against white that is about 1.9:1 — below even the 3:1 a meaningful graphic needs, and nowhere near the 4.5:1 for text. It is right on the navy #0A2540, where it is vivid and clear, and it is right as a fill. So the design system keeps a second, deeper teal — #008477, around 4.6:1 on white — and uses that for links and text, while the bright one carries graphics and dark-mode text. Two teals, one identity, and nothing unreadable.
Publishing the actual ratios in your own design notes is worth doing. It turns "this looks fine" into a number somebody can check when they add a new component.
Do not let the palette carry meaning alone
Whatever the palette, statuses need words. WCAG 2.2 is explicit that colour cannot be the only visual means of conveying information, and the practical version is simpler: if your interface still works printed in greyscale, you are fine.
A short procedure
- Extract three or four candidates from the logo, discarding near-white, near-black and anything that looks like an edge artefact.
- Choose one accent by eye, on the surface it will actually appear on.
- Derive the text variant by darkening until it passes 4.5:1. Record the number.
- Derive a soft tint and check dark text on it.
- Leave the focus colour alone.
- Look at it in greyscale, and then at 360px on a phone in daylight.
Questions
What if the brand colour is yellow?
Then it will not be a text colour at any usable saturation, and darkening it far enough turns it brown. Use it as a fill and accept a neutral or a darkened complementary hue for links. This is a normal outcome, not a failure.
Should I support a full custom palette?
It multiplies the ways a customer can produce something unreadable and it rarely looks better than one accent used consistently. Start with one and add more only when somebody has a concrete need.
How do I check contrast?
The formula is in the WCAG specification and is a few lines of code. Doing it yourself, in the form, at the moment of choosing, is far better than asking people to paste colours into an external tool.
Sources
Official documentation, each requested on 21 September 2026. Provider behaviour changes; check the source before relying on a detail.