Accessibility
Accessibility.
This site is built to meet WCAG 2.2 level AA. Below is what has been verified, what has not been verified yet, and the measured contrast of every colour pair in use, because a statement without the numbers is not worth much.
Version 1.0. Effective . Last reviewed .
1. Verified
With the evidence for each
| Item | Status | Detail |
|---|---|---|
| Colour contrast | Published | 46 pairs measured across both colour schemes, all published Generated from the palette by scripts/contrast-table.mjs and checked on every build, so the table cannot go stale. The single pair below 4.5 is named in it. |
| Light and dark | Published | Follows the device, with a three-way switch to overrule it One set of tokens carries both values in a single declaration, so a component cannot know which scheme it is on and the two cannot drift apart. Both are in the table below. The switch in the header offers Device, Light and Dark as a keyboard radio group, and Device is the state that stores nothing. The legal pages hold the light ramp whichever is chosen, because they are printed and filed, and the switch says so on this page rather than going quiet on them. |
| Keyboard operation | Published | Every control reachable, focus visible at every stop Driven in a browser on all 18 built pages in both colour schemes, tabbing every stop and reading the computed ring past the depth transition. 37 to 54 stops a page, 42 on average, and no stop without a ring. Also checked in forced-colours mode, where a box-shadow ring is thrown away and an outline has to replace it: three controls were relying on the shadow and now carry the outline. |
| Focus not obscured | Published | No focused control lands under the header The header is sticky only while it is one 72px row, and the document declares 88px of scroll padding so a focused control clears it. At 320 by 256 pixels, the viewport 1.4.10 names, the header is 194px and it is not sticky: pinning three quarters of a screen covered 22 of 40 tab stops on /security when it was. |
| Automated audit | Published | axe, zero violations on all 18 pages in both schemes Run against WCAG 2.0, 2.1 and 2.2 level AA plus the best-practice rules, at 1440, 1180, 402 and 320 pixels, counting violations rather than criticals. Earlier runs found the statutory footer at 4.47:1 and a scrollable region that could not be focused. Both are fixed and the palette table now measures the ground the footer sits on. |
| Reflow and zoom | Published | No sideways scrolling at any width from 1440 down to 320 All 18 pages at 1440, 1180, 900, 640, 402 and 320 pixels in both schemes, plus text at 200 per cent on the three narrowest. 320 pixels is 400 per cent zoom on a 1280 screen, which is what 1.4.10 asks for. |
| Named regions and heading order | Published | One H1 a page, no skipped heading level, every landmark labelled Read from the accessibility tree rather than the markup. The register card is exposed as a labelled region of term and definition pairs, the footer as a content information landmark carrying two labelled navigations, and the colour scheme switch as a group named "Colour scheme" holding three radios. The two footer column labels are paragraphs carrying an id rather than headings: as headings they added three navigation entries to the outline of every page, which is what this row exists to prevent. |
| No third-party request | Published | Zero, on every page in both schemes Counted at the network layer during the same browser pass, not inferred from the markup. Every request goes to this origin. |
| Independence from depth | Published | Nothing relies on a shadow With every box-shadow removed, all 9 controls on the busiest page stay identifiable by a fill, a border or an underline. The disclosure tiles failed this when they were added and now carry a real 1px border on the card and on the summary a reader clicks, which is also what makes them survive forced colours. |
| Reduced motion | Published | Honoured Under prefers-reduced-motion the depth transitions resolve to none. Motion is otherwise a 120 millisecond press. |
| Published | Relief removed, statutory block kept, one colourway Proved against the real print rules on all 18 pages in both schemes, on a clean page load and past the depth transition, and in all 6 combinations of device scheme and chosen scheme. Earlier runs found a ticked checkbox keeping its raised pair, two seams drawn as white hairlines that were invisible on white paper, and the debossed mark keeping its five filter layers for any reader who had used the switch, which printed the front door as a dark blob. |
Each row was checked against the built site rather than the source, and the working is in CHANGELOG.md.
2. Not verified yet
1 outstanding
This is a real gap and it is listed rather than left out. Until it carries a date, treat the conformance claim above as a target this site is built against rather than a result somebody has confirmed end to end.
The accessibility tree has been read, and it is what a screen reader consumes: the register card comes through as a labelled region of term and definition pairs, and the footer as a content information landmark. That is not the same as listening to a page, because order, verbosity and what a reader chooses to skip are only observable by using one. So it is not claimed here.
| Item | Status | Detail |
|---|---|---|
| Screen reader pass | Not published | Needs the reader used, the date, and what it found. The accessibility tree has been read and is correct, but that is not a substitute for listening to a page. |
The one item above is not published yet. Rather than a figure nobody has checked, this page says so. Ask brand@hellofixi.com and it is answered within 3 working days.
3. Nothing depends on seeing a shadow
Depth on this site is decorative. Every button, link and field also carries a border, a fill or an underline, so a reader who cannot see a shadow loses nothing. Motion is limited to a 120 millisecond press, and it is removed entirely when a browser asks for reduced motion.
The only JavaScript on this site is 468 bytes in two inline scripts, and both exist for one control: the colour scheme switch in the header. Nothing else on any page depends on scripting, so nothing here can break under a screen reader by failing to load. With scripting switched off every page reads and prints as it does with scripting on, and the switch hides itself rather than sitting there doing nothing.
The switch stays visible and operable on these legal pages, and it takes effect the moment you navigate. The pages themselves hold the light ramp whichever scheme is chosen, because they are printed and filed, and a contractual document that arrives in two colourways is a document somebody has to ask about. Hiding the control on those 6 pages would be the worse surprise: the header would change shape mid-site.
4. Measured contrast
46 pairs, palette cut 2026-07-30
Generated from the palette by a script and re-checked on every build, so the table cannot go stale while the colours move. Ratios are rounded down, so no figure here overstates a pair. The AA thresholds are 4.5 for body text, 3 for large text and 3 for non-text.
This site follows the colour scheme your device asks for unless you overrule it with the switch in the header, so both are measured and the scheme column says which one a pair belongs to. Teal 700 appears in both: it is the one dark section a light page is allowed, and it is every surface on the dark scheme. These pages, the legal ones, hold the light ramp whichever scheme you are on, because they are written to be printed and filed.
| Ink | Ground | Scheme | Ratio | Body | Large | Non-text | Role |
|---|---|---|---|---|---|---|---|
| Clay #96401F | Floor tint #E7E2D6 | Light | 5.32 | Pass | Pass | Pass | Not permitted: the one flag, light grounds only |
| Clay #96401F | Paper #FAF9F5 | Light | 6.53 | Pass | Pass | Pass | the one flag, light grounds only |
| Clay #96401F | Relief #EDE9DF | Light | 5.67 | Pass | Pass | Pass | the one flag, light grounds only |
| Clay #96401F | Teal 100 #D9E4E8 | Light | 5.31 | Pass | Pass | Pass | Not permitted: the one flag, light grounds only |
| Clay #96401F | Teal 700 #0F2F3D | Light and dark | 2.04 | Fail | Fail | Fail | Not permitted: the one flag, light grounds only |
| Clay #96401F | Teal floor #0C2833 | Dark | 2.23 | Fail | Fail | Fail | Not permitted: the one flag, light grounds only |
| Mist #B9D0D8 | Floor tint #E7E2D6 | Light | 1.24 | Fail | Fail | Fail | Not permitted: body text, dark scheme |
| Mist #B9D0D8 | Paper #FAF9F5 | Light | 1.52 | Fail | Fail | Fail | Not permitted: body text, dark scheme |
| Mist #B9D0D8 | Relief #EDE9DF | Light | 1.32 | Fail | Fail | Fail | Not permitted: body text, dark scheme |
| Mist #B9D0D8 | Teal 100 #D9E4E8 | Light | 1.23 | Fail | Fail | Fail | Not permitted: body text, dark scheme |
| Mist #B9D0D8 | Teal 700 #0F2F3D | Light and dark | 8.75 | Pass | Pass | Pass | body text, dark scheme |
| Mist #B9D0D8 | Teal floor #0C2833 | Dark | 9.56 | Pass | Pass | Pass | body text, dark scheme |
| Paper #FAF9F5 | Floor tint #E7E2D6 | Light | 1.22 | Fail | Fail | Fail | Not permitted: headings, links and primary edges, dark scheme |
| Paper #FAF9F5 | Relief #EDE9DF | Light | 1.15 | Fail | Fail | Fail | Not permitted: headings, links and primary edges, dark scheme |
| Paper #FAF9F5 | Teal 100 #D9E4E8 | Light | 1.22 | Fail | Fail | Fail | Not permitted: headings, links and primary edges, dark scheme |
| Paper #FAF9F5 | Teal 700 #0F2F3D | Light and dark | 13.33 | Pass | Pass | Pass | headings, links and primary edges, dark scheme |
| Paper #FAF9F5 | Teal floor #0C2833 | Dark | 14.58 | Pass | Pass | Pass | headings, links and primary edges, dark scheme |
| Stone #6B6559 | Floor tint #E7E2D6 | Light | 4.47 | Fail | Pass | Pass | Not permitted: mono labels and control hairlines, light scheme |
| Stone #6B6559 | Paper #FAF9F5 | Light | 5.49 | Pass | Pass | Pass | mono labels and control hairlines, light scheme |
| Stone #6B6559 | Relief #EDE9DF | Light | 4.77 | Pass | Pass | Pass | mono labels and control hairlines, light scheme |
| Stone #6B6559 | Teal 100 #D9E4E8 | Light | 4.46 | Fail | Pass | Pass | mono labels and control hairlines, light scheme |
| Stone #6B6559 | Teal 700 #0F2F3D | Light and dark | 2.42 | Fail | Fail | Fail | Not permitted: mono labels and control hairlines, light scheme |
| Stone #6B6559 | Teal floor #0C2833 | Dark | 2.65 | Fail | Fail | Fail | Not permitted: mono labels and control hairlines, light scheme |
| Teal 300 #7FA8B5 | Floor tint #E7E2D6 | Light | 1.98 | Fail | Fail | Fail | Not permitted: mono labels and control hairlines, dark scheme |
| Teal 300 #7FA8B5 | Paper #FAF9F5 | Light | 2.43 | Fail | Fail | Fail | Not permitted: mono labels and control hairlines, dark scheme |
| Teal 300 #7FA8B5 | Relief #EDE9DF | Light | 2.12 | Fail | Fail | Fail | Not permitted: mono labels and control hairlines, dark scheme |
| Teal 300 #7FA8B5 | Teal 100 #D9E4E8 | Light | 1.98 | Fail | Fail | Fail | Not permitted: mono labels and control hairlines, dark scheme |
| Teal 300 #7FA8B5 | Teal 700 #0F2F3D | Light and dark | 5.46 | Pass | Pass | Pass | mono labels and control hairlines, dark scheme |
| Teal 300 #7FA8B5 | Teal floor #0C2833 | Dark | 5.97 | Pass | Pass | Pass | mono labels and control hairlines, dark scheme |
| Teal 500 #2A5C6E | Floor tint #E7E2D6 | Light | 5.69 | Pass | Pass | Pass | secondary text and the statutory footer, light grounds |
| Teal 500 #2A5C6E | Paper #FAF9F5 | Light | 6.98 | Pass | Pass | Pass | secondary text and the statutory footer, light grounds |
| Teal 500 #2A5C6E | Relief #EDE9DF | Light | 6.06 | Pass | Pass | Pass | secondary text and the statutory footer, light grounds |
| Teal 500 #2A5C6E | Teal 100 #D9E4E8 | Light | 5.67 | Pass | Pass | Pass | secondary text and the statutory footer, light grounds |
| Teal 500 #2A5C6E | Teal 700 #0F2F3D | Light and dark | 1.91 | Fail | Fail | Fail | Not permitted: secondary text and the statutory footer, light grounds |
| Teal 500 #2A5C6E | Teal floor #0C2833 | Dark | 2.08 | Fail | Fail | Fail | Not permitted: secondary text and the statutory footer, light grounds |
| Teal 700 #0F2F3D | Floor tint #E7E2D6 | Light | 10.87 | Pass | Pass | Pass | links, the mark, primary fill, light scheme |
| Teal 700 #0F2F3D | Paper #FAF9F5 | Light | 13.33 | Pass | Pass | Pass | links, the mark, primary fill, light scheme |
| Teal 700 #0F2F3D | Relief #EDE9DF | Light | 11.59 | Pass | Pass | Pass | links, the mark, primary fill, light scheme |
| Teal 700 #0F2F3D | Teal 100 #D9E4E8 | Light | 10.84 | Pass | Pass | Pass | links, the mark, primary fill, light scheme |
| Teal 700 #0F2F3D | Teal floor #0C2833 | Dark | 1.09 | Fail | Fail | Fail | Not permitted: links, the mark, primary fill, light scheme |
| Teal 900 #08191F | Floor tint #E7E2D6 | Light | 13.89 | Pass | Pass | Pass | body text and headings, light scheme |
| Teal 900 #08191F | Paper #FAF9F5 | Light | 17.04 | Pass | Pass | Pass | body text and headings, light scheme |
| Teal 900 #08191F | Relief #EDE9DF | Light | 14.81 | Pass | Pass | Pass | body text and headings, light scheme |
| Teal 900 #08191F | Teal 100 #D9E4E8 | Light | 13.86 | Pass | Pass | Pass | body text and headings, light scheme |
| Teal 900 #08191F | Teal 700 #0F2F3D | Light and dark | 1.27 | Fail | Fail | Fail | Not permitted: body text and headings, light scheme |
| Teal 900 #08191F | Teal floor #0C2833 | Dark | 1.16 | Fail | Fail | Fail | Not permitted: body text and headings, light scheme |
5. If something is unusable
Write to brand@hellofixi.com and say which page and what happened. It will be acknowledged within 3 working days with either a fix or a date. A report from somebody who hit the problem is worth more than another audit, so please send it even if it seems small.