accessibility

WCAG 2.2 audit

Every documented foreground × background pair, automatically scored against WCAG 2.2 §1.4.3 (AA) and §1.4.6 (AAA). Ratios computed from the actual values in colors_and_type.css — toggle the mode at the top right to score the dark-mode pairs. Thresholds: AA 4.5:1 normal text, 3:1 large text; AAA 7:1 normal, 4.5:1 large.

Body text on surfaces

The foundational combinations every paragraph and label hits.

Accent & links

Signal-blue links on every surface; the focus-ring's outline colour.

Status colours

Success / warning / error text. Large text (18px+ or 14px+bold) only needs 3:1.

Verified credential surfaces

Yellow tokens on the credential pill and framed card. These appear small in the UI, so the 4.5:1 bar applies.

Non-text contrast (§1.4.11)

UI components and graphical objects need 3:1 against their adjacent colour. Borders, focus rings, framed-card corners.

Notes on decorative classifications

WCAG 2.2 §1.4.11 applies to the parts of a UI component that are essential for identifying the component. The items below carry their identification elsewhere — the contrast on these elements is intentional and exempt.

1px rules are decorative dividers between sections. They do not carry information; sections are identifiable by their headings and spatial separation.
Verified-credential framing corners are the brand's asymmetric registration marks. The credential's identity is carried by the "VERIFIED CREDENTIAL" mono label (passes AAA) and the corner shape itself. Removing the corners or boosting their contrast would weaken the brand link to the logo's bracket motif — and the meaning is already redundantly encoded.
Verified-credential dot is paired with the literal text "Verified · kpn.nl". The dot is a brand reinforcement, not a primary identifier.

If a stricter compliance regime applies (e.g. an EU institutional procurement requiring 1.4.11 on every visible mark), an alternate component variant is available that adds a 1px ink stroke around the dot and the frame corners — see .vp.verified.is-strict and .cred.is-strict when implemented.