Skip to content
Site volume
Colourway

Get started

Legibility rules

The fifteen rules every page and component has to pass, how the press check measures each, and what it found last time.

  • Experimental

Overprint is allowed to be loud because it is strict about this page. The fifteen rules below are the contract: the token pipeline checks the colours before a component exists, and the press check walks every fixture in all 64 looks, runs axe and compares screenshots. A rule that fails stops the release. Personality is the bar; legibility is the floor.

Last verified 2026-10-24 at daed47d, over 80 looks.

checks in the last run
1,586,044
failures
24
looks
80

  1. Two layers

    Every text node sits on a flat, opaque plate. No art (canvas, halftone, grain, a giant glyph, an image marked as art, video) lies between a text box and its plate.

    How it is measured: The walker samples five points on every line box at every volume and reads the stack down to the plate.

    270,319 checked, 0 failed

  2. Body contrast

    Reading text is at least 4.5:1 and APCA Lc 75; long-form copy aims for Lc 90 and 7:1.

    How it is measured: The token pipeline checks every pair in every look; the press check reads the rendered colours.

    252,473 checked, 0 failed

  3. Size-aware contrast

    Every text role meets the APCA floor for its size and weight; no text colour has alpha below 1; nothing meaningful under 14 px and nothing at all under 12 px.

    How it is measured: The walker reads size, weight and colour of every text box and looks up the floor.

    262,175 checked, 0 failed

  4. Sanctioned pairs only

    Text on a coloured plate uses a generated pair token, and plates that carry body text stay out of the lightness dead zone.

    How it is measured: Every rendered text and plate pair must match a pair of its look within ΔE OK 0.005.

    232,644 checked, 0 failed

  5. Focus you can see

    Component edges and states reach 3:1; focus is a 2 px ring with a 2 px gap at 3:1 against everything around it, and is never hidden.

    How it is measured: A tab walk samples the ring's contrast and checks the focused element is the one under its centre.

    2,586 checked, 0 failed

  6. Targets

    Everything you can press is at least 24 by 24 px, and primary controls 44 px on phones.

    How it is measured: Bounding boxes of every interactive element at 390 px wide.

    1,632 checked, 0 failed

  7. Colour budget

    At rest, the share of saturated ink on screen stays inside the volume's budget: Quiet 10 %, Studio 35 %, Press 50 %, Rave 75 %; so does the count of distinct ink hues.

    How it is measured: The analyser reads screenshots of every template at three widths after motion settles.

    372 checked, 15 failed

  8. Chroma cap

    Any one region larger than a tenth of the viewport stays under the volume's chroma cap; small marks keep their full ink.

    How it is measured: The same analyser, over connected regions.

    148 checked, 0 failed

  9. No vibration

    Saturated neighbours differ enough in lightness, or sit apart on a neutral rule; red never buzzes against blue.

    How it is measured: An edge sampler on the Press and Rave screenshots of every template.

    60 checked, 0 failed

  10. Colour vision

    Meaning never rides on hue alone: every line ink and every status carries a letter, a word or a shape.

    How it is measured: Every line-marked element and status must show text or a glyph; the inks are checked under protan, deutan and tritan vision.

    11,120 checked, 0 failed

  11. Type discipline

    Body in Schibsted at 16 px or more with room to breathe; one display moment per view; the width extremes only for three words or fewer on one line; the second ink only on display type of 2 rem and up.

    How it is measured: Counts of display moments per case and per template, and the word and line counts of wide and condensed type.

    452 checked, 0 failed

  12. Square text

    Anything with words sits at 0 degrees at rest. Art, stamps, tape and the blocks may tilt; stickers land leaning and settle.

    How it is measured: The walker reads the cumulative rotation of every text-bearing element once animations finish.

    267,270 checked, 0 failed

  13. Calm motion

    Reduced motion leaves only short fades; ambient loops stop within five seconds at Quiet and Studio or show a pause control; hover never moves text.

    How it is measured: Animations under reduced motion, a frame counter that must reach zero, and text boxes measured before and after hover.

    473 checked, 0 failed

  14. Robust text

    Components survive the WCAG text-spacing overrides and a 320 px reflow without clipping or overlap.

    How it is measured: The spacing CSS is injected and every case is checked for overflow and overlaps at 320 and 1440 px.

    1,544 checked, 9 failed

  15. Complete and consistent

    One icon set, tokens only, lint at fail, real-length fixtures; sentence case and no em dashes in copy.

    How it is measured: Lint and the brand checks fail the build; the walker reports any em dash it renders.

    282,000 checked, 0 failed

What a rule is not#

A rule never says "be careful". Each one names the number it holds and the test that measures it, so an argument about legibility ends with a screenshot and a count, not a vibe.

Where the numbers come from

The budgets, caps and ink counts per volume are the tokens' volumes file, shown on the volume foundation. The pair floors are the APCA lookup by size and weight; every pair and its result in every look is on the colour foundation.