Text wears ink, not hue

Chart text wears ink; a colored key beside it carries identity.

From dataviz (references/marks-and-anatomy.md, palette.md).

Legend and end labels

Drag Label size to 24px and watch the ratios.

Needs 4.5:1
Text in series colorBad

      Ink text, colored keyGood

          .legend-item { color: var(--text-secondary); }
.key.s4 { background: var(--series-4); }
.end-label { fill: var(--text-secondary); }

          Labels inside a colored fill

          Switch White and Ink; each fails different slots.

          Bold · needs 4.5:1
          Always whiteBad

            White or ink by fillGood

              const onFill = (fill) => contrast(fill, WHITE) >= contrast(fill, INK) ? WHITE : INK;

              Any fill, three ways

              Type a hex or pick a slot.

              Resale
              As text
              $48k
              Fixed white
              $48k
              Picked

              Why it matters, pros and cons

              Why it matters

              Series hues are picked to differ from each other, not to pass text contrast. Six of eight light slots fail 4.5:1 as text.

              Pros

              • Every label clears 4.5:1 in both modes
              • Palette changes never touch text contrast
              • Identity survives grayscale via the key

              Cons

              • A key costs 12 to 20px per label
              • Mid-luminance fills cap below 4.5:1; go large and bold
              • Muted ink is 3.5:1; fine for ticks only