If a player can’t read your content, find your tools, or navigate your features, you’ve failed before voice and tone even matter. Accessibility is the floor everything else stands on, and the standards here follow the W3C Web Accessibility Initiative. This chapter sets one clear baseline and then walks the three domains that decide whether a real person can use what you built — visual, cognitive, and motor.
WCAG 2.1 Level AA is the practical baseline for all Playbook digital content — not aspirational, required. Level AAA is recommended for the things that matter most: contrast on helpline numbers, CTAs, and support links; text resizing to 200% without breaking; and extended audio descriptions for video.
Legal frameworks by region
Accessibility is also the law in every major market Playbook operates in. The framework differs by jurisdiction, but the practical bar is consistent: meet WCAG 2.1 AA and you satisfy the substance of each one.
| Jurisdiction | Applicable law | Requirement |
|---|---|---|
| United States | ADA, Section 508, state laws | Web accessibility for public accommodations. |
| European Union | European Accessibility Act (EAA), EN 301 549 | Digital products and services. |
| United Kingdom | Equality Act 2010 | Reasonable adjustments for disabled users. |
| Australia | Disability Discrimination Act 1992 | Web accessibility for services. |
| Canada | Accessible Canada Act, AODA (Ontario) | Digital content accessibility standards. |
Visual accessibility
Visual accessibility is mostly about two things: making sure text has enough contrast against its background, and never relying on color alone to carry meaning. Get these right and your content works for players with low vision, color blindness, or a phone in bright sunlight.
Color contrast minimums
Every piece of text and every interactive element must clear these ratios, drawn straight from the WCAG 2.1 quick reference.
| Element type | Minimum ratio | Standard |
|---|---|---|
| Normal text (under 18px / under 14px bold) | 4.5:1 | WCAG 2.1 AA |
| Large text (18px+ / 14px+ bold) | 3:1 | WCAG 2.1 AA |
| UI components (buttons, fields, icons) | 3:1 | WCAG 2.1 AA |
| Critical content (helpline numbers, support links) | 7:1 | AAA (recommended) |
Check it with the WebAIM Contrast Checker, Colour Contrast Analyser (CCA), the Chrome DevTools accessibility panel, or the Figma Stark plugin. The full contrast matrix lives in Color.
Color independence
Color can reinforce meaning, but it can never be the only signal. Always pair it with an icon, a label, or text.
| Instead of… | Use… |
|---|---|
| Red text for warnings | Red text + warning icon + “Warning:” label |
| Green for success | Green + checkmark icon + confirmation text |
| Color-coded chart | Color + patterns + labels |
| Red/green for over/under limit | Color + text (“$50 remaining” / “Limit reached”) |
Text and typography
Size and spacing
- Body text: 16px (1rem) minimum. No exceptions.
- Line height: at least 1.5× for body text.
- Paragraph spacing: at least 2× the font size.
Flexibility
- Resizing: content stays functional at 200% text size.
- Touch targets: 44×44px minimum for interactive elements.
- Real text only: never bake text into images — use HTML and CSS.
Cognitive accessibility
Players arrive in every kind of state — relaxed and curious, stressed and looking for help, tired after a long session. Cognitive accessibility means designing for all of them at once: plain language, a predictable layout, and as little mental load as the task allows.
Plain language
- Write at Grade 6–8 reading level (Flesch-Kincaid).
- Common, everyday words; one idea per sentence.
- No double negatives; define any acronym on first use.
Clear navigation
- Consistent layout — tools live in the same place every time.
- Predictable behavior from interactive elements.
- Current limits and settings always visible.
- No time limits on decisions; never auto-dismiss important messages.
Reduced load
- Front-load the key information — the essentials visible without scrolling.
- Progressive disclosure: show essentials, let users expand for detail.
- Minimize form fields; pre-fill sensible defaults.
- Confirm irreversible actions like self-exclusion and limit changes.
Plain language is where accessibility and the Playbook voice meet. The Grade 6–8 target, short sentences, and one-idea-per-line rules are the same ones in Voice & Tone — accessible copy and on-brand copy are the same copy.
Motor accessibility
Motor accessibility means anyone can operate your content without a precise mouse or a steady hand — by keyboard alone, by switch device, or with a thumb on a phone. Two things carry most of the weight: full keyboard operability and generous touch targets.
Keyboard navigation
- Tab order is logical and follows the visual layout.
- Focus indicators are visible on every element — at least 2px, high contrast.
- Skip links let users jump straight to main content.
- No keyboard traps — users can always navigate away from any element.
Touch targets
- 44×44px minimum for all interactive elements.
- 8px minimum spacing between adjacent targets.
- 48×48px for critical CTAs — helpline and self-exclusion.
Mobile-specific accessibility
Mobile is where more than 60% of players gamble, often one-handed and on the move. Mobile accessibility goes beyond desktop patterns — and you have to test on real devices, because emulators don’t accurately reproduce touch targets, haptics, or screen-reader gesture conflicts.
| Requirement | Standard | Why it matters |
|---|---|---|
| Touch targets | 44×44px minimum; 48px for critical CTAs | Helpline buttons, self-exclusion, limit setting |
| Thumb zone | Primary actions in the bottom two-thirds of the screen | One-handed play means CTAs must be reachable |
| Orientation | Support both portrait and landscape | Some players lock orientation |
| Zoom | Never disable pinch-to-zoom | Players with low vision need to zoom |
| Text scaling | Honor system font-size settings up to 200% | Respect OS-level accessibility preferences |
| Screen-reader gestures | Don’t override swipe gestures | Custom swipe handlers break VoiceOver navigation |
Screen reader compatibility
Most screen-reader support comes free when you use the right HTML element for the job — a real button for actions, a real link for navigation, proper heading levels, and tables with header cells. ARIA fills the gaps where native HTML falls short; it supplements semantic markup, it doesn’t replace it.
Semantic HTML first
- Proper heading hierarchy — never skip levels.
- Landmark elements for navigation, main, complementary, and footer regions.
- Buttons for actions, links for navigation.
- Data tables with proper header cells.
ARIA where it’s needed
- Icon-only buttons get an accessible label describing the action.
- Status messages announce politely; alerts announce assertively.
- Modal dialogs are labeled and marked as modal.
- Form errors are flagged invalid and linked to their message.
Alternative text
- Every meaningful image has descriptive alt text; decorative images use empty alt text.
- Icons that convey meaning describe the meaning, not the picture.
- Charts and graphs include a text summary of the data.
- Helpline numbers are always rendered as text — never as an image.
Different screen readers interpret ARIA differently. Always test with at least two — VoiceOver and NVDA are the recommended pair — rather than trusting that one reader’s behavior is universal.
Multi-language support
Accessibility includes the language a player reads in. Playbook content should be translatable into the primary languages of every operating jurisdiction — and translation means adapting meaning for the culture, not running words through a machine.
| Jurisdiction | Primary languages |
|---|---|
| United States | English, Spanish |
| United Kingdom | English, Welsh (in Wales) |
| Australia | English; consider Chinese, Vietnamese, Arabic for outreach |
| Canada | English, French (required in Quebec) |
| European Union | Varies by member state |
Translation guidelines
- Translate meaning, not words — adapt for the target culture.
- Preserve the voice — translations keep the Playbook tone.
- Test with native speakers — machine output is a draft, not a deliverable.
- Plan for expansion — translated text often runs 20–40% longer than English.
Technical requirements
- UTF-8 encoding everywhere.
- RTL support — mirror layouts for Arabic, Hebrew, and other right-to-left scripts.
- Font fallback — Noto Sans for non-Latin scripts.
- Locale formatting — adapt decimal separators, thousands separators, and currency symbols.
Critical findings to fix before launch
A contrast audit of Playbook’s default color mappings surfaced five failures that ship-blocking by default — places where the brand palette, used naively, produces unreadable text. Each has a tested fix. Operators who customize colors must run their own audit.
| Finding | The problem | The fix |
|---|---|---|
| Link text on light backgrounds | Teal #00D4AA on white tests at 1.91:1 | Use a dark slate #2A3F56 for links on light backgrounds. |
| Link hover on light backgrounds | Teal-dark #00A888 on near-white tests at 2.78:1 | Use navy #1B2838 for the hover state. |
| Primary CTA button | White on orange #FF6B35 tests at 2.84:1 | Use navy #1B2838 text on the orange background. |
| Secondary CTA button | White on teal #00D4AA tests at 1.91:1 | Use navy text on the teal background. |
| Form borders | Light grey #A8A8C0 on white tests at 2.33:1 | Use a mid-grey #6B6B8A for form borders (SC 1.4.11). |
The takeaway: the bright teal and orange are brand colors, not text colors on light backgrounds. Use navy for text and interactive states, and reserve the brights for fills and accents. Full pairings are in Color.
The review checklist
Run this against any Playbook content before it goes live.
Visual
- All text meets its minimum contrast ratio.
- Color is never the sole indicator of meaning.
- Text resizes to 200% without breaking.
- No text is embedded in images.
Cognitive
- Written at Grade 6–8 reading level.
- Key information is visible without scrolling.
- Navigation is consistent and predictable.
- Important messages are never auto-dismissed.
Motor & screen reader
- Every element is keyboard-accessible with visible focus.
- Touch targets are at least 44×44px.
- Heading hierarchy is logical; all images have alt text.
- Interactive elements have descriptive labels.
Multi-language
- Available in jurisdiction-required languages.
- Translations preserve voice and tone.
- Layouts accommodate text expansion.
- RTL languages display correctly.