Appearance
Adjust colors, text and motion. Saved on this device.
Complete palettes for page, cards, text and accent. Each meets WCAG AA in light, dark and high contrast.
Any color works: contrast is tuned to WCAG AA automatically.
Exact token palettes; every pair meets WCAG AA or better.
Shifts colors you cannot tell apart into ones you can.
Adds hatching, dashes and markers next to color.
Atkinson Hyperlegible, designed for low-vision readers.
No justified or centered paragraphs.
A bar that follows the pointer and keyboard focus.
Dims everything except a band around the pointer.
Full keeps animations on even when the device asks to reduce motion.
Every control at least 44 × 44 px.
Short, quiet sounds for clicks, switches and alerts.
Accessibility modes
Contrast schemes, color-vision filters, text spacing, reading aids, motion and interaction aids. Each one is a
data-a11y-* attribute on <html> or any container, works in all 21 themes and in custom brand themes,
mirrors in right-to-left languages, and is available as a ready-made settings panel in React, Vue, Svelte, Angular and Astro.
Each card below is the same interface with one scheme applied to just that card.
This panel is scoped: it writes its attributes to the card below only and does not save anything. The panel in the site header changes the whole site and remembers your choice.
Applies to the report card on this page only. Nothing is saved.
Complete palettes for page, cards, text and accent. Each meets WCAG AA in light, dark and high contrast.
Any color works: contrast is tuned to WCAG AA automatically.
Exact token palettes; every pair meets WCAG AA or better.
Shifts colors you cannot tell apart into ones you can.
Adds hatching, dashes and markers next to color.
Atkinson Hyperlegible, designed for low-vision readers.
No justified or centered paragraphs.
A bar that follows the pointer and keyboard focus.
Dims everything except a band around the pointer.
Full keeps animations on even when the device asks to reduce motion.
Every control at least 44 × 44 px.
Short, quiet sounds for clicks, switches and alerts.
Revenue grew 12% this quarter. Read the full report or download the summary. Most of the growth came from returning customers, who now make up more than half of all orders.
Support response times fell to under two hours, and satisfaction scores reached their highest level this year.
| Mode | Attribute | Values | What it does | WCAG |
|---|---|---|---|---|
| Color scheme | data-a11y-contrast | hc · yellow-black · black-yellow · white-black · black-white · gray · invert | Complete token palettes (!important), so contrast is exact. Gray adds a grayscale filter for images; invert re-inverts photos and video. | 1.4.3, 1.4.6, 1.4.11 |
| Color vision | data-a11y-color-filter | protanopia · deuteranopia · tritanopia · achromatopsia | Daltonization filters (inline SVG feColorMatrix) move hues you cannot tell apart into ones you can. | 1.4.1 |
| Patterns | data-a11y-patterns | (present) | Charts add hatching, dashes and markers. On automatically in gray, hc and achromatopsia. | 1.4.1 |
| Saturation | data-a11y-saturation | low · high | Low desaturates the page; high only boosts images and charts, so text contrast never drops. | |
| Text size | data-a11y-font-scale + --pl-user-font-scale | 0.9 – 2 | Scales every type token and the page text, without zooming the layout. | 1.4.4 |
| Line / letter / word / paragraph spacing | data-a11y-line-height · -letter-spacing · -word-spacing · -paragraph-spacing | wide · wider | "wider" meets or exceeds the WCAG text-spacing values; components reflow without clipping. Arabic keeps letter-spacing at 0 so letters stay joined. | 1.4.12 |
| Readable font | data-a11y-font | readable | Atkinson Hyperlegible (self-hosted, SIL OFL), with an Arabic fallback. | |
| Align to start | data-a11y-text-align | start | No justified or centered paragraphs; start is right in RTL. | 1.4.8 |
| Links | data-a11y-links | underline · highlight | Underline every link, or underline and highlight it. | 1.4.1 |
| Focus indicator | data-a11y-focus | large | 4px outline plus a wide halo on everything focusable. | 2.4.7, 2.4.13 |
| Big cursor | data-a11y-cursor | large | 48px SVG cursors (arrow, hand, text) with a light outline that reads on any background. | |
| Reading guide / mask | data-a11y-reading-guide · data-a11y-reading-mask | (present) | A band that follows the pointer and keyboard focus, or a mask that dims everything else. | |
| Motion | data-a11y-motion | full · reduce · off | Full keeps animations on even when the device asks to reduce motion; reduce matches prefers-reduced-motion; off stops every animation and transition and pauses autoplaying media. The animated theme switch follows the same setting. | 2.2.2, 2.3.3 |
| Theme | data-theme · data-theme-preset · data-accent | system · light · dark · hc; 10 presets; 9 accents; any brand color | The panel’s Theme group: mode, named color themes, accent and your own color (createTheme keeps it WCAG AA). Changes reveal in a circle from the control you used. | 1.4.3, 1.4.11 |
| Sound | pl-sound (storage) | on · off; soft · crisp · playful · minimal | Interface sounds through the Pelagic sound engine. The group appears when the page has a sound engine. | 1.4.2 |
| Decorative images | data-a11y-images | hide | Hides images with empty alt text, presentation images, illustrations and [data-decorative]. | |
| Large targets | data-a11y-targets | large | Every control at least 44 × 44 px with any pointer. | 2.5.5, 2.5.8 |
scripts/check-contrast.mjs checks all 40 text, control and focus pairs for every scheme, the inverted and
low-saturation renderings of all 21 themes, and a sample of custom brand themes, on every build. Lowest ratio per scheme:
| Scheme | Colors | Lowest text pair (needs 4.5) | Lowest UI pair (needs 3) |
|---|---|---|---|
| yellow-black | #ffff00 on #000000 | 14.73:1 | 18.61:1 |
| black-yellow | #000000 on #ffff00 | 12.98:1 | 18.10:1 |
| white-black | #ffffff on #000000 | 14.45:1 | 19.91:1 |
| black-white | #000000 on #ffffff | 12.63:1 | 19.43:1 |
| gray | #1a1a1a on #ffffff | 6.56:1 | 3.88:1 |
| gray-dark | #ededed on #141414 | 7.03:1 | 4.55:1 |
import {
applyA11yPrefs, loadA11yPrefs, saveA11yPrefs, resetA11yPrefs, watchSystemPrefs,
} from '@pelagic-ui/core/a11y-prefs';
// Restore what the user chose last time, then apply it to <html> (or any container).
const prefs = applyA11yPrefs(loadA11yPrefs());
// Change one thing.
saveA11yPrefs(applyA11yPrefs({ ...prefs, contrast: 'yellow-black', fontScale: 1.5 }));
// Follow the OS: reduced motion, contrast, dark mode, forced colors.
const stop = watchSystemPrefs((os) => console.log(os.reducedMotion, os.contrast));// React
import { AccessibilityPanel } from '@pelagic-ui/react';
<AccessibilityPanel locale="ar" onChange={(prefs, change) => track(change)} />
// Vue: <AccessibilityPanel v-model="prefs" trigger="inline" />
// Svelte: <AccessibilityPanel bind:prefs bind:open />
// Angular: <pl-accessibility-panel [(prefs)]="prefs" locale="ar" />
// Astro: <AccessibilityPanel trigger="inline" locale={lang} />
// HTML: root.innerHTML = renderA11yPanelHTML({ locale: 'en' }); mountA11yPanel(root.firstElementChild);<!-- No JavaScript needed for the CSS modes: set the attributes yourself (or server-side). -->
<html data-a11y-contrast="black-yellow" data-a11y-line-height="wider" data-a11y-links="underline">
<section data-a11y-contrast="gray">Scoped to one part of the page</section>