Short answer
Keep the brand colour for large areas, illustration and moments of identity, and derive darker (or lighter) variants of the same hue for anything that must meet contrast — text, links, button fills with white labels, focus rings. Most bright brand colours sit in a lightness band that is too light for white text and too dark for comfortable black text, so the fix is a sibling colour, not a compromise on legibility.
Brand colours are chosen to be recognisable and energetic, which usually means high chroma. High chroma in sRGB is only available in a middle band of lightness, and that band — roughly L* 50 to 70 — is exactly where contrast with both white and black is weakest. The table measures six CSS named colours as stand-ins for typical brand hues. Orange, gold, medium sea green and dodger blue fall short of 4.5:1 with white — orange and gold by a wide margin; crimson only just passes, and only the deep rebecca purple passes comfortably. Against black the bright ones pass easily, which is the other option: dark text on a bright brand fill is often more legible and more on-brand than a darkened fill with white text.
The standard fix is to add a darker variant of the brand hue for text, links and filled buttons, and to reserve the original for surfaces and graphics. Darkening in OKLCH while holding hue keeps the variant recognisably the same colour; darkening in HSL, or by mixing with black in sRGB, tends to shift the hue and dull it. The table's last column finds the smallest OKLCH lightness drop that reaches 4.5:1 with white for each colour, capping chroma at the sRGB boundary. For some hues the needed drop is large — yellows and oranges become browns before they pass — which is a sign to use dark text on the brand colour instead of a darkened brand colour behind white text.
WCAG's contrast criteria apply to text, to the visual information needed to identify controls and states, and to graphics needed to understand content. They do not apply to logotypes, to decorative illustration, or to large backgrounds with no text on them. That leaves plenty of room: hero bands with dark or appropriately sized text, illustrations, empty-state art, loading indicators that are also labelled, and the logo itself. The Understanding document for 1.4.3 notes that logotypes are exempt but suggests that a logo used as a control should still be offered in a sufficiently contrasting variant — a reminder that exemptions are about identity, not about interactive meaning.
The dark-mode problem is the reverse: a brand blue that passes on white may fall below 3:1 on a near-black surface, so the dark theme needs a lighter sibling. Plan both variants from the start, as tokens with the same role and different values per mode. On wide-gamut displays a brand can use a more saturated Display P3 version of its colour, which is closer to how many brand colours look in print or on signage; provide it with an sRGB fallback and check contrast on the fallback, since that is what most readers' devices will render. The gamut checker shows how far a P3 brand colour sits outside sRGB and what it maps to.
| Colour (CSS named) | With white | With black | Darkest-needed sibling for 4.5:1 with white |
|---|---|---|---|
| orange #FFA500 | 1.97:1 | 10.63:1 | #A56900 (OKLCH L −0.22) |
| dodgerblue #1E90FF | 3.23:1 | 6.48:1 | #0077DB (OKLCH L −0.08) |
| crimson #DC143C | 4.98:1 | 4.20:1 | already passes |
| mediumseagreen #3CB371 | 2.66:1 | 7.87:1 | #00884D (OKLCH L −0.13) |
| gold #FFD700 | 1.40:1 | 14.97:1 | #8C7500 (OKLCH L −0.32) |
| rebeccapurple #663399 | 8.40:1 | 2.49:1 | already passes |
Why: The brand colour sits in the mid-lightness band.
Fix: Use a darker sibling of the brand hue for text and links.
Why: It was darkened in HSL or by mixing with black.
Fix: Darken in OKLCH at constant hue, or switch to dark text on the original colour.
Why: The light-mode value was reused on a dark surface.
Fix: Add a lighter sibling for the dark theme under the same token role.
Each statement is labelled by kind — established fact, a standard’s requirement, observed market data, a convention, or Colourwise’s own interpretation or analysis — with the strength of the evidence behind it.
Colourwise analysisStrong evidence
Several bright CSS named colours commonly used as stand-ins for brand colours — orange, gold and dodgerblue — have a WCAG contrast well below 4.5:1 with white, while all of them exceed 4.5:1 with black.
Based on: Computed by Colourwise from the CSS Color 4 named-colour values with the WCAG 2.2 formula; see the table.
Source: CSS Color Module Level 4; Web Content Accessibility Guidelines (WCAG) 2.2
StandardStrong evidence
WCAG 2.2 criterion 1.4.3 exempts text that is part of a logo or brand name from its contrast requirement, and the Understanding document suggests offering a contrasting variant when a logo acts as a control.
Source: Web Content Accessibility Guidelines (WCAG) 2.2; Understanding Success Criterion 1.4.3: Contrast (Minimum) (WCAG 2.2)
ConventionModerate evidence
Apple advises supplying wide-colour (Display P3) colour and image assets with sRGB fallbacks.
Reviewed 29 September 2026. Colourwise summarises its sources in its own words and does not reproduce standards text or proprietary colour data. Spotted an error? Tell us.