lablup / lablup/backend.ai-webui
Primary surfaces: white on the brand accent is 2.61:1 — should --color-on-accent or the accent change app-wide?
- Dominant language
- TypeScript
- Stars
- 133
- Forks
- 81
- Avg merge
- 1d 12h
- Merged PRs (30d)
- 355
Description
## Question
White on the brand accent is 2.61:1 — below WCAG AA. Should `--color-on-accent` (or the accent itself) change app-wide, or is the current pair a deliberate brand choice we keep?
## Where
- **Component**: every filled primary surface. Astryx `Button variant="primary"`, and now the selected tab count badge (`BAITabCountBadge`, FR-3706).
- **Page**: anywhere a primary button appears — e.g. `/session` ("Start Session"), `/data` ("Create Folder").
- **Recurs in**: app-wide. This is a theme-level pair, not a per-call-site choice.
## Current behaviour
`--color-on-accent` is `['#ffffff', '#ffffff']` in `react/src/astryx-theme/backendAiTheme.ts`, and its comment states the intent: "All shipped accents (orange, admin blue, secondary teal) are dark enough for white at both ends — and white-on-primary is what antd rendered."
Measured contrast of white against each shipped accent:
| accent | role | mode | ratio | WCAG AA (4.5:1 normal text) |
|---|---|---|---|---|
|—|—|—|—|—|
|---|---|---|---|---|
| `#FF7A00` | brand / user primary | light | **2.61:1** | fail |
|---|---|---|---|---|
| `#BE5E06` | brand / user primary | dark | 4.38:1 | fail (marginal) |
|---|---|---|---|---|
| `#028DF2` | admin primary | light | 3.45:1 | fail |
|---|---|---|---|---|
| `#0387BF` | admin primary | dark | 4.02:1 | fail (marginal) |
|---|---|---|---|---|
Measured live on `/session`, light mode: the "Start Session" primary button is `rgb(255,122,0)` / `rgb(255,255,255)` at 14px weight 500 → 2.61:1. The FR-3706 tab count badge is the identical pair at 12px.
## Why this is being raised
Copilot flagged it on the FR-3706 review. FR-3706 was scoped to making the badge follow the menu group's primary, and it does — but that means it now inherits whatever contrast the primary pair has. Changing the foreground for the badge alone would make it the only accent-filled surface in the app not using `--color-on-accent`, so the question belongs at the theme level, not at that call site.
## Options considered
1. Keep the pair. It is the antd-era treatment, it is brand-consistent, and it is what every primary button already does.
1. Darken the accent seeds enough for white to reach 4.5:1.
1. Switch `--color-on-accent` to a dark foreground on the light-mode accents.
1. Keep the pair for large/bold surfaces and change it only where the text is small.
## Impact if it stays as-is
Cosmetic-to-accessibility: legible for most users, but below the AA threshold for anyone with reduced contrast sensitivity, and it is the kind of thing an accessibility audit picks up first because it is on the most prominent control in the app.
## Environment
- **Mode**: both (all four accent values fail, dark less badly)
- **Build**: `main` @ 2026-08-26
## Evidence
- Ratios above computed from the live app's computed styles, not from the theme source.
- Copilot review thread on PR #9127.
## Notes
- Decided for FR-3706 specifically: keep the current pair in that PR, handle the design question here.
- Any change here is a theme edit and needs the full `THEME_NAME_REV` bump + `astryx theme build` artifact regeneration procedure.
JIRA Issue: FR-3714
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with react/src/astryx-theme/backendAiTheme.ts, then inspect Astryx Button, BAITabCountBadge, and the primary surfaces on /session and /data. Compare the four accent pairs in both modes and review the theme revision and build procedure. Done means an app-wide contrast decision is implemented consistently, THEME_NAME_REV is bumped, artifacts are regenerated, and the resulting contrast is verified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, design, frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 38/100