Accessibility

AdminKit 4 targets WCAG 2.2 level AA in both color modes, in the free version and in AdminKit PRO. The template takes care of the theme's colors, markup and motion; the content and behavior you add stay your responsibility.

What is checkedCopy Anchor Link

• Automated checks: every page of both editions is checked with axe (@axe-core/playwright) on the built pages, in light and dark mode, including the sidebar, the navbar and, in AdminKit PRO, the settings panel and the sidebar variants. The target is no serious or critical violation. The only known exception is the controls Google draws inside its maps.
• Contrast: text reaches 4.5:1 against its background, large text, icons and other controls 3:1. The theme colors were darkened for 4.0 so that white text on them and the colors as text on the page background pass.
• Keyboard: keyboard focus stays visible on the sidebar and navbar links and the navbar search; icon-only buttons and links have an aria-label, and links that act as buttons have role="button".
• Headings: card titles are h2 headings under the page's h1, so headings don't skip levels.
• Motion: with prefers-reduced-motion: reduce, nothing moves; content only fades in, and numbers and charts show their final state at once. See Animations.

The paletteCopy Anchor Link

The theme colors of AdminKit 4, with their contrast against white and against the light page background ($body-bg, #f5f7fb):

$warning keeps its yellow: buttons and badges in that color use dark text (8.90:1 with #212529), and warning-colored text uses a darker shade. In dark mode, the colors drawn as text are lightened until they reach 4.5:1 on the dark surfaces.

When you change the colorsCopy Anchor Link

A new brand color has to pass the same ratios, in both modes. AdminKit's Sass has two helpers for that, in src/scss/1-variables/_functions.scss:

• ak-readable($color, $background, $min: 4.5) returns $color mixed with black (on a light background) or white (on a dark one) in 1% steps until it reaches $min contrast with $background. A color that already passes comes back unchanged. Use it for every color that text or a control is drawn in.
• ak-text-on($background) returns white, or #212529 when white does not reach 4.5:1, for text on a filled background such as a button.

$theme-text-colors (light) and $theme-text-colors-dark (dark) are built with ak-readable() from $theme-colors; they are what .text-*, outline buttons and light badges use. When you add a theme color, it gets an entry in both maps automatically. Set an entry yourself only with a value that passes.

After changing colors, check the result:

1. Build the template and open the pages you changed in light and in dark mode.
2. Run axe on them, for example with @axe-core/playwright or the axe browser extension, and fix every serious or critical issue.
3. Tab through the pages: every control must be reachable and show a visible focus.
4. Turn on reduced motion in your operating system and reload: nothing may slide or count.

What stays up to youCopy Anchor Link

• Text alternatives for your images and charts, labels for your own form fields, and error messages a screen reader announces.
• Accessible names for icon-only controls you add, and role="button" on links that act as buttons.
• Content that is drawn by JavaScript, such as AI chat replies or table rows from your API: test it with real data.
• Third-party embeds, such as the Google Maps controls.

WCAG conformance is measured on your finished application. AdminKit gives you a base that passes these checks; test your own pages the same way.