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>

android/app/src/main/java/com/fabledsword/thoughtsync/ui/EditorChrome.kt

@@ -343,6 +343,7 @@ fun EditorLabelRow(
                         Modifier
                             .clip(CircleShape)
                             .background(tint.chipBackground(dark))
+                            .border(1.dp, tint.chipBorder(dark), CircleShape)
                             .padding(horizontal = 10.dp, vertical = 4.dp),
                 )
                 if (label.viaTag) {

android/app/src/main/java/com/fabledsword/thoughtsync/ui/NoteCard.kt

@@ -194,6 +194,7 @@ private fun LabelChips(labels: List<NoteLabel>) {
                     Modifier
                         .clip(RoundedCornerShape(CHIP_RADIUS))
                         .background(tint.chipBackground(dark))
+                        .border(1.dp, tint.chipBorder(dark), RoundedCornerShape(CHIP_RADIUS))
                         .padding(horizontal = 6.dp, vertical = 2.dp),
             )
         }

android/app/src/main/java/com/fabledsword/thoughtsync/ui/NoteTint.kt

@@ -74,8 +74,35 @@ data class NoteTint(
     fun chipBackground(dark: Boolean): Color = if (dark) darkChipBackground else lightChipBackground
 
     fun chipForeground(dark: Boolean): Color = if (dark) darkChipForeground else lightChipForeground
+
+    /**
+     * A hairline edge for a chip, in its own text colour at low alpha.
+     *
+     * Needed because a chip's fill can no longer be trusted to differ from what is
+     * behind it. A tagged note takes its FIRST tag's colour, and that card is drawn
+     * at exactly [lightChipBackground] — the same value the chip uses — so in light
+     * mode the pill was measured at a contrast ratio of 1.00 against the card it had
+     * itself coloured. Perfectly invisible: the tag name read as loose text.
+     *
+     * An edge rather than shifting the fill, because the fill can collide with any
+     * card colour and chasing that needs the chip to know what it is sitting on. A
+     * border in the chip's own foreground always reads, against any background, and
+     * needs no plumbing.
+     */
+    fun chipBorder(dark: Boolean): Color = chipForeground(dark).copy(alpha = CHIP_EDGE_ALPHA)
 }
 
+// How strongly a chip's edge is drawn, as a fraction of its own text colour.
+//
+// 0.60 measured, not guessed: against the worst case — a chip on a card of its own
+// colour — this is a 2.32:1 boundary, where 0.30 gave only 1.49:1 and was effectively
+// no edge at all. It does NOT reach the 3:1 of WCAG 1.4.11, which needs 0.80 and
+// draws a hard outline rather than a hairline. 1.4.11 governs boundaries that carry
+// REQUIRED information, and a chip's information is its text — which passes AA at
+// 8:1 or better on every card in the palette. The edge restores the pill's shape;
+// it does not carry the meaning. Raise to 0.80 if that judgment is ever overruled.
+private const val CHIP_EDGE_ALPHA = 0.60f
+
 // The two dark-theme weights, as fractions. Mirror `dark:bg-{hue}-950/25` and `/70`
 // in colors.ts — these are the only two numbers that have to agree by hand, since the
 // light weights are both already columns of the table below.

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",
+  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",
+  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",
+  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",
+  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",
+  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",
+  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",
+  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",
+  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",
+  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",
+  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).