A11Y-001: the kitchen display's page is its own ink

app/globals.css

@@ -409,6 +409,14 @@ body {
   overscroll-behavior: none;
 }
 
+/* The kitchen display (/display) is a dark presentation in either theme, with
+   its own ink (#0b1020) under a fixed wash. Its page is that ink too, so the
+   light theme's page colour does not show through, and a checker that reads
+   the page behind the fixed wash (axe does) measures against what is there. */
+body:has(.kitchen-display) {
+  background-color: #0b1020;
+}
+
 /* Prevent iOS/iPadOS Safari from auto-zooming (and visually shifting the page off
    to the right) when a form control with a <16px font is focused. Any focusable
    input/textarea/select must render at ≥16px on touch devices.

components/display/display-grid.tsx

@@ -756,7 +756,7 @@ function OwnedDisplayShell({ initialTiles, initialSettings, data, familyId, user
         className={cn(
           // A dark presentation in either theme: the light theme's palette
           // remap (app/globals.css) must leave its shades as drawn.
-          'keep-dark-palette flex min-h-dvh flex-col p-4 text-white sm:p-6 lg:p-6',
+          'kitchen-display keep-dark-palette flex min-h-dvh flex-col p-4 text-white sm:p-6 lg:p-6',
           // Kiosk fit: on large screens the display is exactly one viewport tall
           // and the tile grid divides whatever height is left — no page scroll.
           // (Edit mode restores normal flow so the settings panel can scroll.)

tests/the-kitchen-display-page-is-its-own-ink.test.ts

@@ -0,0 +1,23 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+
+// A11Y-001: the kitchen display (/display) is a dark presentation in either
+// theme. Its wash is a fixed -z-10 layer, not an ancestor of the text, so a
+// checker that reads the page behind it (axe) measured the light theme's page
+// colour instead: "Today's Schedule" white on #f6f7fc, 1.05:1, at 390 px. The
+// page under the display is the display's own ink now, which is also what a
+// light theme showed on overscroll.
+
+describe('the kitchen display’s page is its own ink', () => {
+  it('globals.css paints the body #0b1020 while the display is mounted', () => {
+    const css = readFileSync('app/globals.css', 'utf8');
+    expect(css).toMatch(/body:has\(\.kitchen-display\) \{\s*background-color: #0b1020;\s*\}/);
+  });
+
+  it('the display’s root carries the marker, beside its dark palette', () => {
+    const grid = readFileSync('components/display/display-grid.tsx', 'utf8');
+    expect(grid).toContain("'kitchen-display keep-dark-palette flex min-h-dvh flex-col");
+    // The same ink the wash starts from, so the page and the display agree.
+    expect(grid).toContain('fixed inset-0 -z-10 bg-[#0b1020]');
+  });
+});