How did you choose each site's accent colour?

We fetched each homepage plus up to three of its stylesheets, counted every declared colour (hex, rgb(), inline SVG fill, CSS keywords), kept the chromatic ones — saturation ≥ 0.30, lightness 0.12–0.88 — and took the most frequent. A meta theme-color declaration was weighted six times because it is the site's own statement of its brand colour.

Does this measure the primary button colour?

No. It measures the dominant accent declared in the site's CSS. On most sites that is the brand colour, but it is not guaranteed to be the exact fill of the primary button. Treat the numbers as a proxy for brand-colour legibility, not as a claim about a specific component.

Why do some sites pass with black text instead of white?

Contrast is symmetric: a mid-tone accent can be unreadable with white text yet fine with black. In this sample 0 accents failed with both. That is the useful finding: no brand colour is doomed, but 37.1% of them are paired with the wrong label colour.

Original data

37.1% of the brand accents we measured fail WCAG AA with white text

By Yao Xiangqian · 2026-11-11 · 6 min read · data: CSV

We pulled the dominant accent colour out of the CSS on 70 well-known homepages and checked it against WCAG 2.2. With white text — the default label colour on most brand buttons — 37.1% of accents (26 of 70) fail the 4.5:1 requirement, and 14 fail even the 3:1 large-text threshold. With black text, the picture inverts almost completely: 0 accents fail both. The colour is rarely the problem; the label colour is.

70homepages measured

37.1%accent fails AA with white text

14fail even 3:1 (large text)

0fail with both black and white

Why the label colour matters more than the brand colour

Contrast is symmetric but not symmetric in practice: designers pick white labels on brand buttons far more often than black, because white reads as "clean" on a saturated surface. The measurement says that instinct takes a mid-tone accent and drops it below the normal-text threshold.

Take a mid blue at #2560FF: 5.00:1 with white, which passes. Now the same hue one step lighter, #3B82F6: 3.68:1 — still fine to the eye, and below 4.5:1 on paper. The colour did not get worse; the pairing did.

How the sample behaves

Each bar is one contrast band; the value is the share of the 70 measured accents.

Accent contrast against white text	sites	share
below 3:1 — fails AA at every size	14	20%
3–4.49:1 — large text only	12	17.1%
4.5–6.99:1 — passes AA	31	44.3%
7:1+ — passes AAA	13	18.6%

The second row is the expensive one: 12 accents sit between 3:1 and 4.5:1. They look correct on a bright monitor and fail for body-size labels, which is exactly the zone that survives design review and ships.

By hue: warm and light accents are the ones that break

Pass rate at 4.5:1 with white text, by hue. Bands with fewer than two sites are omitted.

Hue band	n	median contrast with white	passes 4.5:1 with white
Yellow (45–70°)	2	1.26:1	0%
Green (70–165°)	9	2:1	33.3%
Cyan (165–200°)	2	2.54:1	0%
Orange (15–45°)	10	3.26:1	20%
Red (345–15°)	9	4.36:1	44.4%
Blue (200–260°)	33	5.37:1	90.9%
Purple (260–345°)	5	9.5:1	100%

Yellow, green and cyan accents are close to unusable as a white-text surface — the median yellow in this sample scores 1.26:1, which is effectively invisible. Blue is the only band where a majority of accents can carry white text, which explains why it stays the default accent of the web. The practical rule: the lighter or more saturated toward yellow the accent, the more likely the label should be near-black.

By category (small n, read as direction)

Category	n	median with white	passes 4.5:1	fails 3:1
SaaS	14	3.42:1	42.9%	4
Social	4	4.93:1	50%	0
Devtools	20	4.43:1	50%	6
Education	2	4:1	50%	1
Travel	3	4.58:1	66.7%	0
Media	8	4.71:1	75%	2
AI	4	6.47:1	75%	0
Fintech	7	6.04:1	85.7%	1
Enterprise	3	4.94:1	100%	0
Ecommerce	5	5.89:1	100%	0

SaaS and dev-tool sites — the categories with the most design-system investment — are also the ones whose accents most often fail with white text, because they favour vivid indigo and violet accents. Categories with two or three sites move entirely on one domain; do not rank them.

Five accents at the bottom of the distribution

	Category	Accent	with white	with black
Site 1	Fintech	`#CCFF00`	1.18:1	17.87:1
Site 2	Devtools	`#FEEC7B`	1.2:1	17.5:1
Site 3	SaaS	`#FFE01B`	1.32:1	15.93:1
Site 4	SaaS	`#B4D1FF`	1.55:1	13.5:1
Site 5	Devtools	`#1CE783`	1.64:1	12.81:1

Sites are numbered rather than named. The number is a property of the extracted colour, not a verdict on the brand, and a single CSS token is a thin basis for naming anyone. Note the last column: every one of these accents is perfectly readable with black text.

Five that carry white text well

	Category	Accent	with white	with black
Site 1	Devtools	`#000C2A`	19.34:1	1.09:1
Site 2	Social	`#161823`	17.66:1	1.19:1
Site 3	AI	`#141C2E`	17:1	1.24:1
Site 4	Fintech	`#112231`	16.19:1	1.3:1
Site 5	SaaS	`#172B4D`	14.1:1	1.49:1

If your accent is in the failing band

Try the label colour first. Switch white to #111827. It costs nothing, keeps the brand colour, and clears 4.5:1 for most mid-tone accents.
Then darken the hue, not replace it. A 12–18% lightness reduction in OKLCH usually lifts a mid-tone accent past 4.5:1 while staying recognisable.
Split the token. Keep the pure brand colour for large text and decorative fills; ship a darkened step as --brand-text for body-size labels and links.
Do not rely on the eye. Every failure above was invisible to the person who shipped it. Measure the pair, not the swatch — you can do it in the contrast checker.
Build the ramp up front. A ten-step scale from one hex gives you a compliant step for each state; the shades generator produces it in one click.

Method

Fetched each homepage and up to three linked stylesheets on 2026-11-11.
Counted every declared colour: hex, rgb()/rgba(), inline SVG fill, CSS colour keywords.
Kept chromatic candidates (saturation ≥ 0.30, lightness 0.12–0.88) and took the most frequent as the accent.
Weighted an explicit meta name="theme-color" six times — that tag is the site's own statement of its brand colour.
Computed WCAG 2.2 contrast with the relative-luminance formula against white and black.

Limits. 26 of 96 sites were dropped: bot protection (HTTP 403/429), a page whose colour lives only in an image, or no chromatic declaration at all. This measures a declared CSS colour, not a rendered button, so treat it as a proxy for brand-colour legibility rather than a component-level audit. The sample is hand-picked well-known domains, not a traffic-weighted ranking.

Download the CSV (70 rows)

node tools/brand-contrast-study.mjs .   # crawl + measure
node tools/gen-study-article.mjs .      # rebuild this page from the data