Accessibility

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 trade

The brand green is a bright lime, and bright lime does not read as text on white. Measured against WCAG, #6dc402 on white is about 2.2 to 1 — below even the 3-to-1 bar for large text. That is why a second token exists: --color-green-text steps the green down to #5aa302, which clears 3 to 1. That is enough for large or bold text, for headings, and for interface accents like the focus ring, and it is used for those, not for body copy.

Passes AA Large text and UI only Fails the bar

The honest part: at body reading size on a light background, a green link sits at about 3.2 to 1 — past the large-text bar, short of the 4.5-to-1 bar for normal text. The site accepts that trade to keep its one brand colour, and softens it two ways. Article links are underlined, so colour is never the only signal; and dark mode resolves it outright, where the same lime on near-black reads at about 8.6 to 1. Body copy itself is always neutral, and always passes.

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.