How it works

Overview

A11y Canvas is organised around a configuration panel on the right and a PreviewCanvas in the centre — an interactive mockup that updates in real time with every modification. Two templates are available: App, geared towards SaaS and dashboards, and Vitrine, more expressive, suited to event sites and creative projects. An alternative Rubik's Cube view — accessible via the grid icon at the top of the canvas — lets you visualise the palette in pure form across the 54 cells of an interactive 3D cube. In the header, the device selector lets you preview the mockup across five formats: desktop, laptop, landscape tablet, portrait tablet and mobile. Every change is immediately visible, without reloading.

Each axis is independent — you can configure them in any order. The PreviewCanvas always reflects the complete state of your configuration.

The 6 steps

1. 1

   Choose a preview template

   Two templates are available in the PreviewCanvas. App simulates a SaaS interface with a sidebar, component grid and interactive states — ideal for testing a style guide on a web application or dashboard. Vitrine offers a more expressive layout, suited to event sites, portfolios and creative pages. Switch between them at any time via the toggle above the canvas. This choice does not affect your tokens — it only serves to visualise your style guide in a realistic context. Also use the device selector in the header to see the rendering on different devices, and the grid icon to switch to the Rubik's Cube view — a 3D representation of your colours across 54 cells, which you can rotate freely.

2. 2

   Select or generate a palette

   Browse the predefined palettes, filterable by vibe (crystalline, warm, dark, etc.) and by mode (light / dark). All are WCAG AA compliant. In the palette detail panel, a contrast table shows the four critical pairs (text / background, action / background, etc.) with their ratio and WCAG level. Or enter a base colour in the colour picker: the application automatically generates a coherent palette and checks contrasts in real time. Iso-contrast curves (AA and AAA, against white and dark backgrounds) appear directly on the Saturation-Value square — visual lines that instantly indicate accessible zones as you move the hue cursor.

3. 3

   Choose your fonts

   A heading font (titles) and a body font (body text). All suggested pairs are selected for their readability — especially at small sizes and on coloured backgrounds. Fonts are served via Fontsource, guaranteeing GDPR compliance (no request to Google Fonts).

4. 4

   Adjust border-radius and spacing

   Border-radius: five named presets, from "Angular" (0px — very corporate style) to "Pill" (999px — very rounded style).
   Spacing: three presets on a 4 px base grid — Compact, Standard or Airy. Both settings directly influence the visual rhythm of your interface.

5. 5

   Configure shadows

   Four elevation levels: low, med, high, extra. All shadows are generated in rgba(0, 0, 0, …) — never in pure black — to remain consistent on any background, light or dark.

6. 6

   Export your design tokens

   Click Export to download a ready-to-use CSS variables block. Paste it into your :root and your tokens are immediately available throughout your project. You can also save the configuration to your account to come back to it later from your Tokentèque.

WCAG — understanding compliance levels

The WCAG (Web Content Accessibility Guidelines) define three levels of requirement. A11y Canvas targets level AA — the minimum standard recommended by the RGAA for French public services, and required in most web tenders.

Colour roles

A11y Canvas palettes don't all define the same number of CSS variables. The catalogue offers three richness levels, each corresponding to a different visual complexity. These levels are cumulative: each higher level contains all the roles of the previous level and adds more.

Using these roles rather than raw values allows you to change the entire palette in one place — and switch between light and dark mode without touching the rest of the code.

CSS export

The Export button generates a CSS variables block that you paste directly into the :root selector of your project. Compatible with all front-end frameworks (React, Vue, Svelte, vanilla HTML…).

/* A11y Canvas — export tokens */
:root {
  --color-background-primary: #fdfdfd;
  --color-background-secondary: #f4f4f4;
  --color-text-primary: #0b0f1f;
  --color-action-primary: #8d63f2;
  /* ... 8 more variables */

  --font-heading: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
}

Frequently asked questions

Do I need to create an account to use A11y Canvas?

No. Configuration and preview are accessible without an account. Creating an account is only required to save your configurations in your Tokentèque and come back to them later.

Are "MAXIMUM" palettes (12 colours) different from "OPTIMUM" palettes (10 colours)?

Yes. OPTIMUM palettes have 10 distinct colour roles. MAXIMUM palettes have 12, with two additional accent roles. Both levels are WCAG AA compliant. Choose MAXIMUM if your design requires more visual nuance.

My project uses Tailwind CSS. Are the exported tokens compatible?

Yes. CSS custom properties work independently of Tailwind. You can reference them in your Tailwind configuration via var(--color-action-primary), or use them directly in your CSS modules.

Does A11y Canvas guarantee complete accessibility of my project?

No — and it's important to say this clearly. A11y Canvas covers design tokens: colours, typography, spacing, shadows. Complete project accessibility also requires semantic HTML, keyboard navigation, focus management, ARIA attributes and many other criteria. A11y Canvas gives you a solid foundation — the rest depends on your implementation.

Can I generate a dark mode palette from an existing light palette?

Not yet automatically — each palette is created and tested independently to guarantee WCAG compliance in its mode. But you can select the dark variant of a palette from the catalogue, or generate one via the colour picker by selecting dark mode.