Spätzi, l'assistant contrastes accessibles

Spatzi est un outil en ligne interactif conçu pour aider les designers et développeurs à créer des palettes de couleurs accessibles.

Il permet de vérifier les ratios de contraste selon les normes WCAG (Web Content Accessibility Guidelines) et APCA (Accessible Perceptual Contrast Algorithm), et d'explorer des variations de couleurs en utilisant l'espace colorimétrique OKLCH (Luminance, Chroma, Hue).

Fonctionnalités principales

• ℹ️ Informations d'accessibilité : obtenez les taux de contraste entre la couleur de fond et la couleur de texte selon les normes WCAG 2.1 et APCA.
• 🎨 Aperçu en direct : visualisation directe du rendu texte/fond selon les combinaisons choisies.
• 👁️ Exemples d'application en temps réel : une démonstration (recette de cuisine) montre comment vos couleurs s'appliquent sur du texte de différentes tailles et des éléments graphiques, avec des indicateurs visuels de conformité (✅/❌).
• 🎯 Couleur proche accessible : trouve automatiquement la couleur la plus proche qui respecte les seuils d'accessibilité WCAG (4.5:1) ou APCA (60) selon le mode sélectionné
• ⚖️ Guides d’accessibilité intégrés : indications sur les seuils requis pour AA, AAA ou APCA lisibilité renforcée.
• ↔️ Échange de couleurs : bouton de permutation pour échanger instantanément la couleur de fond et la couleur de texte.
• 🧽 Réinitialiser : remet les couleurs à leurs valeurs par défaut
• ⚠️ Un avertissement "(sRGB la plus proche)" apparaît si une couleur OKLCH choisie ou générée est en dehors du champ sRGB. La valeur HEX affichée correspond alors à la couleur sRGB la plus proche.

👀 Pour qui ?

Cet outil est destiné à toute personne travaillant dans le Web et concernée par l'accessibilité de ses interfaces :

• Designers UX/UI soucieux de l’accessibilité.
• Développeurs front-end cherchant à valider ou ajuster leurs combinaisons de couleurs.
• Formateurs en accessibilité numérique.

Comment utiliser cet outil ?

• Sélectionnez vos couleurs de base : Sélectionnez une couleur de fond et une couleur de texte à l'aide des sélecteurs de couleur ou en saisissant directement les valeurs (formats acceptés : mots-clés CSS, OKLCH, HEX, RGB, HSL)
• Observez la boîte de couleur : Vérifiez les informations de couleur et les ratios de contraste.
• Explorez les variations : Utilisez les curseurs L, C, H pour modifier la couleur de fond (ou de texte).
• Utilisez les boutons d'action :
  • Réinitialiser pour revenir aux couleurs par défaut
  • Couleur proche accessible pour optimiser automatiquement l'accessibilité
• Basculez entre WCAG et APCA : Utilisez le commutateur pour évaluer vos couleurs selon différentes normes d'accessibilité.

Pourquoi OKLCH ?

L'espace colorimétrique OKLCH offre plusieurs avantages :

• Gamut étendu : Représente une plus large gamme de couleurs que sRGB.
• Perception uniforme : Basé sur la manière dont l'œil humain perçoit les couleurs.
• Manipulation intuitive : Les paramètres de teinte, luminosité et saturation sont plus intuitifs.
• Meilleure préservation de la teinte : Lors des transitions ou des dégradés.
• Contrôle précis du contraste : Le composant de luminosité (L) correspond directement à la luminosité perçue.

Pour en savoir plus sur le support navigateur et les avantages d'OKLCH, consultez Can I use OKLCH? et l'article OKLCH in CSS: why we moved from RGB and HSL.

Ce projet open-source est développé avec ❤️ par Alsacréations.