Skip to content

--text-color-kumo-brand fails WCAG AA on --color-kumo-base in light mode (2.58:1) #733

Description

@lstan44

--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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions