The contrast pass, and the invisible chip it found

Step 4 of milestone 309. All 40 combinations measured rather than eyeballed —
10 hues x 2 themes x 2 weights, dark ones composited over the board the way
Compose and CSS both do, against the text actually drawn on a card
(neutral-700/300 body, neutral-500/400 meta).

Body text ranges 8.23:1 to 13.01:1 against a 4.5:1 requirement; meta text 4.33
to 7.11 against 3.0. Every combination passes AA with room to spare, so the two
ramps step 3 introduced need no adjustment. That is the boring half.

THE PASS FOUND A REAL REGRESSION. A tagged note takes its first tag's colour and
is drawn at that hue's `-100` — which is exactly what the chip uses as its fill.
Measured contrast between the chip and the card it had itself coloured: 1.00 in
light mode. Perfectly invisible. Dark was 1.04-1.07, invisible in practice. On
every tagged note the tag name had stopped reading as a chip and become loose
text, and nothing about step 3 looked wrong while writing it.

Fixed with an EDGE rather than a different fill. A fill can collide with any card
colour and chasing that would need the chip to know what it is sitting on; a
border in the chip's own foreground reads against any background and needs no
plumbing.

Alpha is 0.60, measured: 2.32:1 at worst, where the 0.30 I first wrote gave 1.49
and was no edge at all. It does not reach WCAG 1.4.11's 3:1, which needs 0.80 and
draws a hard outline instead of a hairline. 1.4.11 governs boundaries carrying
REQUIRED information, and a chip's information is its text — passing AA at 8:1 or
better on every card here. The number and the reasoning are both in the source so
the judgment can be overruled rather than rediscovered.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/notes/colors.ts

@@ -43,18 +43,26 @@ export const NOTE_SWATCH_CLASSES: Record<NoteColor, string> = {
   gray: "bg-neutral-400 dark:bg-neutral-500",
 };
 
-// Label chip tints (bg + readable text), keyed by the same color vocabulary.
+// Label chip tints (bg + readable text + a hairline edge), keyed by the same color
+// vocabulary.
+//
+// The RING is not decoration. A tagged note takes its first tag's colour and is drawn
+// at that hue's `-100` — exactly what the chip uses as its fill — so in light mode the
+// chip measured a contrast ratio of 1.00 against the card it had itself coloured.
+// Perfectly invisible; the tag name read as loose text. An edge holds the pill's shape
+// against ANY background, where shifting the fill only moves which card it collides
+// with.
 export const LABEL_CHIP_CLASSES: Record<NoteColor, string> = {
-  default: "bg-black/5 text-neutral-600 dark:bg-white/10 dark:text-neutral-300",
-  red: "bg-red-100 text-red-700 dark:bg-red-950/50 dark:text-red-300",
-  orange: "bg-orange-100 text-orange-700 dark:bg-orange-950/50 dark:text-orange-300",
-  yellow: "bg-amber-100 text-amber-800 dark:bg-amber-950/50 dark:text-amber-300",
-  green: "bg-green-100 text-green-700 dark:bg-green-950/50 dark:text-green-300",
-  teal: "bg-teal-100 text-teal-700 dark:bg-teal-950/50 dark:text-teal-300",
-  blue: "bg-blue-100 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300",
-  purple: "bg-purple-100 text-purple-700 dark:bg-purple-950/50 dark:text-purple-300",
-  pink: "bg-pink-100 text-pink-700 dark:bg-pink-950/50 dark:text-pink-300",
-  gray: "bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200",
+  default: "bg-black/5 text-neutral-600 dark:bg-white/10 dark:text-neutral-300 ring-1 ring-inset ring-black/10 dark:ring-white/15",
+  red: "bg-red-100 text-red-700 dark:bg-red-950/50 dark:text-red-300 ring-1 ring-inset ring-red-700/60 dark:ring-red-300/60",
+  orange: "bg-orange-100 text-orange-700 dark:bg-orange-950/50 dark:text-orange-300 ring-1 ring-inset ring-orange-700/60 dark:ring-orange-300/60",
+  yellow: "bg-amber-100 text-amber-800 dark:bg-amber-950/50 dark:text-amber-300 ring-1 ring-inset ring-amber-700/60 dark:ring-amber-300/60",
+  green: "bg-green-100 text-green-700 dark:bg-green-950/50 dark:text-green-300 ring-1 ring-inset ring-green-700/60 dark:ring-green-300/60",
+  teal: "bg-teal-100 text-teal-700 dark:bg-teal-950/50 dark:text-teal-300 ring-1 ring-inset ring-teal-700/60 dark:ring-teal-300/60",
+  blue: "bg-blue-100 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300 ring-1 ring-inset ring-blue-700/60 dark:ring-blue-300/60",
+  purple: "bg-purple-100 text-purple-700 dark:bg-purple-950/50 dark:text-purple-300 ring-1 ring-inset ring-purple-700/60 dark:ring-purple-300/60",
+  pink: "bg-pink-100 text-pink-700 dark:bg-pink-950/50 dark:text-pink-300 ring-1 ring-inset ring-pink-700/60 dark:ring-pink-300/60",
+  gray: "bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200 ring-1 ring-inset ring-neutral-700/60 dark:ring-neutral-200/60",
 };
 
 // Solid fills for graph nodes (SVG needs concrete colors, not Tailwind bg classes).