AccessKit

Core Concepts

Theming

Customize AccessKit to match your app: focus color, widget colors, and how to adapt your own CSS using data attributes and CSS variables.

3 min read

AccessKit applies user preferences via attributes and CSS custom properties on the document. You can theme the experience in two ways: configure the built-in focus color and widget appearance, and use the same attributes and variables in your own styles so your UI responds to accessibility settings. This page covers both.


Focus color

When "Focus indicators" is on, AccessKit draws a visible outline on focused elements using the --accesskit-focus-color CSS variable. Set it by passing focusColor to AccessKitProvider. The value is applied to the document, so any custom focus styles you write can use the same variable for consistency.

tsx
<AccessKitProvider focusColor="#0066cc">
  {children}
</AccessKitProvider>


In your own CSS, use var(--accesskit-focus-color) for focus rings, underlines, or highlights so they match the color you configured and stay consistent with the enhanced-focus outline.

css
.my-button:focus-visible {
  outline: 2px solid var(--accesskit-focus-color);
  outline-offset: 2px;
}


Widget styling

The accessibility widget (tab and panel) can be themed to match your brand. Pass a style object to AccessibilityWidget with any of: primary, tabBackground, tabIcon, panelBackground, panelText, border, mutedText, hoverText. Each value is a CSS color string. Omit keys to keep the default dark theme.

  • primary – Accent color for sliders, switches, badges, and links; also used for the tab if tabBackground is not set.
  • tabBackground – Background of the floating tab button (defaults to primary).
  • tabIcon – Icon color on the tab (e.g. white on a colored tab).
  • panelBackground, panelText, border – Panel surface, text, and borders.
  • mutedText, hoverText – Secondary text and hover states (e.g. descriptions, close button).
tsx
<AccessibilityWidget
  style={{
    primary: "var(--primary)",
    tabBackground: "var(--primary)",
    tabIcon: "#fff",
    panelBackground: "var(--card)",
    panelText: "var(--foreground)",
    border: "var(--border)",
    mutedText: "var(--muted-foreground)",
    hoverText: "var(--foreground)",
  }}
/>


Using your design tokens (e.g. var(--primary)) keeps the widget in sync with light/dark mode or theme switches without extra code.


Document attributes and variables

The provider sets data-accesskit-* attributes and CSS custom properties on <html> based on the current settings. You can use these in your stylesheets to adapt layout, motion, or visuals when the user has changed preferences.

  • data-accesskit-reduced-motion – "true" when reduced motion is on. Use it to shorten or disable animations.
  • data-accesskit-high-contrast – "true" when high contrast is on (AccessKit applies a contrast filter; you can add your own overrides).
  • data-accesskit-enhanced-focus – "true" when focus indicators are enhanced. Use with --accesskit-focus-color for custom focus styles.
  • data-accesskit-dyslexia-font – "true" when the dyslexia-friendly font (Lexend) is on. AccessKit applies it globally; you can scope overrides if needed.
  • data-accesskit-color-vision – "none", "protanopia", "deuteranopia", or "tritanopia". AccessKit applies the filter; use the attribute for any extra UI cues.
  • data-accesskit-font-size, data-accesskit-letter-spacing, data-accesskit-word-spacing, data-accesskit-line-height – Set when the user has changed typography. The provider also sets --accesskit-font-size, --accesskit-letter-spacing, --accesskit-word-spacing, --accesskit-line-height with the computed values.


Adapting your UI to preferences

Target these attributes in your CSS to adjust your components. For example, simplify or remove motion when reduced motion is on, or rely on the focus variable so your custom controls match the enhanced focus ring.

css
/* Simplify animation when user prefers reduced motion */
html[data-accesskit-reduced-motion="true"] .hero-banner {
  animation: none;
}

/* Use the same focus color as AccessKit */
.my-input:focus-visible {
  box-shadow: 0 0 0 2px var(--accesskit-focus-color);
}


You can also read settings in React via useAccessKit() and conditionally render or style (e.g. hide a decorative animation when settings.reducedMotion is true).

See Context & Hooks for the hook API. For provider and widget configuration options, see Configuration.

Back to documentation