Bath for Kids — Accessibility Audit

The project

Bath for Kids is a responsive website helping families plan visits to Bath, UK — covering things to do, parks, and local attractions.

This case study covers an accessibility audit and remediation project across the site's design system, targeting WCAG 2.2 Level AA compliance per the DWP Accessibility Manual, spanning colour tokens, typography, heading structure, buttons, and navigation across all four built breakpoints.

Audit methodology

Rather than relying on visual judgement, every contrast claim was calculated directly from the design system's actual hex values using the WCAG relative luminance formula. This mattered: several colours that looked "close enough" on screen were confirmed as genuine failures once calculated.

The same rigour applied to verifying fixes — every claimed correction was independently checked at the node level (screenshots, component IDs, instance links) rather than accepted on a confident-sounding summary. This approach surfaced two implementation bugs a purely visual pass would likely have missed.

Gaps identified

The audit identified four categories of accessibility failures.

Key design decisions

Two decisions shaped the remediation approach.

Double-ring focus indicator

A single ring colour can't hit 3:1 contrast against every background in the palette. Two tokens — focus/inner and focus/outer — work together so at least one ring always clears the minimum regardless of what it sits on.

Breakpoint-specific heading sizes

Hero and section headings are intentionally smaller on Tablet and Mobile than on Desktop. The fix preserves that variation — semantic level (H1/H2/H3) stays constant while rendered size changes by breakpoint, mirroring practice in mature design systems like GOV.UK's own type scale.

Remediation

The corrected colour tokens now pass AA — for example, bg/hero moved from 3.24:1 to 4.78:1 against white text. Beyond the values themselves, 103 layers across three pages were found using hardcoded hex values instead of semantic variables and were re-bound, so future colour changes propagate automatically.

Focus states

The Focus state was designed and built across Primary and Secondary buttons and all NavBar links across every breakpoint.

Typography

A pre-existing, fully-specified typography system — never previously applied to a single layer — was recovered and reconciled against the built content. Exact matches were reused, drifted values corrected, and gaps filled, resulting in zero remaining manually-styled heading text across the site.

Verification as part of the fix

Verification was treated as inseparable from the fix itself, not a separate pass afterward. This surfaced two content bugs during the type-system reconciliation.

Results & open items

All three flagged colour tokens now pass WCAG AA. Focus states exist across all primary interactive components. Every heading across all eight frames is bound to a named style. Two structural component bugs were fixed at the source rather than patched per-instance.

Remaining work