Dark mode: headings and the Builder Tag control fail WCAG contrast across the settings pages

Problem

In Night Ops (dark mode), headings, gauge labels and the large stat numbers across the settings pages render dark-on-dark. On the Benchmark page the Builder Tag dropdowns are effectively invisible.

Measured with axe-core 4.10.2 (color-contrast rule only) against v1.35.0-rc.1 in Chrome, not assessed by eye:

WCAG AA requires 4.5:1 for body text and 3:1 for large text.

Root cause

admin/inertia/css/app.css inverts each colour ramp for dark mode. The green ramp is inverted correctly — except for one token.

@theme {
  --color-desert-green-darker:  #2a2a15;
  --color-desert-green-dark:    #353518;
  --color-desert-green:         #424420;
  --color-desert-green-light:   #babaaa;
  --color-desert-green-lighter: #d4d4c8;
}

[data-theme="dark"] {
  --color-desert-green-darker:  #f7eedc;   /* inverted: dark -> light */
  --color-desert-green-dark:    #e8dfc8;   /* inverted: dark -> light */
  --color-desert-green:         #525530;   /* NOT inverted, stays dark */
  --color-desert-green-light:   #3a3c24;   /* inverted: light -> dark */
  --color-desert-green-lighter: #2d2e1c;   /* inverted: light -> dark */
}

--color-desert-green moves only from #424420 to #525530 — the comment reads "Accent green: slightly brighter for dark bg visibility" — while every neighbouring token in the same ramp flips across the lightness midpoint. So text-desert-green stays a dark value and is painted on the dark surfaces (#33311f, #2a2918), giving 1.68–1.89:1.

This single token accounts for most of the violations, because text-desert-green is the standard class for page and section headings and for the large figures:

• <h1 class="text-4xl font-bold text-desert-green">System Benchmark</h1> — 1.68:1
• <h2 class="text-2xl font-bold text-desert-green"> (every section heading) — 1.68:1
• <div class="font-semibold text-desert-green text-center text-base">CPU Usage</div> — 1.89:1
• <div class="text-5xl font-bold text-desert-green">1988.6</div> — 1.89:1

The worst case is the Builder Tag control

On /settings/benchmark, the three Builder Tag selects (<select class="px-3 py-2 bg-desert-stone-lighter border border-desert-stone-light …">, showing e.g. Mountain / Wolf / 2167) measure 1.15:1.

--color-desert-stone-lighter is correctly inverted for dark mode (#afafa5 → #5c5c54), but the text colour on those selects does not follow it, so the pairing collapses. This is the control a user operates immediately before submitting a score to the public leaderboard.

Steps to reproduce

1. Switch to Night Ops (footer toggle).
2. Open /settings/benchmark and /settings/system.
3. Observe the page <h1>, the section headings, the gauge labels, and the Builder Tag selects.

Optionally, in the console:

// with axe-core loaded
const r = await axe.run(document, { runOnly: ['color-contrast'] });
r.violations[0].nodes.length;

Suggested fix

1. Invert --color-desert-green for dark mode in line with the rest of its ramp, so text-desert-green is a light value on dark surfaces. A value in the #babaaa/#d4d4c8 neighbourhood clears AA against both #33311f and #2a2918.
2. Give the Builder Tag selects an explicit dark-mode text colour so they track their inverted background.
3. Worth re-running the axe color-contrast rule across the settings pages afterwards — the three pages sampled here differ by an order of magnitude (2 vs 19 vs 29), so other pages were not checked and may carry more.

Environment

• v1.35.0-rc.1, Chrome, Ubuntu 26.04 host
• axe-core 4.10.2, color-contrast rule only