--text-color-kumo-brand fails WCAG AA on --color-kumo-base in light mode (2.58:1)
Summary
With stock Kumo defaults and no theming, the shipped brand text token does not meet
WCAG 2.x AA (4.5:1) for normal text against the shipped light surface token.
--text-color-kumo-brand — #f6821f
--color-kumo-base (light) — var(--color-white, #fff)
- Measured contrast: 2.58:1 (AA normal text requires 4.5:1; AA large text requires 3:1)
Dark mode is unaffected: the same token against --color-kumo-base in dark
(--color-kumo-neutral-925, oklch(17% 0 0)) measures 7.42:1, which passes.
Version checked: @cloudflare/kumo 2.10.0, dist/styles/theme-kumo.css.
Reproduction
Token values read directly from the published package:
dist/styles/theme-kumo.css
--text-color-kumo-brand: light-dark(#f6821f, #f6821f);
--color-kumo-base: var(--color-white, #fff); /* light */
--color-kumo-base: var(--color-kumo-neutral-925, oklch(17% 0 0)); /* dark */
Ratios computed with the WCAG 2.x relative-luminance formula:
| foreground |
background |
ratio |
AA normal (4.5) |
#f6821f |
#ffffff (light base) |
2.58:1 |
fails |
#f6821f |
#0f0f0f (dark base) |
7.42:1 |
passes |
Why this looks like a bug rather than a deliberate tradeoff
The light-dark() declaration holds #f6821f for both modes, while every
other colour role in the theme flips. Since the token passes comfortably in dark
mode and fails in light, a single value spanning both modes reads like an
oversight rather than an accepted exception — the light branch is the one that
needed a different value.
Worth noting the neighbouring token is unaffected: --color-kumo-brand
(oklch(0.5772 0.2324 260) = #056dff) measures 4.53:1 on white, so the
default focus ring and the white-on-primary button fill both pass. This report
is specifically about --text-color-kumo-brand.
Suggested fix
Darken the light-mode branch of --text-color-kumo-brand until it reaches
4.5:1 on --color-kumo-base, leaving the dark branch as is — the token already
uses light-dark(), so this needs no structural change.
Context
We're adopting Kumo for a developer-facing product on Cloudflare Workers and
found this while building a contrast check against our design constitution.
Happy to open a PR if a suggested value would be useful.
--text-color-kumo-brandfails WCAG AA on--color-kumo-basein light mode (2.58:1)Summary
With stock Kumo defaults and no theming, the shipped brand text token does not meet
WCAG 2.x AA (4.5:1) for normal text against the shipped light surface token.
--text-color-kumo-brand—#f6821f--color-kumo-base(light) —var(--color-white, #fff)Dark mode is unaffected: the same token against
--color-kumo-basein dark(
--color-kumo-neutral-925,oklch(17% 0 0)) measures 7.42:1, which passes.Version checked:
@cloudflare/kumo2.10.0,dist/styles/theme-kumo.css.Reproduction
Token values read directly from the published package:
Ratios computed with the WCAG 2.x relative-luminance formula:
#f6821f#ffffff(light base)#f6821f#0f0f0f(dark base)Why this looks like a bug rather than a deliberate tradeoff
The
light-dark()declaration holds#f6821ffor both modes, while everyother colour role in the theme flips. Since the token passes comfortably in dark
mode and fails in light, a single value spanning both modes reads like an
oversight rather than an accepted exception — the light branch is the one that
needed a different value.
Worth noting the neighbouring token is unaffected:
--color-kumo-brand(
oklch(0.5772 0.2324 260)=#056dff) measures 4.53:1 on white, so thedefault focus ring and the white-on-primary button fill both pass. This report
is specifically about
--text-color-kumo-brand.Suggested fix
Darken the light-mode branch of
--text-color-kumo-branduntil it reaches4.5:1 on
--color-kumo-base, leaving the dark branch as is — the token alreadyuses
light-dark(), so this needs no structural change.Context
We're adopting Kumo for a developer-facing product on Cloudflare Workers and
found this while building a contrast check against our design constitution.
Happy to open a PR if a suggested value would be useful.