artifact-accessibilitylisted
Install: claude install-skill Lukehle/chartroom
# Artifact accessibility
Two framings, both true. The compliance one: some viewers cannot perceive colour differences, cannot
use a mouse, or use a screen reader. The practical one: **every accessibility fix here also makes the
page work in print, in greyscale, on a projector, and on a phone** — which is where board packs
actually get read.
---
## Never encode by colour alone
The rule that catches the most real failures. Around 8% of men have a colour vision deficiency, and
every printed deck is greyscale.
| Mark | Second encoding |
|---|---|
| Lines | Dash pattern, and a direct end-of-line label |
| Bars | Position, direct value labels, hatch/texture for a special category |
| Areas | Direct labels; ordering that matches the legend |
| Scatter | Shape as well as colour |
| Heatmap | Lightness ramp (already ordinal) plus values in cells |
| Up/down deltas | A glyph (▲▼) or the sign — colour reinforces only |
**The greyscale test:** apply `filter: grayscale(1)` to the page and read it. If two series become
indistinguishable, add an encoding. Do this before shipping, not after someone prints it.
Prefer **blue/orange** over red/green wherever the semantics allow. It survives every common form of
colour blindness.
---
## Contrast
| Element | Minimum |
|---|---|
| Body text | 4.5:1 |
| Large text (18px+, or 14px bold) | 3:1 |
| **Chart marks, axis lines, focus rings, control borders** | **3:1** |
| Decorative only | none, but ask why it is there |
The commonly missed on