Accessibility Presets

Beyond deriving a theme from your brand, Apollion offers three accessibility-ready palette presets in @apollion-dsi/core/themes/colors. Each preset is a pure factory that takes an optional base (ColorsInput, default defaultInputColors) and returns a ColorsInput — exactly the shape that createTheme({ colors }) consumes.

The presets remap only the semantic and brand slots; the contrast anchors (baseDark, baseLight, deepDark, deepLight, transparent) pass through untouched. Surfaces keep working and the neutral/grayscale ramps keep deriving from the same base — you swap the chromatic identity without breaking the rest of the theme.

The three presets

• Grayscale — grayscalePalette. Collapses all hues onto the perceptual gray ramp (mountGreyscaleColors), keeping the slots distinguishable by luminance alone. Response colors go up in weight (success → warning → error) and function colors spread across the mid range. The hue is removed on purpose — that is the point of the mode.
• High contrast (AAA) — highContrastPalette. Adjusts the luminance of each color (preserving hue and chroma) until it crosses WCAG AAA (contrast ≥ 7) against the light surface, via readableColor(color, baseLight, 7). Keeps the brand identity while guaranteeing AAA-readable text/accent on light backgrounds.
• Colorblind-safe colors — colorblindPalette. Remaps the red↔green pair that deuteranopia/protanopia confuse to the hues of the Okabe–Ito qualitative palette: danger→vermilion, success→bluish green, warning→orange, primary→sky blue, information/secondary→blue. The brand's blue-green (main) is preserved.

Preview

The full accessibility selector set — Light and Dark (the base theme, with the contrast anchors inverted in dark) plus the three presets — applied to the semantic slots. Each card renders in its own theme, so the surface reflects Light vs Dark; main is included to make clear that the colorblind preset preserves the brand while remapping the red↔green pair:

Try the selector

Pick a theme in the dropdown — the SSR-inert Select re-themes the whole example (the Select itself included) via ApollionProvider, just like the SSG radar's theme selector:

How to use

A preset goes straight into createTheme({ colors }) and the resulting theme goes to the ApollionProvider (or to lightTheme/darkTheme):

import { ApollionProvider, createTheme } from '@apollion-dsi/core/themes';
import { colorblindPalette } from '@apollion-dsi/core/themes/colors';
 
const theme = createTheme({ colors: colorblindPalette() });
 
<ApollionProvider theme={theme}>{/* your application */}</ApollionProvider>;

Theme selector with 5 options

Together with the accessibilityPalettes registry, the presets assemble a complete theme selector (Light / Dark / Grayscale / High contrast / Colorblind-safe) with no manual switch. Pairs well with Select, which is SSR-inert (native, no hydration) — ideal for static SSG:

import { Select } from '@apollion-dsi/core/form/select';
import { ApollionProvider, createTheme } from '@apollion-dsi/core/themes';
import { accessibilityPalettes } from '@apollion-dsi/core/themes/colors';
 
const THEMES = {
  light: createTheme(),
  dark: createTheme({
    colors: { baseDark: '#FCFCFC', baseLight: '#26292E', deepDark: '#FFF', deepLight: '#000' },
  }),
  grayscale: createTheme({ colors: accessibilityPalettes.grayscale() }),
  'high-contrast': createTheme({ colors: accessibilityPalettes['high-contrast']() }),
  colorblind: createTheme({ colors: accessibilityPalettes.colorblind() }),
};
 
const OPTIONS = [
  { value: 'light', label: 'Light' },
  { value: 'dark', label: 'Dark' },
  { value: 'grayscale', label: 'Grayscale' },
  { value: 'high-contrast', label: 'High contrast' },
  { value: 'colorblind', label: 'Colorblind-safe' },
];
 
<ApollionProvider theme={THEMES[theme]}>
  <Select aria-label="Theme" value={theme} onChange={(e) => setTheme(e.target.value)} options={OPTIONS} />
</ApollionProvider>;

Okabe–Ito (reference)

The qualitative hues used by the colorblind preset, designed to remain distinguishable under deuteranopia and protanopia (reference (opens in a new tab)):

Custom base

Each factory accepts a base ColorsInput — pass your brand to derive the preset from it instead of the default:

import { highContrastPalette } from '@apollion-dsi/core/themes/colors';
 
const theme = createTheme({ colors: highContrastPalette(myBrand) });

The presets live alongside createColors, createTheme, and ColorsInput. For the base theme derived from your brand, see Colors and Create Theme.