Count badge fill fails WCAG 1.4.11 at 2.34:1 #60

New Issue

2026-07-28T08:56:48Z

archvillainette commented

2026-07-28 08:56:48 +00:00

Found while resolving wayfinder research ticket #50 (contrast headroom). Not part of that map — this is a shipped accessibility failure, filed separately so it does not wait on a planning effort.

Problem

scss/westgate/_controls.scss:619-622 fills the navigation and unread count badges with --wg-red (Dried-Blood #8e3438):

[component="navigation/count"],
[component="unread/count"] {
  background-color: var(--wg-red) !important;
  color: #f2dddd;
}

Measured against the surface behind it, that fill is 2.34:1. WCAG 2.1 SC 1.4.11 (Non-text Contrast) requires 3:1 for a component whose shape carries meaning — and a count badge does: its presence is the signal that something is unread, independent of the digit inside it.

The text is fine (#f2dddd on the fill measures 5.99:1). The badge shape is the failure, so it is invisible as an indicator to a low-vision user even where the number is legible.

PRODUCT.md sets WCAG AA as the accessibility target, so this is a target miss, not a nice-to-have.

Related, same root

scss/westgate/_posts.scss:215 sets #c55a5f for hljs-deletion, which passes AA by +0.01 — a rounding error away from failing. It is also a raw hex, not a token, so any palette re-tune will silently miss it. The same hex appears as a token at scss/westgate/_tokens.scss:98 (--wg-status-dnd) and scss/westgate/_wiki-prose.scss:29, which is exactly the kind of duplication that makes a colour change unsafe.

Notes for whoever fixes it

The fix is contrast, not palette identity: the badge can stay red-family and still clear 3:1.
The Sparing Red Rule in DESIGN.md says red is a state and a detail, never a large surface — a badge is a small surface, so the rule is not in the way here.
Verify in the live dev stack (../sow-nodebb, nix develop --command make dev), with a real unread count present, not just in a specimen.
Full measurement tables are in the resolution comment on #50 and in docs/research/palette-contrast-headroom.md on branch research/palette-contrast-headroom.

Found while resolving wayfinder research ticket #50 (contrast headroom). Not part of that map — this is a shipped accessibility failure, filed separately so it does not wait on a planning effort. ## Problem `scss/westgate/_controls.scss:619-622` fills the navigation and unread count badges with `--wg-red` (Dried-Blood `#8e3438`): ```scss [component="navigation/count"], [component="unread/count"] { background-color: var(--wg-red) !important; color: #f2dddd; } ``` Measured against the surface behind it, that fill is **2.34:1**. WCAG 2.1 SC 1.4.11 (Non-text Contrast) requires **3:1** for a component whose shape carries meaning — and a count badge does: its presence is the signal that something is unread, independent of the digit inside it. The text is fine (`#f2dddd` on the fill measures 5.99:1). The badge *shape* is the failure, so it is invisible as an indicator to a low-vision user even where the number is legible. `PRODUCT.md` sets WCAG AA as the accessibility target, so this is a target miss, not a nice-to-have. ## Related, same root `scss/westgate/_posts.scss:215` sets `#c55a5f` for `hljs-deletion`, which passes AA by **+0.01** — a rounding error away from failing. It is also a **raw hex, not a token**, so any palette re-tune will silently miss it. The same hex appears as a token at `scss/westgate/_tokens.scss:98` (`--wg-status-dnd`) and `scss/westgate/_wiki-prose.scss:29`, which is exactly the kind of duplication that makes a colour change unsafe. ## Notes for whoever fixes it - The fix is contrast, not palette identity: the badge can stay red-family and still clear 3:1. - The Sparing Red Rule in `DESIGN.md` says red is a state and a detail, never a large surface — a badge is a small surface, so the rule is not in the way here. - Verify in the live dev stack (`../sow-nodebb`, `nix develop --command make dev`), with a real unread count present, not just in a specimen. - Full measurement tables are in the resolution comment on #50 and in `docs/research/palette-contrast-headroom.md` on branch `research/palette-contrast-headroom`.

archvillainette added the needs-triage label 2026-07-28 08:56:48 +00:00

archvillainette removed the needs-triage label 2026-07-31 16:04:08 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ShadowsOverWestgate/sow-nodebb-theme#60