Color token gap analysis

Every color rendered on the redesigned site, measured against the Wevise semantic token set. This is the list of what has to change for the site to match the design system — and the two places where the token set itself has a gap.

Measured Aug 25, 2026 · 17 pages on sandbox.wevise.org · computed styles, not stylesheet source

colors in use that match a token

colors in use with no token

pages measured

semantic tokens defined

The site does not currently use the token system anywhere meaningful. Of roughly 29 distinct colors rendered across the site, only white and one other value coincide with a token. Every navy, every body-text gray, every button fill and every link color differs.

This is expected — the tokens are new and the pages were built before them. It is stated plainly because the gap is total rather than partial, and that changes how the work should be sequenced.

Measured again on Aug 25 with a full accessibility audit running alongside — and the two results turn out to be the same result. Of the 14 accessibility failures still open at P1, eight are contrast failures, and every one of them is a color this analysis already flagged as off-token. Fixing the palette and fixing the accessibility failures are not two workstreams competing for the same pages. They are one change.

That resolves the sequencing question. The tokens are not a cosmetic follow-up to be done after launch — they are the remedy for the largest remaining category of WCAG failures.

The same colors, counted as accessibility failures

P1 contrast failures from the Aug 25 audit, by color. 74 occurrences in total.

Color	On	Failures	Why it is failing
`#A586E8`	`#F5F5F5`, `#FFFFFF`, `#F4FBFF`	42	Elementor’s global Accent, so it inherits everywhere. Has no token at any tint. 57% of all contrast failures on the site.
`#000000`	`#1B3A5C`	21	Black body text on the navy band. Both values are Elementor globals — one settings change, not 21 page edits.
`#3B7DD8`	`#FFFFFF`, `#F6F8FB`	6	The link blue, one shade too light. Token `#005EC8` passes on both.
`#8A98A8`	`#F5F5F5`	3	Coaching Corner bylines at 12px, 2.69:1. New to this run — the text was previously invisible, so it could not be measured.
`#00A0AB`	`#F6F8FB`	2	The cyan problem in numbers — brand-correct, contrast-wrong on light surfaces.

What has to change

Ordered by how widely each color is used. Counts are rendered elements across the 17 pages.

In use now	Where	Should become	Note
`#1B3A5C`	~600 text, 37 fills, all 17 pages	`#003367` `section-bg-dark` `#002652` `text-heading`	The site's navy. Two different tokens depending on whether it is a fill or a heading — they cannot both map to one value.
`#C7D3E3`	~380 text, all 17 pages	`#F6F8FB` `text-body-on-dark` `#9FACB9` `text-body-weak-on-dark`	Body text on dark sections. Choice depends on whether the text is primary or de-emphasized.
`#A586E8`	53 text, 35 fills, all pages	No token exists. See “Two gaps in the token set” below.
`#193334`	66 text, 7 fills, 6 pages	`#002652` `text-heading`	The current Elementor global “primary”. A near-black teal with no equivalent in the new system.
`#000000`	50 text, 4 pages	`#525C67` `text-body`	Pure black is deliberately absent from the token set. This is the current Elementor global text color.
`#2A6FD0`	20 text, 51 fills, all pages	`#016FEE` `btn-primary-bg` `#005EC8` `link`	Button fills and links. Currently one value doing both jobs; the token set separates them.
`#5B6B7F`	139 text, 5 pages	`#525C67` `text-body`	Near miss — see below.
`#00C896`	14 text, 23 fills, all pages	`#02E8AA` `section-bg-green` / `btn-green-bg`	Brand green. New value is noticeably brighter.
`#0A1B2E`	36 text, all pages	`#000F23` `section-bg-darkest`	Near miss.
`#12283F`	19 fills, all pages	`#003367` `section-bg-dark`	Near miss.
`#8FA4BF`	17 text, all pages	`#9FACB9` `text-body-weak-on-dark`	The footer legal line. Near miss, and the token is the exact role.
`#3B7DD8`	12 text, 3 pages	`#016FEE` `btn-primary-bg`	The older brand blue, still present alongside `#2A6FD0`. Two blues doing one job.
`#64717F`	19 text, 7 pages	`#677380` `text-weaker`	Post dates and captions. Near miss — 3 points away.
`#D5DEE9`	8 text, 6 pages	`#F6F8FB` `text-body-on-dark`	Hero sub-headings over photography.
`#F5F5F5` · `#F3F4F6` · `#F4FBFF`	25 fills combined	`#F6F8FB` `section-bg-light`	Three near-identical light grays where the system defines one.
`#00C9D4`	13 text, 5 pages	Matches brand Cyan exactly — but cyan has no semantic text token. See gaps below.

The near misses are the interesting part

Several values sit a few points from a token: #5B6B7F against #525C67, #64717F against #677380, #8FA4BF against #9FACB9, #F5F5F5 against #F6F8FB, #12283F against #003367.

That pattern says the site was built against an earlier draft of this same palette rather than against nothing. The intent already matches; the values drifted. It also means the visual change from applying the tokens will be smaller than the size of this table suggests — most of these shifts will be barely perceptible, with the navy, the green and the blue being the three that will actually read as different.

Two gaps in the token set

1. Purple has nowhere to go. #A586E8 is in use on every page — 53 text elements and 35 fills — and the new palette contains Navy, Blue, Green and Cyan, with no purple at any tint.

It is currently the Elementor global “accent”, which is why it appears everywhere at once. Someone has to decide whether those usages become Blue, Cyan or Green, or whether the palette gains a purple scale. This is the single largest open question in applying the system, and it is not a decision this report can make.

2. Cyan has no semantic text token. #00C9D4 matches brand Cyan exactly and is used as text on 5 pages — small caps eyebrows like “OUR TEAM” and “STORIES”. The token set gives Cyan only link-on-dark-alt, which is a link role, not an eyebrow role.

Worth noting on contrast grounds too: Cyan 400 on white is well under 4.5:1, so wherever these eyebrows sit on a light background they fail regardless of which token they end up using.

How to apply this

Not page by page. These colors live in per-widget Elementor settings, so a stylesheet cannot reach them generically and a find-and-replace across page data would be both enormous and unreviewable.

Three of the biggest offenders are Elementor global colors — the near-black #193334, pure black #000000 and the purple #A586E8 are the kit's Primary, Text and Accent. Changing those three values in Elementor's global settings updates every element that inherits them, in one place, with no page edits at all. That is the first move and it is cheap.

What remains after that is the per-widget overrides — navy headings, button fills, the three light grays. Those need a designer working through the pages in Elementor, which is Zoe and Morgan's work, not something to script.

Recommended order: set the three Elementor global colors first and re-measure — that alone should clear a large share of the table above. Then decide the purple question, because it blocks the accent. Then work the per-widget overrides page by page, re-running this measurement after each pass to see the count fall.

Method, and what this does not cover

Measured from computed styles on rendered pages, not from stylesheet source, so what is reported is what a visitor actually sees. The sandbox's own scaffolding — the red staging bar — is excluded.

Two accessibility patch files that had been applied to the sandbox were removed before measuring. They overrode several colors, and leaving them in place would have reported agreement with the token set that had been manufactured rather than found.

Not covered: colors inside images, colors that only appear on hover or focus, and colors in states this crawl did not reach — error messages, filled form fields, the open mobile menu. The status tokens in particular (error, warning, success) were not observed at all, because nothing on the crawled pages was in those states.