---
url: https://brand.okrado.com/foundations/accessibility/
title: Accessibility
description: The WCAG 2.2 AA bar, what is tested automatically, and what a person must check.
kind: explanation
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
---

# Accessibility

> The WCAG 2.2 AA bar, what is tested automatically, and what a person must check.

The bar is WCAG 2.2 level AA. This is a quality bar, not legal advice.

## What is tested for you

- Every colour pair of the system is gated in both modes ([Colour](https://brand.okrado.com/foundations/colour/#contrast)).
- Every story in [Storybook](https://brand.okrado.com/components/) runs axe with the WCAG 2.2 AA rules and fails the build on a violation.
- This site’s built pages run axe in CI; links and anchors are checked.

## What a person checks

- **Keyboard**: every control reachable and operable, no trap, dialogs return focus.
- **Focus** visible and not hidden behind a sticky header.
- **Targets** at least 24 by 24 px, and 44 px on touch.
- **Reflow** at 320 px and at 200 % text zoom.
- **Motion**: reduced motion honoured, nothing flashes.
- **Names**: every control has an accessible name in each language; `lang` is set and Arabic renders right to left.

## Forced colours and more contrast

Under `forced-colors: active`, floating layers get a `CanvasText` border, focus is an outline, and the Record square is checked as a system colour. `prefers-contrast: more` raises lines and muted text one step. See [Colour mode](https://brand.okrado.com/foundations/colour-mode/).