Candor UI

Accessibility

How accessible Candor UI's components are, what we check, and what's still open. Last updated 6 November 2026, for Candor 1.6.

The target

Candor UI aims for WCAG 2.2 at level AA, the level EN 301 549 v4.1.1 (the European accessibility standard) points to. Today the kit partially conforms: we've fixed everything our own audit found that we could check, but some of it hasn't been tested by people using assistive technology yet, and a few gaps are listed below.

Candor UI is a set of components that you install into your app and can change. Whether your app conforms depends on how you use them: the words you give them, the colours if you change the theme, and the pages around them. This statement is about the components as we ship them.

What we check on every release

  • Automated checks. Every component's docs example renders in the test suite, and axe (an accessibility checker) must find nothing in it. Tabs, toasts, the side panel, dialogs, approvals and other interactive components also have keyboard and screen-reader tests.
  • Contrast. Every text and background pairing in the light, dark and high-contrast themes is measured: 132 checks, at 4.5:1 for text (7:1 in high contrast) and 3:1 for control edges. The focus ring is measured as it's drawn, at 80% opacity on every surface a control can sit on, at 3:1.
  • Target size. Buttons and links drawn smaller than 24px have a hit area that reaches 24px. A test reads the source so a new component can't bring a small target back.
  • Keyboard. Every control can be reached and used from the keyboard. Boxes that scroll with nothing focusable inside (wide tables, code, logs, diagrams) are tab stops so they can be scrolled; if you find one that isn't, tell us. Dialogs and menus keep focus inside while they're open and close on Escape.
  • Focus. The focus ring has at least 3:1 contrast in every theme, and a toast moves out of the way rather than cover the control that has focus.
  • Right to left and text size. Every component lays out right to left, and every word it shows can be replaced.

Motion

Motion in Candor reports a change that happened and never carries a state on its own: the colour and the word carry it, the animation only marks the moment it changed. prefers-reduced-motion: reduce turns every animation and transition off, and data-motion="none" on <html> does the same for people who want it off without the OS setting (subtle is the default; expressive adds a little more). Nothing loops indefinitely: the pulse on a waiting decision runs three times and stops (WCAG 2.2.2), and a status dot's running pulse ends with the run.

Known gaps

  • No assistive-technology testing yet. We haven't run a manual pass with VoiceOver, NVDA or JAWS, or at 400% zoom in a real browser. Our tests check the accessibility tree and roles, which catches a lot, but not everything a screen reader user meets.
  • Charts. With many categories, a bar or a point on a chart can be narrower than 24px. Every chart has a table view with the same values, which is the equivalent the target-size rule allows.
  • Wide tables (role matrices, run logs, data retention) scroll sideways inside their own box at narrow widths rather than reflowing. WCAG excepts data tables from reflow.
  • Toasts that time out. Successes and notices disappear after six seconds by default; errors stay until dismissed. Each one is also read out when it arrives. If people may need longer, give toasts duration: 0 so they stay until dismissed.
  • Help. Consistent help (3.2.6) depends on your app: AppSidebar has a help slot that puts Help in the same place on every page.

Tell us

If something in Candor UI is hard to use with a keyboard, a screen reader or any other assistive technology, email info@themethodic.com. We reply within two business days and list what we fix in the [changelog](/changelog).