Accessibility

Built for everyone

Our customers serve whole populations. Our products, documents and campaigns must work for everyone who uses them, including people with low vision, colour blindness, motor impairments and cognitive differences, in English and Arabic.

North targets WCAG 2.2 level AA for all digital products and web content, and follows the UAE government's digital accessibility requirements where they apply. This page lists the brand-level rules; product teams go further in their design systems.

Contrast report

Every semantic colour pair, checked automatically when the tokens are built. Body text needs 4.5:1, large text and UI graphics 3:1.

Pair	Tokens	Light	Dark
Heading on canvas	`text-heading` on `bg-canvas`	15.64:1 · AAA	17.56:1 · AAA
Body on canvas	`text-body` on `bg-canvas`	8.90:1 · AAA	11.38:1 · AAA
Caption on canvas	`text-caption` on `bg-canvas`	5.95:1 · AA	7.82:1 · AAA
Body on subtle	`text-body` on `bg-subtle`	8.52:1 · AAA	10.22:1 · AAA
Body on panel	`text-body` on `bg-panel`	8.02:1 · AAA	9.88:1 · AAA
Link on canvas	`text-link` on `bg-canvas`	5.61:1 · AA	13.33:1 · AAA
Button text on action	`text-on-action` on `action`	5.61:1 · AA	11.58:1 · AAA
Focus ring on canvas	`focus` on `bg-canvas`	4.22:1 · AA Large	13.33:1 · AAA

Check any other pair with the contrast checker.

Colour

Never use colour alone to carry meaning. Add a label, an icon or a pattern.
Status colours always come with an icon and text.
Charts use the colour-blind-safe palette in order, with direct labels and a table view.
Accent colours (Dawn, Oasis, Gulf 60) never carry small text on light backgrounds.

Type and reading

Body text at least 16px on screen for reading, 14px for dense UI; never below 12px.
Line length under 80 characters; line height at least 1.5 for body copy (1.7 for Arabic).
Left-aligned (right-aligned in Arabic), never justified.
Text must reflow and stay readable at 200% zoom.
Write in plain language: short sentences, common words, one idea per paragraph.

Focus and interaction

A visible focus, always

Every interactive element shows a focus ring when reached by keyboard: a 3px focus outline with a 2px offset (Gulf 60 on light, Oasis 30 on dark). Never remove focus outlines without replacing them.

Touch targets at least 44 × 44px.
Everything works with a keyboard alone, in a logical order.
Icon-only buttons have an accessible name.
Dialogs trap focus and return it when closed.

Install

Motion

Respect prefers-reduced-motion: replace movement with fades and stop loops. Nothing flashes more than three times a second. See Motion.

Images and media

Every meaningful image has alt text that says what it shows and why it is there. Decorative images have empty alt text.
Charts have a text summary of the takeaway and a data table.
Videos have captions in English and Arabic, and a transcript.
Never put essential text inside images; when it is unavoidable (social posts), repeat it in the post copy.

Language and direction

Set the page language (lang="en", lang="ar") and direction (dir="rtl") correctly, including on mixed-language passages.
Mirror layouts and directional icons for Arabic; do not mirror logos, numbers or media controls.
Keep product names in Latin script inside Arabic text and mark them dir="ltr".
Have every Arabic string reviewed by a native speaker.

Dos and don'ts

Do

Use semantic tokens: they are contrast-checked.
Label icons, charts and status.
Write alt text and captions.
Test with a keyboard and a screen reader.

Don't

Remove focus outlines.
Rely on colour alone.
Put essential text in images.
Use placeholder text as a label.
Ship Arabic copy without a native review.

Last updated on 14 October 2026