Prototype · sample dataPrototypePUB-020 · Accessibility, language and content rulesStateScreens

WEB-01 · PAT-21

Accessibility, language and content rules

WCAG 2.2 AA is the bar for every screen, with open gaps listed here, layouts that mirror for Arabic, formats that follow each person's locale, and words that are plain and kind.

Contrast pairs

Open issue: dark teal links are just under AA

Dark teal (#0B7E78) on white measures 4.92:1. Small text needs 4.5:1. The brand team is asked to darken the token to #0A706B (5.93:1), which looks the same at a glance. Until then, use dark teal for links that are bold or 18 px and larger, and teal hover (#08655f, 6.91:1) for small teal text.

Sample	Text on background	Used for	Ratio
Book now	navy on card	Body text on cards	16.16 · AAA
Book now	navy on page	Body text on the page	15.09 · AAA
Book now	muted on card	Secondary text	5.21 · AA
Book now	teal-dark on card	Links and teal text	4.92 · AA
Book now	teal on card	Teal text on white (not allowed)	1.82 · Fail
Book now	card on navy	Primary button	16.16 · AAA
Book now	navy on teal	Accent button	8.86 · AAA
Book now	teal on navy-deep	Teal on dark surfaces	7.11 · AAA
Book now	success on success-bg	Approved badge	4.77 · AA
Book now	warning-text on warning-bg	Waiting badge	5.93 · AA
Book now	danger on danger-bg	Rejected badge	5.55 · AA
Book now	teal-hover on teal-soft	In review badge	6.31 · AA
Book now	card on danger	Danger button	6.57 · AA

Focus and keyboard

Everything works with a keyboard. Tab order follows the reading order.
Focus is always visible: a teal ring at least 2 px wide.
Dialogs trap focus, close with Esc and return focus to the button that opened them.
A Skip to content link is the first stop on every page.
Never use colour alone: statuses have words, errors have an icon and text.
Touch targets are at least 44 by 44 px, with 8 px between them.
Moving content can be paused; motion is reduced when the device asks.

Check this page

A quick automated check. Manual checks with a screen reader are still needed.

Large text

Layouts must hold at 200% text size.

Preview at 150%

Your consultation is confirmed

Thursday 14 November, 4:00 pm your time.

Other needs

Voice input: every field accepts dictation; search understands everyday words.
Reduced data mode: no autoplay, smaller images, offline trip wallet in the app.
Phone first: every screen is checked at 390 px wide with no sideways scrolling.