Display presets

The optional entry openregard/display/presets offers WCAG-informed visual recipes and a WHATWG-inspired native-control recipe. Both are immutable token maps you can spread into tokens; importing them has no DOM side effects. They are starting points for site-owned profiles, not built-in profile IDs or a conformance guarantee.

import { wcagPresets, htmlPresets } from "openregard/display/presets";

const vision = {
  id: "vision",
  label: "Vision",
  tokens: {
    ...wcagPresets.textSpacing,
    ...htmlPresets.nativeControls,
    "--regard-font-size": "125%",
  },
};
const highContrast = {
  id: "vision-contrast",
  label: "Vision + High Contrast",
  tokens: { ...vision.tokens, ...wcagPresets.contrastLight },
};
// Include these in createDisplay({ ..., profiles: [original, vision, highContrast] }).

Your CSS connects each token to actual content:

:root {
  font-size: var(--regard-font-size, 100%);
  color: var(--regard-page-ink, #20332d);
  background: var(--regard-page-paper, #f3f4ed);
}
body {
  line-height: var(--regard-line-height, 1.6);
  letter-spacing: var(--regard-letter-spacing, normal);
  word-spacing: var(--regard-word-spacing, normal);
}
p {
  margin-block-end: var(--regard-paragraph-spacing, 1em);
}
h1,
h2,
h3,
button,
input,
select {
  line-height: var(--regard-line-height, 1.3);
  letter-spacing: var(--regard-letter-spacing, normal);
  word-spacing: var(--regard-word-spacing, normal);
}
.card {
  border: 1px solid var(--regard-border-color, #71877a);
}
.dark-panel {
  color: var(--regard-panel-ink, #f8faf4);
  background: var(--regard-panel-paper, #17352d);
}

Profiles in the live examples

The runnable examples compose these recipes into site-owned profiles:

The project website uses calmer reading profiles with modest tracking and compact headings; it does not automatically apply the full WCAG spacing test recipe.

These profile names are library examples, not names defined by W3C or WHATWG. Copy and adapt them; the standards sources below explain which values informed the recipes.

WCAG visual recipes

The spacing recipe reflects the override values in WCAG 2.2 SC 1.4.12. Sites must tolerate those overrides without losing content or functionality; they are not required default styling. Adapt the recipe for languages and scripts that use different spacing conventions. Authored component rules can override inheritance, so wire the properties into all relevant text styles.

Both contrast recipes use solid text/background pairs above the 7:1 threshold in SC 1.4.6. Their borders also exceed 3:1 against both supplied surfaces, informed by SC 1.4.11. Transparency, imagery, syntax colors, links and component states can change the result; test them separately.

The resize recipe helps exercise SC 1.4.4, which concerns resizing text to 200% without loss. A selector does not replace browser enlargement. Check reflow at 320 CSS pixels and test the actual layouts.

WHATWG native HTML recipe

htmlPresets.nativeControls sets --openregard-control-background: Canvas, --openregard-control-color: CanvasText, --openregard-control-border-color: ButtonText, --openregard-focus-color: CanvasText and --openregard-color-scheme: light dark. The optional widget CSS consumes them, keeping platform colors and the user's preferred color scheme. A theme set directly on a widget overrides inherited profile tokens.

This is a library styling recipe inspired by WHATWG's rendering guidance for selects, not a standardized WHATWG token set. HTML does not prescribe WCAG numeric contrast or spacing values. Native semantics still require real HTML:

<label>
  Reading preferences
  <select name="display-profile">
    <option value="original">Standard</option>
    <option value="vision">Vision</option>
  </select>
</label>
<button type="button">Reset preferences</button>

The library widget already uses a native label, select and options. If you build your own, wire its change event to regard.setProfile(...) and subscribe to keep its value synchronized. Preserve the label association, select semantics, keyboard interaction and focus. Use real links, headings, landmarks and labeled inputs around the widget. Tokens cannot repair missing semantics.

For classic scripts, self-host openregard/display/presets/browser.js and load it synchronously between the core bundle and a configuration that uses presets. It exposes OpenRegardPresets.wcagPresets and OpenRegardPresets.htmlPresets. The three runnable examples demonstrate this setup.