Comment ça marche

Vue d'ensemble

A11y Canvas est organisé autour d'un panneau de configuration à droite et d'une PreviewCanvas au centre — une mini-maquette de landing page qui se met à jour en temps réel à chaque modification. Chaque changement est immédiatement visible, sans rechargement.

Chaque axe est indépendant — vous pouvez les configurer dans l'ordre que vous voulez. La PreviewCanvas reflète toujours l'état complet de votre configuration.

Les 6 étapes

1. 1

   Choisissez un type de landing page

   18 types disponibles : SaaS, portfolio, e-commerce, application mobile, événement, etc. Ce choix détermine la structure de la maquette affichée dans la PreviewCanvas — l'organisation des blocs, des titres et des CTA. Vous pouvez en changer à tout moment sans perdre votre configuration.

2. 2

   Sélectionnez ou générez une palette

   Parcourez les ~59 palettes prédéfinies, filtrables par ambiance (cristallin, chaleureux, sombre, etc.) et par mode (light / dark). Toutes sont conformes WCAG AA. Ou saisissez une couleur de base dans le color picker : l'application génère automatiquement une palette cohérente et vérifie les contrastes en temps réel. Un indicateur visuel vous alerte si un ratio n'est pas suffisant.

3. 3

   Choisissez vos polices

   Une police heading (titres) et une police body (corps de texte). Toutes les paires proposées sont sélectionnées pour leur lisibilité — notamment à petite taille et sur fond coloré. Les polices sont servies via Fontsource, ce qui garantit la conformité RGPD (pas de requête vers Google Fonts).

4. 4

   Ajustez le border-radius et l'espacement

   Border-radius : cinq presets nommés, de « Angulaire » (0px — style très corporate) à « Pill » (999px — style très arrondi).
   Espacement : trois presets sur une grille à base 4 px — Compact, Standard ou Aéré. Ces deux réglages influencent directement le rythme visuel de votre interface.

5. 5

   Configurez les ombres

   Quatre niveaux d'élévation : low, med, high, extra. Toutes les ombres sont générées en rgba(0, 0, 0, …) — jamais en noir pur — pour rester cohérentes sur n'importe quel fond, clair ou sombre.

6. 6

   Exportez vos design tokens

   Cliquez sur Exporter pour télécharger un bloc de variables CSS prêt à l'emploi. Collez-le dans votre :root et vos tokens sont immédiatement disponibles dans tout votre projet. Vous pouvez aussi sauvegarder la configuration dans votre compte pour y revenir plus tard.

WCAG — comprendre les niveaux de conformité

Les WCAG (Web Content Accessibility Guidelines) définissent trois niveaux d'exigence. A11y Canvas cible le niveau AA — le standard minimum recommandé par le RGAA pour les services publics français, et exigé dans la plupart des appels d'offres web.

Les rôles couleur

Les palettes A11y Canvas ne définissent pas toutes le même nombre de variables CSS. Le catalogue propose trois niveaux de richesse, chacun correspondant à une complexité visuelle différente. Ces niveaux sont cumulatifs : chaque niveau supérieur contient tous les rôles du niveau précédent et en ajoute.

Utiliser ces rôles plutôt que des valeurs brutes permet de changer toute la palette en un seul endroit — et de basculer entre light et dark mode sans toucher au reste du code.

L'export CSS

Le bouton Exporter génère un bloc de CSS variables que vous collez directement dans le sélecteur :root de votre projet. Compatible avec tous les frameworks front-end (React, Vue, Svelte, HTML vanilla…).

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

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

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

Questions fréquentes

Dois-je créer un compte pour utiliser A11y Canvas ?

Non. La configuration et la prévisualisation sont accessibles sans compte. La création de compte est nécessaire uniquement pour sauvegarder vos configurations dans votre Tokentèque et y revenir plus tard.

Les palettes « MAXIMUM » (12 couleurs) sont-elles différentes des palettes « OPTIMUM » (10 couleurs) ?

Oui. Les palettes OPTIMUM ont 10 rôles couleur distincts. Les palettes MAXIMUM en ont 12, avec deux rôles d'accent supplémentaires. Les deux niveaux sont conformes WCAG AA. Choisissez MAXIMUM si votre design nécessite plus de nuances visuelles.

Mon projet utilise Tailwind CSS. Les tokens exportés sont-ils compatibles ?

Oui. Les CSS custom properties fonctionnent indépendamment de Tailwind. Vous pouvez les référencer dans votre configuration Tailwind via var(--color-action-primary), ou les utiliser directement dans vos modules CSS.

A11y Canvas garantit-il l'accessibilité complète de mon projet ?

Non — et c'est important de le dire clairement. A11y Canvas couvre les design tokens : couleurs, typographie, espacement, ombres. L'accessibilité complète d'un projet implique aussi le HTML sémantique, la navigation au clavier, la gestion du focus, les attributs ARIA et bien d'autres critères. A11y Canvas vous donne un socle solide — le reste dépend de votre implémentation.

Puis-je générer une palette dark mode à partir d'une palette light existante ?

Pas encore automatiquement — chaque palette est créée et testée indépendamment pour garantir la conformité WCAG dans son mode. Mais vous pouvez sélectionner la variante dark d'une palette depuis le catalogue, ou en générer une via le color picker en choisissant le mode dark.