✓Accessibility
Built and tested to WCAG 2.2 AA.
Every colour pair in the kit is measured in light and dark for both brands. Every interactive component has a visible focus state, and small controls carry a 24 px target. This page lists what we checked, how, and what still depends on how your team uses the parts.
124/124colour pairs pass AA
2+2px focus ring, 3:1 or better
24px minimum targets
29A and AA criteria covered below
§What we claim
AA-ready parts, not a certificate.
WCAG conformance is claimed for a whole page of a finished product, by the team that ships it. A kit cannot make that claim for you, because the result depends on your copy, your content and how parts are combined.
What Propel does claim: the colours, components and templates meet the WCAG 2.2 A and AA criteria that a design kit can meet on its own, and they are tested. Where a criterion depends on your product, the table below says so and the skill pack carries the guidance.
WCAG 2.2 is the current version of the standard. It adds criteria for focus that is not hidden by sticky bars, minimum target size, dragging alternatives, consistent help, not asking for the same information twice, and sign-in without memory tests.
What the kit does
Contrast in every mode
Text pairs meet 4.5:1 and control boundaries and focus indicators meet 3:1, in Light and Dark for Signal and Teal. Form controls use color/border/control for a 3:1 edge.
Focus you can see
Every interactive Figma component has a focused variant: a 2 px surface gap and a 2 px ring in color/border/focus. Code uses the same --propel-shadow-focus-ring.
Targets that are easy to hit
Checkboxes, radios, switches and close buttons that draw smaller than 24 px carry a 24 × 24 target layer. Phone layouts use 44 px.
Status is never colour alone
Every status pairs a shape with a word: ● ready, ■ error, ◐ processing, ▲ at risk, ○ queued. It reads in greyscale and for colour-blind users.
Motion that can stop
Durations are tokens, so a reduced-motion setting can bring them to zero in one place. Nothing in the kit flashes.
Patterns for the hard parts
Dialogs, menus, tabs and toasts in the React library follow the WAI-ARIA Authoring Practices patterns for roles, keyboard and focus return.
≡Criterion by criterion
WCAG 2.2, A and AA.
The criteria a design kit can affect. Criteria about captions, audio and page-level content are entirely your product's and are not listed.
| Criterion | Level | In the Figma kit | In the code | Stays your job |
|---|---|---|---|---|
| 1.1.1 Non-text content | A | Icon-only buttons are paired with a tooltip naming the action. | Icon-only components take a required label; decorative icons are hidden from assistive tech. | Alt text for your images and a text summary for charts. |
| 1.3.1 Info and relationships | A | Fields, table headers, section headers and groups are real parts with their own text styles. | Semantic elements: labels tied to inputs, table headers with scope, fieldsets for groups. | Keep headings in order on your pages. |
| 1.3.5 Identify input purpose | AA | — | Inputs pass autocomplete through. | Set autocomplete on personal-data fields. |
| 1.4.1 Use of colour | A | Status is always shape + word, so it reads in greyscale. | Status renders the glyph and the word. | Don't rely on colour alone in your own content and charts. |
| 1.4.3 Contrast (minimum) | AA | 124 colour pairs pass in Light and Dark for both brands. | Tokens are generated from the same variables and re-audited on export. | Use the brand generator for new colours; check text on photos. |
| 1.4.4 Resize text | AA | Parts use auto layout, so text can grow. | Text follows browser zoom to 200%; no fixed-height text containers. | Test your pages at 200% zoom. |
| 1.4.10 Reflow | AA | Phone layouts at 390 wide; tables re-flow to record cards, panels to bottom sheets. | Components fit 320 CSS px without sideways scrolling. | Very wide data tables may scroll inside their own container. |
| 1.4.11 Non-text contrast | AA | Form-control boundaries use color/border/control; focus rings reach 3:1. | The same tokens drive borders, switch tracks and rings. | Keep custom icons and chart marks at 3:1. |
| 1.4.12 Text spacing | AA | — | No clipping when line, letter and word spacing are increased. | — |
| 1.4.13 Content on hover or focus | AA | — | Tooltips close with Escape and stay open while the pointer is on them. | — |
| 2.1.1 Keyboard | A | Every interactive component has a focused variant to design the keyboard path. | Controls work with Tab, arrows, Enter, Space and Escape. | Custom widgets you add. |
| 2.1.2 No keyboard trap | A | — | Focus is held only inside modal dialogs and released on close. | — |
| 2.2.1 Timing adjustable | A | — | Toasts pause on hover and focus. | Session time-outs and auto-dismiss timing in your product. |
| 2.3.1 Three flashes | A | Nothing in the kit flashes. | Nothing flashes. | Your media content. |
| 2.4.3 Focus order | A | — | DOM order matches visual order; focus returns to the trigger when overlays close. | Keep the order when you rearrange layouts. |
| 2.4.6 Headings and labels | AA | Templates use real, descriptive copy as the model to follow. | — | Write descriptive labels and headings. |
| 2.4.7 Focus visible | AA | 2 px gap + 2 px ring on every interactive component. | :focus-visible ring from the focus token. | Don't remove focus outlines in your own CSS. |
| 2.4.11 Focus not obscured (minimum) | AA | Guidance in the skill pack. | Menus, tooltips and toasts never cover the focused element: 0 obscured in the audit. | Keep sticky headers and toasts off the focused element. |
| 2.5.3 Label in name | A | Visible labels are part of each field. | Accessible names start with the visible text. | — |
| 2.5.7 Dragging movements | AA | Guidance: pair every drag with a menu action. | No component needs dragging to operate. | Add a click alternative, like “Move to”, to anything you make draggable. |
| 2.5.8 Target size (minimum) | AA | Checkboxes, radios, switches and small close buttons carry a 24 × 24 target; phone targets are 44. | Hit areas of at least 24 × 24 CSS px. | Spacing between your own small links. |
| 3.2.6 Consistent help | A | Guidance in the skill pack. | — | Keep help in the same place across pages. |
| 3.3.1 Error identification | A | Error variants show an icon and a message, not only a red border. | Error text is linked to its field. | Write messages that say what went wrong. |
| 3.3.2 Labels or instructions | A | Fields have a label and help-text slot. | Form components require a label. | Fill them in. |
| 3.3.3 Error suggestion | AA | — | — | Suggest the fix in your error messages. |
| 3.3.7 Redundant entry | A | Guidance in the skill pack. | Inputs support autocomplete. | Don't ask for the same information twice in a flow. |
| 3.3.8 Accessible authentication (minimum) | AA | — | Inputs never block paste or autofill. | Avoid puzzles and memory tests at sign-in. |
| 4.1.2 Name, role, value | A | — | Native elements first; ARIA roles and states where needed. | Custom widgets you add. |
| 4.1.3 Status messages | AA | — | Toasts announce in a polite live region; banners can be live (status or alert) without moving focus. | — |
“In the code” describes the React library and its tests. A dash means the part has no say in that criterion; it depends on your content or flow.
▶Tests
How the code is tested.
Each React component goes through unit, keyboard and axe tests, then a real-browser audit in every colour mode. Last run 28 Oct 2026.
| Check | Scope | Result |
|---|---|---|
| Token contrast | 124 text and non-text pairs, Light/Dark × Signal/Teal | 124 / 124 pass |
| Unit, keyboard and axe tests | 19 tests covering all 34 components: names, roles, states, arrow keys, Esc and focus return | 19 / 19 pass |
| Browser axe audit | WCAG 2.0, 2.1, 2.2 A + AA with contrast on; 4 colour modes × 2 widths; at rest and with menu, tooltip, toasts and dialog open | 0 violations in 40 runs |
| Focus visible and not obscured | 89 keyboard tab stops, light and dark | 89 / 89 |
| Target size | 57 interactive elements, Dense density | 0 under 24 px |
| Reflow and text spacing | 320 px viewport with WCAG spacing overrides | No horizontal scroll, no clipped text |
◐Contrast record
All 124 colour pairs.
Measured from the Figma variables with the WCAG relative-luminance formula. Text needs 4.5:1; focus indicators and control boundaries need 3:1.
Light · Signal — 31 of 31 pass
| Foreground | Background | Ratio | Needs | Result |
|---|---|---|---|---|
color/text/primary | color/bg/canvas | 16.87:1 | 4.5:1 | Pass |
color/text/primary | color/bg/surface | 18.08:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/surface | 7.59:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/subtle | 7.26:1 | 4.5:1 | Pass |
color/text/tertiary | color/bg/surface | 5.05:1 | 4.5:1 | Pass |
color/text/tertiary | color/bg/subtle | 4.83:1 | 4.5:1 | Pass |
color/text/on-accent | color/bg/accent | 4.87:1 | 4.5:1 | Pass |
color/text/accent | color/bg/surface | 4.87:1 | 4.5:1 | Pass |
color/text/primary | color/bg/selected | 16.97:1 | 4.5:1 | Pass |
color/text/on-inverse | color/bg/inverse | 18.08:1 | 4.5:1 | Pass |
color/status/success-fg | color/status/success-bg | 4.78:1 | 4.5:1 | Pass |
color/status/danger-fg | color/status/danger-bg | 5.10:1 | 4.5:1 | Pass |
color/status/warning-fg | color/status/warning-bg | 4.92:1 | 4.5:1 | Pass |
color/status/info-fg | color/status/info-bg | 5.50:1 | 4.5:1 | Pass |
color/status/ai-fg | color/status/ai-bg | 4.94:1 | 4.5:1 | Pass |
color/status/danger-fg | color/bg/surface | 5.81:1 | 4.5:1 | Pass |
color/status/warning-fg | color/bg/surface | 5.37:1 | 4.5:1 | Pass |
color/border/focus | color/bg/surface | 4.87:1 | 3.0:1 | Pass |
color/bg/accent | color/bg/surface | 4.87:1 | 3.0:1 | Pass |
color/border/strong | color/bg/surface | 3.04:1 | 3.0:1 | Pass |
color/chart/label | color/bg/surface | 5.05:1 | 4.5:1 | Pass |
color/border/control | color/bg/surface | 3.38:1 | 3.0:1 | Pass |
color/border/control | color/bg/subtle | 3.23:1 | 3.0:1 | Pass |
color/text/tertiary | color/bg/canvas | 4.71:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/canvas | 7.08:1 | 4.5:1 | Pass |
color/status/success-fg | color/bg/surface | 5.36:1 | 4.5:1 | Pass |
color/status/info-fg | color/bg/surface | 6.28:1 | 4.5:1 | Pass |
color/status/ai-fg | color/bg/surface | 5.49:1 | 4.5:1 | Pass |
color/text/accent | color/bg/selected | 4.57:1 | 4.5:1 | Pass |
color/text/on-accent | color/bg/accent-hover | 6.81:1 | 4.5:1 | Pass |
color/border/focus | color/bg/canvas | 4.54:1 | 3.0:1 | Pass |
Light · Teal — 31 of 31 pass
| Foreground | Background | Ratio | Needs | Result |
|---|---|---|---|---|
color/text/primary | color/bg/canvas | 16.87:1 | 4.5:1 | Pass |
color/text/primary | color/bg/surface | 18.08:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/surface | 7.59:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/subtle | 7.26:1 | 4.5:1 | Pass |
color/text/tertiary | color/bg/surface | 5.05:1 | 4.5:1 | Pass |
color/text/tertiary | color/bg/subtle | 4.83:1 | 4.5:1 | Pass |
color/text/on-accent | color/bg/accent | 4.87:1 | 4.5:1 | Pass |
color/text/accent | color/bg/surface | 4.87:1 | 4.5:1 | Pass |
color/text/primary | color/bg/selected | 17.04:1 | 4.5:1 | Pass |
color/text/on-inverse | color/bg/inverse | 18.08:1 | 4.5:1 | Pass |
color/status/success-fg | color/status/success-bg | 4.78:1 | 4.5:1 | Pass |
color/status/danger-fg | color/status/danger-bg | 5.10:1 | 4.5:1 | Pass |
color/status/warning-fg | color/status/warning-bg | 4.92:1 | 4.5:1 | Pass |
color/status/info-fg | color/status/info-bg | 5.50:1 | 4.5:1 | Pass |
color/status/ai-fg | color/status/ai-bg | 4.94:1 | 4.5:1 | Pass |
color/status/danger-fg | color/bg/surface | 5.81:1 | 4.5:1 | Pass |
color/status/warning-fg | color/bg/surface | 5.37:1 | 4.5:1 | Pass |
color/border/focus | color/bg/surface | 4.87:1 | 3.0:1 | Pass |
color/bg/accent | color/bg/surface | 4.87:1 | 3.0:1 | Pass |
color/border/strong | color/bg/surface | 3.04:1 | 3.0:1 | Pass |
color/chart/label | color/bg/surface | 5.05:1 | 4.5:1 | Pass |
color/border/control | color/bg/surface | 3.38:1 | 3.0:1 | Pass |
color/border/control | color/bg/subtle | 3.23:1 | 3.0:1 | Pass |
color/text/tertiary | color/bg/canvas | 4.71:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/canvas | 7.08:1 | 4.5:1 | Pass |
color/status/success-fg | color/bg/surface | 5.36:1 | 4.5:1 | Pass |
color/status/info-fg | color/bg/surface | 6.28:1 | 4.5:1 | Pass |
color/status/ai-fg | color/bg/surface | 5.49:1 | 4.5:1 | Pass |
color/text/accent | color/bg/selected | 4.59:1 | 4.5:1 | Pass |
color/text/on-accent | color/bg/accent-hover | 6.72:1 | 4.5:1 | Pass |
color/border/focus | color/bg/canvas | 4.54:1 | 3.0:1 | Pass |
Dark · Signal — 31 of 31 pass
| Foreground | Background | Ratio | Needs | Result |
|---|---|---|---|---|
color/text/primary | color/bg/canvas | 18.46:1 | 4.5:1 | Pass |
color/text/primary | color/bg/surface | 17.31:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/surface | 10.75:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/subtle | 9.80:1 | 4.5:1 | Pass |
color/text/tertiary | color/bg/surface | 5.94:1 | 4.5:1 | Pass |
color/text/tertiary | color/bg/subtle | 5.41:1 | 4.5:1 | Pass |
color/text/on-accent | color/bg/accent | 6.24:1 | 4.5:1 | Pass |
color/text/accent | color/bg/surface | 8.64:1 | 4.5:1 | Pass |
color/text/primary | color/bg/selected | 17.03:1 | 4.5:1 | Pass |
color/text/on-inverse | color/bg/inverse | 17.31:1 | 4.5:1 | Pass |
color/status/success-fg | color/status/success-bg | 8.27:1 | 4.5:1 | Pass |
color/status/danger-fg | color/status/danger-bg | 7.59:1 | 4.5:1 | Pass |
color/status/warning-fg | color/status/warning-bg | 8.36:1 | 4.5:1 | Pass |
color/status/info-fg | color/status/info-bg | 7.19:1 | 4.5:1 | Pass |
color/status/ai-fg | color/status/ai-bg | 7.58:1 | 4.5:1 | Pass |
color/status/danger-fg | color/bg/surface | 8.68:1 | 4.5:1 | Pass |
color/status/warning-fg | color/bg/surface | 10.49:1 | 4.5:1 | Pass |
color/border/focus | color/bg/surface | 8.64:1 | 3.0:1 | Pass |
color/bg/accent | color/bg/surface | 5.85:1 | 3.0:1 | Pass |
color/border/strong | color/bg/surface | 3.58:1 | 3.0:1 | Pass |
color/chart/label | color/bg/surface | 5.94:1 | 4.5:1 | Pass |
color/border/control | color/bg/surface | 3.58:1 | 3.0:1 | Pass |
color/border/control | color/bg/subtle | 3.27:1 | 3.0:1 | Pass |
color/text/tertiary | color/bg/canvas | 6.34:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/canvas | 11.47:1 | 4.5:1 | Pass |
color/status/success-fg | color/bg/surface | 9.94:1 | 4.5:1 | Pass |
color/status/info-fg | color/bg/surface | 8.50:1 | 4.5:1 | Pass |
color/status/ai-fg | color/bg/surface | 9.93:1 | 4.5:1 | Pass |
color/text/accent | color/bg/selected | 8.50:1 | 4.5:1 | Pass |
color/text/on-accent | color/bg/accent-hover | 9.21:1 | 4.5:1 | Pass |
color/border/focus | color/bg/canvas | 9.21:1 | 3.0:1 | Pass |
Dark · Teal — 31 of 31 pass
| Foreground | Background | Ratio | Needs | Result |
|---|---|---|---|---|
color/text/primary | color/bg/canvas | 18.46:1 | 4.5:1 | Pass |
color/text/primary | color/bg/surface | 17.31:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/surface | 10.75:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/subtle | 9.80:1 | 4.5:1 | Pass |
color/text/tertiary | color/bg/surface | 5.94:1 | 4.5:1 | Pass |
color/text/tertiary | color/bg/subtle | 5.41:1 | 4.5:1 | Pass |
color/text/on-accent | color/bg/accent | 7.37:1 | 4.5:1 | Pass |
color/text/accent | color/bg/surface | 11.32:1 | 4.5:1 | Pass |
color/text/primary | color/bg/selected | 14.95:1 | 4.5:1 | Pass |
color/text/on-inverse | color/bg/inverse | 17.31:1 | 4.5:1 | Pass |
color/status/success-fg | color/status/success-bg | 8.27:1 | 4.5:1 | Pass |
color/status/danger-fg | color/status/danger-bg | 7.59:1 | 4.5:1 | Pass |
color/status/warning-fg | color/status/warning-bg | 8.36:1 | 4.5:1 | Pass |
color/status/info-fg | color/status/info-bg | 7.19:1 | 4.5:1 | Pass |
color/status/ai-fg | color/status/ai-bg | 7.58:1 | 4.5:1 | Pass |
color/status/danger-fg | color/bg/surface | 8.68:1 | 4.5:1 | Pass |
color/status/warning-fg | color/bg/surface | 10.49:1 | 4.5:1 | Pass |
color/border/focus | color/bg/surface | 11.32:1 | 3.0:1 | Pass |
color/bg/accent | color/bg/surface | 6.91:1 | 3.0:1 | Pass |
color/border/strong | color/bg/surface | 3.58:1 | 3.0:1 | Pass |
color/chart/label | color/bg/surface | 5.94:1 | 4.5:1 | Pass |
color/border/control | color/bg/surface | 3.58:1 | 3.0:1 | Pass |
color/border/control | color/bg/subtle | 3.27:1 | 3.0:1 | Pass |
color/text/tertiary | color/bg/canvas | 6.34:1 | 4.5:1 | Pass |
color/text/secondary | color/bg/canvas | 11.47:1 | 4.5:1 | Pass |
color/status/success-fg | color/bg/surface | 9.94:1 | 4.5:1 | Pass |
color/status/info-fg | color/bg/surface | 8.50:1 | 4.5:1 | Pass |
color/status/ai-fg | color/bg/surface | 9.93:1 | 4.5:1 | Pass |
color/text/accent | color/bg/selected | 9.77:1 | 4.5:1 | Pass |
color/text/on-accent | color/bg/accent-hover | 12.07:1 | 4.5:1 | Pass |
color/border/focus | color/bg/canvas | 12.07:1 | 3.0:1 | Pass |
→Your part
Keeping your product AA.
- Write labels, link text and error messages that say what they do. The kit gives every input a label slot; fill it.
- Add alternative text to your images and a short text summary to every chart.
- If you add a brand colour, use the generator. It keeps button and link text at 4.5:1 or better and tells you when it can't.
- Keep sticky headers and toasts from covering the focused element, for example with
scroll-padding-top. - Give every drag-and-drop a single-click alternative, such as a “Move to” item in the card's menu.
- Test your shipped pages with a screen reader and a keyboard. Automated checks find about a third of real issues.