Communitygithub.com

coastdigitalgroup/coastai-skills

Concevoir et implémenter une palette de couleurs systématique garantissant la conformité WCAG 2.2 en matière d'accessibilité. Activez cette compétence lorsque vous devez définir des couleurs de marque, créer des thèmes d'interface utilisateur ou établir un système visuel pour un site web.

Qu'est-ce que coastai-skills ?

Cette compétence fournit une méthodologie complète pour créer des palettes de couleurs accessibles et visuellement cohérentes, allant au-delà du simple choix esthétique pour proposer un système structuré d'échelles, d'associations sécurisées en termes de contraste et d'applications sémantiques. Elle est idéale pour établir une présence numérique de marque, auditer et corriger les problèmes d'accessibilité liés aux couleurs sur un site existant, concevoir des thèmes clair/sombre et définir des couleurs sémantiques pour les retours utilisateur (succès, erreur, avertissement). La compétence prend en charge les niveaux d'accessibilité WCAG AA et AAA et produit des échelles tonales, une matrice de contraste, un mappage sémantique et des propriétés personnalisées CSS prêtes pour la production. Elle met l'accent sur la validation du contraste, l'utilisation de l'espace colorimétrique OKLCH pour des échelons de luminosité plus cohérents, et des règles de décision claires privilégiant la lisibilité et évitant la seule couleur comme vecteur d'information. Les plateformes supportées incluent tous les environnements de développement web où des variables CSS peuvent être implémentées, avec une attention particulière portée à la conformité WCAG 2.2, y compris l'exigence 2.4.11 concernant les indicateurs de focus non obscurcis.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/coastdigitalgroup/coastai-skills/tree/HEAD/website-design/accessible-color-system
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Système de Couleurs Accessible

Objectif

La compétence Système de Couleurs Accessible fournit une méthodologie pour créer des palettes de couleurs à la fois visuellement cohérentes et fonctionnellement accessibles. Elle dépasse le simple choix esthétique pour proposer un système structuré d'échelles, d'associations sécurisées en termes de contraste et d'application sémantique, garantissant que le contenu est perceptible par tous les utilisateurs, y compris ceux ayant des déficiences visuelles.

Cas d'Utilisation

  • Établir la présence numérique d'une nouvelle marque.
  • Auditer et corriger les problèmes d'accessibilité liés aux couleurs d'un site existant.
  • Concevoir des thèmes Mode Clair/Mode Sombre.
  • Définir des couleurs sémantiques pour les retours (succès, erreur, avertissement).

Quand NE PAS Utiliser

  • Expériences Artistiques : Lorsque la couleur est utilisée purement pour l'expression et ne porte pas d'information fonctionnelle (bien que l'accessibilité soit toujours encouragée).
  • Applications Héritées avec Code en Dur : Lorsque la dette technique rend impossible l'implémentation d'un système de variables (privilégier des correctifs ponctuels).
  • Éléments Purement Décoratifs : Éléments comme les motifs d'arrière-plan qui ne contiennent ni texte ni composants interactifs (WCAG 1.4.3 ne s'applique pas ici).

Entrées

Pour générer un système de couleurs accessible, vous avez besoin de :

  1. Couleur Principale de la Marque : La couleur centrale qui identifie la marque (ex. #0055FF).
  2. Base Neutre : Un point de départ pour les gris/noirs (ex. #1A1A1A ou un neutre teinté).
  3. Objectif d'Accessibilité : Niveau AA (standard) ou AAA (renforcé) du WCAG.
  4. Contexte d'Utilisation : S'agit-il d'un tableau de bord haute densité, d'une page d'atterrissage marketing ou d'une application utilitaire ?

Sorties

  1. Échelles de Couleurs : Palettes tonales pour les couleurs principales, secondaires, neutres et sémantiques (généralement des échelles de 10 niveaux).
  2. Matrice de Contraste : Une carte indiquant quelles couleurs de premier plan sont sûres à utiliser sur quelles couleurs d'arrière-plan.
  3. Mappage Sémantique : Rôles définis pour les couleurs (ex. --color-action-primary, --color-surface-muted).
  4. Propriétés Personnalisées CSS : Un bloc de variables CSS prêt pour la production, utilisant éventuellement color-mix() pour dériver les teintes de survol/actif à partir d'un seul jeton de base au lieu de sélectionner manuellement chaque couleur d'état.

Workflow

1. Générer les Échelles Tonales

Développez les couleurs de base en échelles (ex. 50 à 900). Utilisez un outil ou une formule qui maintient des paliers de luminosité cohérents. Travailler dans l'espace colorimétrique OKLCH (plutôt que HSL) produit des paliers de luminosité plus uniformes sur le plan perceptif entre les teintes, ce qui facilite la prévision du contraste avant les tests. Conseil : Assurez-vous que votre Primary 500 ou 600 est la version « marque ».

2. Définir les Neutres

Créez une échelle neutre. Envisagez de « teinter » les neutres avec une petite quantité de la couleur principale (ex. 2-5 %) pour créer un aspect plus cohérent.

3. Établir les Rôles Sémantiques

Attribuez des couleurs à des rôles fonctionnels :

  • Action : Couleur principale pour les boutons, les liens et les états actifs.
  • Surface : Arrière-plans, cartes et séparateurs (neutres).
  • Contenu : Texte et icônes (neutres à contraste élevé).
  • Statut : Succès (Vert), Avertissement (Jaune/Orange), Erreur (Rouge), Info (Bleu).

4. Effectuer la Validation du Contraste

Testez les associations à l'aide des formules WCAG (1.4.3, 1.4.11) :

  • Texte Normal : 4,5:1 pour AA, 7:1 pour AAA.
  • Texte Large (>18pt) : 3:1 pour AA, 4,5:1 pour AAA.
  • Composants d'Interface Utilisateur/Icônes : 3:1 pour AA (contraste non textuel, 1.4.11).
  • Indicateurs de Focus : 3:1 par rapport aux couleurs adjacentes, et l'indicateur ne doit pas être masqué par des en-têtes fixes ou d'autres contenus (WCAG 2.2 SC 2.4.11, Focus Non Obscurci).

5. Créer des Règles d'Association

Documentez quelles couleurs de texte peuvent aller sur quels arrière-plans. Exemple : Le texte blanc (#FFFFFF) n'est sûr que sur Primary 600 ou plus.

Règles de Décision

  • Lisibilité d'Abord : La fonction (lisibilité) prévaut toujours sur l'esthétique. Si une couleur de marque est trop claire pour le texte, utilisez une variante plus foncée pour le texte tout en gardant la couleur de marque pour les éléments décoratifs.
  • Éviter la Couleur Seule : Ne jamais se fier uniquement à la couleur pour transmettre une information (par exemple, inclure une icône ou une étiquette de texte avec un message d'erreur).
  • Luminosité Cohérente : Maintenez des valeurs de luminosité similaires entre différentes teintes au même niveau d'échelle (par exemple, Red 500 et Blue 500 doivent avoir une luminosité perçue similaire).

Contraintes

  • Adaptabilité : Les couleurs doivent maintenir le contraste sur les écrans mobiles où l'éblouissement ou les écrans de faible qualité peuvent réduire la visibilité.
  • Accessibilité : Doit répondre au moins aux normes WCAG 2.2 AA pour tous les éléments fonctionnels, y compris l'exigence 2.4.11 selon laquelle les indicateurs de focus restent visibles et non obscurcis.
  • Hiérarchie : Utilisez la saturation et le contraste des couleurs pour guider l'œil ; les éléments les plus importants (appels à l'action) doivent avoir un poids visuel plus élevé.

Schémas d'Échec Courants

  • Contraste Insuffisant : Utiliser un texte gris clair sur fond blanc ou un texte blanc sur une couleur de marque claire.
  • Couleurs Vibrantes : Associer des couleurs très saturées (comme le rouge et le vert) qui provoquent une fatigue visuelle.
  • Trop de Couleurs : Créer un effet « arc-en-ciel » qui dilue l'identité de la marque et confond la hiérarchie.
  • Mauvais Usage Sémantique : Utiliser le « Rouge d'Erreur » pour un élément décoratif, entraînant une anxiété chez l'utilisateur.

Critères de Validation

  • Chaque élément de texte fonctionnel a un rapport de contraste d'au moins 4,5:1 par rapport à son arrière-plan.
  • Les composants d'interface utilisateur (bordures, icônes) ont un contraste d'au moins 3:1.
  • Le système comprend une échelle claire pour les couleurs primaires et neutres.
  • L'information n'est jamais transmise uniquement par la couleur.
  • Le système est documenté à l'aide de propriétés personnalisées CSS pour la portabilité.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for long-form content, managing readability, vertical rhythm, and information density to ensure a superior reading experience.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for informational elements that communicate state (Badges) and categorization (Tags) with clarity and accessibility.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for non-overlay notifications, managing global announcements and contextual inline alerts to communicate system states without interrupting the user's flow.

coastdigitalgroup/coastai-skills

Design and implement a systematic, asymmetrical bento-grid layout framework to organize diverse content types cohesively while maintaining strict visual hierarchy, logical focus order, and responsive flexibility.

coastdigitalgroup/coastai-skills

Design a responsive, mobile-first bottom navigation bar and persistent action dock system for mobile websites and web applications, establishing spatial anchors, tab bar anatomy, badge indicators, thumb-zone ergonomics, safe area inset handling, active/inactive state contrast, and desktop responsive adaptation rules.

coastdigitalgroup/coastai-skills

Design a mobile-first bottom sheet overlay system with configurable detents, drag affordances, safe area padding, responsive desktop modal/popover adaptation, and WCAG AA accessibility compliance.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for secondary navigation trails that provide orientation, context, and one-click access to parent levels in deep information architectures.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for buttons and interactive triggers, managing visual hierarchy, variant logic, and action grouping to ensure clear intent and accessible interaction.

coastdigitalgroup/coastai-skills

Design a systematic framework for date and time selection, managing calendar grids, range pickers, and scheduling interfaces to ensure precision and accessibility.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for modular content containers that maintain hierarchy, structural integrity, and action alignment across variable content and responsive viewports.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for horizontal discovery components, managing navigation affordances, scroll behavior, and accessibility to ensure effective content density without compromising usability.

coastdigitalgroup/coastai-skills

Design a systematic, highly accessible, and developer-friendly UI layout framework for code blocks, snippet showcases, multi-file code tabs, line-highlighting, diff views, and syntax token contrast in technical documentation and developer platforms.

coastdigitalgroup/coastai-skills

Design a systematic framework for global command menus (Cmd+K panels) that combines keyboard-driven navigation, command execution, and shortcut discovery into an accessible, responsive overlay.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for threaded conversations, managing nesting depths, action hierarchies, and community signaling to foster engagement and readability.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for side-by-side comparison interfaces, managing high attribute density and responsive complexity to support informed decision-making.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for user privacy, managing consent banners, preference centers, and persistent privacy controls to balance legal compliance with user trust.

coastdigitalgroup/coastai-skills

Design and implement a systematic, highly accessible, and responsive visual layout framework for conversational chat widgets, live chat boxes, and chatbot panels that ensures clear message scannability, native focus flow, and seamless mobile keyboard adaptation.

coastdigitalgroup/coastai-skills

Design a systematic, accessible, and high-conversion framework for custom select dropdowns and comboboxes, defining anatomy, states, search-filtering, and responsive mobile-adaptive patterns.

coastdigitalgroup/coastai-skills

Design and specify a systematic dark theme framework, establishing rules for elevation-based surface colors, desaturated brand accents, text legibility, and media adaptation to ensure an accessible, low-fatigue experience.

coastdigitalgroup/coastai-skills

Design and implement a systematic framework for progressive disclosure using accordions, ensuring structural integrity, visual affordances, and accessibility across different content densities and devices.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community