--text-color-kumo-brand fails WCAG AA on --color-kumo-base in light mode (2.58:1)
- Dominant language
- TypeScript
- Stars
- 3.9k
- Forks
- 177
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 48
Description
# `--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.
Contributor guide
Research direction
The reported declaration is in dist/styles/theme-kumo.css; start by locating the source definition that produces --text-color-kumo-brand and inspect its light-dark() branches. Verify the light value against --color-kumo-base with the WCAG relative-luminance calculation, ensuring the light branch reaches 4.5:1 while the dark branch remains passing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- accessibility
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 74/100