Accessibility

The standards the site is built to, measured against WCAG 2.2 with AA as the target. What follows is what the code actually does, including where the brand green forced an honest trade.

The standards

  1. Skip link and landmarks

    2.4.1 Bypass Blocks · A

    A keyboard visitor lands first on a Skip to content link that jumps past the chrome to the main region. The page is built from real landmarks: a main, labelled navigation elements, and a footer.

  2. Visible focus

    2.4.7 Focus Visible · AA

    Every control focuses to a two-pixel green ring set two pixels off the edge, shown for keyboard focus and not for a mouse click.

  3. Target size

    2.5.8 AA · 2.5.5 AAA

    Primary touch controls (the tab dock, sheet rows, the call-to-action pills) are 44 to 48 pixels; the smallest pointer control still clears 24. So every control meets the AA minimum, and the touch controls meet the stricter AAA size.

  4. Reduced motion

    2.3.3 · AAA

    When a visitor's system asks for less motion the site collapses every animation and transition to a hair over zero, and turns smooth scrolling into a plain jump.

  5. Theme parity, no flash

    Light and dark are both first-class: every surface is designed in both, and the theme resolves before the first paint so a dark-mode visitor never gets a white flash.

  6. Colour is not the only signal

    1.4.1 Use of Colour · A

    Links in article prose are underlined, so their meaning never rests on green alone.

The readable green

The brand green is a bright lime, and bright lime does not read as text on white: --color-green measures 2.2:1 there. Two decisions follow. Text that must sit on the green takes --color-on-green, a near-black ink at 8.8:1, which is why no button or skip link paints white on the lime. And green used as text takes --color-green-text, a deeper green that clears the 4.5:1 normal-text bar on every light ground it lands on: 5.6:1 on white, 5.2:1 on the tinted bands and 4.9:1 on the badge fill. Dark mode keeps the brand lime, which reads at 8.6:1 on the page.

A green link A green link
A green link
Token On white On near-black
--color-green
2.2:1 8.6:1
--color-green-text
5.6:1 8.6:1
--color-on-green
8.8:1 6.2:1

Passes AA Large text and UI only Fails the bar

This was a trade until August 2026. --color-green-text was a lighter green that cleared only the 3:1 large-text and interface bar, and only on white; on the tinted bands it dropped to 2.9:1, which is where the author card, the previous and next labels and the subscribe form's privacy link all sit. A token used in roughly a hundred places cannot be kept safe by a sentence describing where it belongs, so the value moved rather than the documentation, and every use now clears the normal-text bar in both themes. Article links stay underlined, so colour is never the only signal, and body copy itself stays neutral.

Scope

This covers the website. The React Native app and the email templates are their own surfaces, with their own standards, and are not documented here.

Spotted something wrong on this page? Email me