A fitness app's light lime brand color measures about 1.5:1 against white; how should its design system pair it so the brand stays and every pair passes?
answer
- contrast belongs to a pair
- a light color is a strong background
- a darker brand-text step
- labelled buttons need no boundary
- decorative-only rows count too
basics
~20 sTreat contrast as a property of pairs: use lime as a fill with near-black content on it, add a darker brand-text step for text and icons on light surfaces, keep lime-on-white for decoration, and document each pair's permitted use.
solid answer
~50 sAt about 1.5:1, lime on white fails 4.5:1 for text and even the 3:1 for large text and non-text parts. But lime is not the problem; lime **on white** is. Flipped, near-black on lime is far above 7:1, so I would make lime a surface: hero cards, banners, primary action fills with dark labels. Under `1.4.11` a lime button with a readable dark label on white is fine, because the label identifies the control, though its focus indicator still needs 3:1. For text and icons on light surfaces I would add a deeper brand-text step from the same hue family, chosen to reach 4.5:1. A lime progress ring on white needs a 3:1 track or border, or a printed value. Lime on white stays for decoration only, and the logo is exempt. Then all three rows go into the approved-pairs table, including the decorative-only one.
go deeper
Remember that contrast belongs to a pair: a light color that fails as text on white can be an excellent background for dark text.
Explain which uses of lime pass where: as a fill with dark text, as a button with a label, as decoration, and why the text needs a darker sibling step.
Design the full set of pairs and non-text fixes, document the decorative-only row, and bring the brand team along with ratios rather than taste.
Negotiate the boundary between brand guidelines and system rules, deciding who owns the brand-text step and how new brand uses get checked.
## The problem A fitness-tracker companion app has a bright lime brand color. Against white it measures about 1.5:1, far below the **4.5:1** that WCAG 2.2 1.4.3 Contrast (Minimum) requires for text, and below the **3:1** that both large-scale text and non-text parts under 1.4.11 Non-text Contrast require. The brand team wants lime everywhere; the accessibility review wants it gone. Both positions miss that contrast is a property of a **pair**, not of a color. Lime is not an inaccessible color; lime on white is an inaccessible pair for text. Flip the pair and the picture changes: near-black text on a lime fill measures well above 7:1, because lime is so light. A very light color is a strong background and a weak foreground. ## The options, compared | Option | Brand impact | Contrast outcome | |---|---|---| | Darken the brand color everywhere until it passes on white | Lime becomes olive; the brand is lost | Passes, at the cost of identity | | Keep lime text on white and hope large sizes help | Brand intact | Fails even the 3:1 large-text minimum | | **Lime as a fill, dark content on it** | Brand prominent | Passes easily for any text | | **A darker brand-text step from the same hue family** | Brand still recognisable | Chosen to pass 4.5:1 on light surfaces | | **Lime on white only as decoration** | Brand visible | No requirement, because nothing depends on it | The usual answer combines the three bold rows. ## Building the pairs 1. **Lime as a surface.** Hero cards, the achievement banner, a primary action fill. Pair it with a near-black content role and document that pair for any text. 2. **A brand-text step.** Derive a deeper step of the same hue, dark enough to reach 4.5:1 on the light surfaces, for links, highlighted numbers and icons that must be read. Users still read it as the brand family. 3. **Non-text parts.** A lime progress ring on white fails 3:1 if the ring is the only way to read progress. Give the ring a darker track or border that reaches 3:1, draw it on a surface where lime passes, or print the count and goal as text so the arc is no longer required for understanding. 4. **Controls.** A lime button with a dark label on a white page is acceptable under 1.4.11 when the label identifies the control, because the boundary is then not required to contrast. The label must reach 4.5:1 against lime, and the focus indicator still needs 3:1 against its adjacent colors. 5. **Decoration.** Lime strokes in illustrations and backgrounds carry no requirement, as long as no information depends on them. 6. **The logo.** Text that is part of a logo or brand name has no contrast requirement, so the mark itself can stay as the brand defines it. ## Documenting it The approved-pairs table gets explicit rows: lime surface with dark content (any text), brand-text step on light surfaces (any text), lime on white (decorative only). The last row matters as much as the first two, because it tells teams what not to do in words they can find. Ratios go in unrounded, so nobody later rounds a borderline brand-text step into a pass. ## Working with the brand owners - Show the ratios, not opinions: 1.5:1 against a 4.5:1 minimum is not a matter of taste. - Lead with what the brand gains: lime as a large, confident fill is more visible than thin lime text ever was. - Get the brand-text step into the brand guidelines, so marketing and product stop diverging. - Agree how new brand uses will be checked before they ship. ## Why this is a senior question The mechanics are simple; the judgement is not. A weaker answer either sacrifices the brand or quietly ships failing text. A strong answer reframes the problem as pairs, keeps the color where it is strongest, adds exactly the steps that are missing, and writes the result down so the next team does not reopen the argument. The same reasoning applies to any very light brand color, such as a pale yellow or a soft cyan: it is a background first and a text color only through a darker sibling step.
- Why not simply darken the brand color everywhere until it passes on white?Because a lime dark enough to reach 4.5:1 on white reads as olive, and the product stops looking like itself. Keeping lime as a fill and adding a separate darker step only for text keeps the brand where it is strongest and fixes contrast only where text needs it.
- The lime button passes 1.4.11 without a contrasting boundary. What still needs checking on it?The dark label against the lime fill must reach 4.5:1 as text, and the button's focus indicator must reach 3:1 against its adjacent colors. The fill-to-page ratio can be low only because the label, not the boundary, identifies the control.
- Would bold lime text at a large size solve the problem on white?No. Large-scale text lowers the minimum to 3:1, but lime on white at about 1.5:1 is still well short of that, so size and weight cannot rescue this pair.
saying these in an interview costs you the question
- The brand color must be darkened everywhere, or abandoned, to pass WCAG.
- Making lime text bold and large makes it pass on white.
- A light color that fails as text is also a poor background.
- Every lime button needs a 3:1 border even with a readable dark label.
- Brand colors are exempt from contrast because brand guidelines mandate them.