# Accessibility of hosted pages

KeenAuth's hosted login, account portal and email pages are designed to meet WCAG 2.2 level AA. This is a design target, not a certification: we test it automatically, and this page says what is covered and what is not yet.

## What the pages provide

- **Labels and errors.** Every input has a visible `<label>` tied to it. Error messages are announced to screen readers as alerts.
- **Keyboard.** Controls are native form elements, and focus is shown with a visible outline in your `color.focus_ring` color.
- **Language and direction.** Pages carry the `lang` and `dir` attributes of the chosen language. Arabic, Persian and Hebrew are laid out right to left. See [Languages and right-to-left](/docs/guides/localization).
- **Small screens.** Pages reflow down to a 320 px wide viewport without horizontal scrolling.
- **Light and dark.** Both themes are tested separately.
- **Passwords.** Hosted pages do not block paste, and fields carry `autocomplete` values so password managers work.

## How we test

An automated suite opens the hosted pages and checks, for each page, in the light and the dark theme, in every supported language (30), at widths of 320 px and 1280 px:

- the axe-core rules for WCAG 2.0, 2.1 and 2.2 levels A and AA, with no violations accepted;
- no horizontal scrolling;
- right-to-left direction where a language needs it, and a screenshot comparison for Arabic;
- a keyboard-only path on the sign-in page: Tab reaches the identifier field and then the Continue button, and Enter submits.

Any accepted exception is written down with a reason and expires within 90 days.

### What is not covered yet

- The account portal, the error and sign-out pages and the embeddable React components are not part of the automated suite yet.
- Manual testing with screen readers (NVDA, VoiceOver) has not been done yet.
- Email templates have not been audited for accessibility yet.
- Automated checks find only part of the possible problems. Some findings are still being fixed.

## Brand contrast protection

Your brand colors cannot make a hosted page unreadable. When you save branding, KeenAuth checks these pairs, for the light and the dark theme separately:

| Pair | Minimum ratio |
|---|---|
| Text on background | 4.5:1 |
| `color.link` on background | 4.5:1 |
| `color.primary_contrast` on `color.primary` | 4.5:1 |
| Control border on background | 3:1 |
| Focus ring on background | 3:1 |

A pair below its minimum is rejected with `422 brand_contrast_insufficient`. The error names the field and suggests the nearest color that passes; the suggestion keeps the hue and chroma and moves only the lightness. A branding that fails cannot be published. Details and the error format are in [Brand your login pages](/docs/guides/branding).

Custom CSS (Startup plan) can lower contrast, and KeenAuth does not correct that. A preview scan reports problems as warnings, and the accessibility of changes made with custom CSS is your responsibility.

## Related

- [Brand your login pages](/docs/guides/branding)
- [Languages and right-to-left](/docs/guides/localization)
- [React SDK](/docs/sdk/react)