Reference

Design system

Every ratio was computed with tools/a11y/contrast.py against all three grounds. This page is noindex: it documents the template for whoever builds with it.

The verification is a disclosure

Each check is an <article> and its thirty-second how-to is a <details> inside it. The check is the argument; the how-to is reference material, and open by default it would triple the length of a section people came to skim. Seven disclosures in the spine plus six in the FAQ is also the clearest structural difference between this template and the four before it.

The only picture is drawn

Two SVG wireframes of the same panel — quads with loops where it bends, and the same silhouette triangulated evenly with a fan through the deforming area. It is the one argument on the page a table cannot make, and there is no photograph of a mesh, so it is vector. Both are aria-hidden; the caption states the whole point in text, and the two labels are words before they are colours.

Pass and fail are not the accent

--check-ok and --check-bad are separate tokens from --color-accent, because on a page whose content is a checklist “passes” must not be the same colour as a heading. Every state is also a word in a bordered chip, so the colour is the third signal and carries nothing alone.

The list cuts both ways

The seven checks are asserted against this studio's own deliveries, not offered as a critique of other people's. That is a content decision rather than a design one, but it is the reason the section is worth having: a checklist a portfolio does not submit itself to is marketing wearing a lab coat.

Type

Tokens

The border token clears 3:1 against all three grounds, which is what WCAG 1.4.11 asks of a non-text boundary. It is never used for text.