check a11y contrast

Pale text that fails WCAG contrast

Every text-bearing element's colour against the background actually behind it, with the threshold its size earns (4.5:1, or 3:1 for large text).

Open the page under test · fixtures/a11y-contrast/low-contrast/page.html

Run it

vlmkit check a11y contrast fixtures/a11y-contrast/low-contrast/page.html

The four failures, outlined. The first line and the button pass.

What to look at

The large pale line passes at 3:1 only because it is large, and fails anyway at 2.54:1. Colours the browser serialises as oklch() or lab() are read back from a rasterised pixel, so none are skipped.

The fix

Darken the four inks to at least the ratio each needs.

What vlmkit printed

vlmkit check a11y contrast fixtures/a11y-contrast/low-contrast/page.html · exit 1 — the command fails, as a gate in CI would

  vlmkit check a11y contrast
  html: fixtures/a11y-contrast/low-contrast/page.html
  inspected 7 text-bearing element(s)
  ✗ 4 contrast failure(s)
    p.small-pale — 1.47:1 (need 4.5) — `#d1d5db` on `#ffffff` — "Small pale text fails at 1.6:1."
    p>a.light-link — 1.80:1 (need 4.5) — `#93c5fd` on `#ffffff` — "Read documentation"
    p.too-muted — 2.54:1 (need 4.5) — `#9ca3af` on `#ffffff` — "This subtitle is too muted to read comfortably."
    p.large-pale — 2.54:1 (need 3) — `#9ca3af` on `#ffffff` — "Large pale text passes at 3:1 because of font size."
  report: test-results/a11y-contrast/page-e9578509/report.md