Built to WCAG 2.2
level AA.
This site is built to conform to the Web Content Accessibility Guidelines 2.2 at level AA. We test with a keyboard, with VoiceOver, and with the operating system set to reduce motion, before anything ships.
Conformance is a floor rather than an achievement, and no automated tool catches everything. The table below is generated at build time from the actual colour values this site ships, so it cannot drift out of date.
Measured colour contrast
Every combination in use, measured from the values this site actually ships. Two pairings are marked as failures and are not used for text anywhere — the stylesheet substitutes a passing colour automatically on the light ground, and the build fails if a page tries to use one.
| Pairing | Sample | Ratio | Level | Use |
|---|---|---|---|---|
| --jointsand on --bluehour | 11.3:1 | AAA | Primary text, secondary ground | |
| --jointsand on --ink | 14.2:1 | AAA | Primary text, primary ground | |
| --fog on --bluehour | 5.1:1 | AA | Secondary text on dark | |
| --fog on --ink | 6.3:1 | AA | Secondary text on dark | |
| --lamplight on --ink | 7.2:1 | AAA | Numerals, spec accents | |
| --lamplight on --bluehour | 5.7:1 | AA | Numerals, focus ring | |
| --ink on --lamplight | 7.2:1 | AAA | Primary button label | |
| --ink on --jointsand | 14.2:1 | AAA | Primary text, light ground | |
| --bluestone on --jointsand | 6.5:1 | AA | Body copy, light ground | |
| --bluehour on --jointsand | 11.3:1 | AAA | Mono labels, light ground | |
| --fog on --jointsand | 2.2:1 | FAIL | PROHIBITED | |
| --lamplight on --jointsand | 2.0:1 | FAIL | PROHIBITED as text |
Prohibited pairings
- --fog on --jointsand — 2.2:1 --fog never sets type on light. Use --bluestone (7.3:1).
- --lamplight on --jointsand — 2.0:1 --lamplight on light ground is fills and hairlines only. Section numerals on --jointsand are set in --ink for this reason.
What we have done
- Every interactive element takes a visible focus ring, drawn outside the element so a hairline border cannot swallow it. On dark grounds the ring is the accent; on the light ground and on accent fills it is near-black.
- The sticky bar on mobile never covers a focused field. The document reserves 84px of scroll padding and every field carries 100px of scroll margin.
- The hero, the gallery, the before-and-after slider and the consultation form are all fully keyboard operable. The hero pauses whenever it is hovered or focused, and carries an explicit pause control.
- Alt text is required on every image at the point of upload. The site will not publish a picture without it.
prefers-reduced-motionis honoured in both hero modes. The depth and the occlusion survive; the movement does not.- Every page uses semantic landmarks, a skip link, one H1, and headings in order.
- Tap targets are at least 44 × 44 CSS pixels.
If something does not work
Tell us and we will fix it. Email or call using the details in the footer, and describe what you were trying to do — we would rather hear about it than not.