Comment ColorContract construit votre système de couleurs
À partir d'une seule couleur de marque, ColorContract génère des échelles tonales, une vingtaine de jetons sémantiques, et vérifie chaque combinaison accessible, en clair et en sombre. Voici ce qui se passe, étape par étape.
Une couleur de marque, jamais modifiée
Vous saisissez votre couleur en hex, rgb ou oklch. Elle est verrouillée : l'outil ne la change jamais de lui-même.
Si elle ne peut pas tenir une combinaison (par exemple du texte sur un fond clair), ColorContract le signale et propose une variante, sans toucher à la marque. La carte des usages montre où la marque passe telle quelle et où une variante prend le relais, en clair et en sombre.
Des échelles construites en OKLCH
Chaque teinte devient une échelle de 10, 11 (par défaut) ou 12 crans, espacés régulièrement en clarté perçue. Les crans clés sont placés juste au-dessus des seuils utiles : 3:1 pour les contrôles, 4,5:1 pour le texte, 7:1 pour le niveau AAA.
Le chroma suit une courbe : maximal au milieu, adouci aux extrémités, et borné par le gamut sRGB propre à chaque teinte. Une correction de teinte perceptuelle évite, par exemple, que les jaunes foncés virent à l'olive ; elle se désactive teinte par teinte.
Le neutre et les couleurs d'état (erreur, avertissement, succès, info) sont générés avec la marque et s'accordent à elle, en trois styles au choix : vifs, accordés à la marque ou discrets.
Des rôles aux combinaisons garanties
Les couleurs sont organisées en jetons sémantiques : texte, surfaces, action, bordures et focus, états. Chaque rôle connaît le fond sur lequel il doit être lisible et le seuil à atteindre selon WCAG 2.2 : 4,5:1 pour le texte, 3:1 pour les contrôles et le focus.
Les ratios sont tronqués, jamais arrondis vers le haut : 4,49:1 est un échec. Ce qui est annoncé comme réussi l'est vraiment.
Clair et sombre, pas une inversion
Chaque rôle pointe vers d'autres crans en mode sombre, et chaque combinaison est vérifiée dans les deux modes. En sombre, les cibles sont renforcées et le texte n'est jamais d'un blanc pur, pour éviter l'effet de halo.
Vous gardez la main
Remplacez un cran ou un rôle : l'outil signale toute combinaison qui casse et propose une solution. Vous pouvez aussi garder une combinaison en échec, avec une justification qui suivra dans l'export.
Ajoutez des teintes (analogue, complémentaire, triadique…), choisissez vos fonds, le niveau AA ou AAA, et le nommage de vos jetons (gabarits Atlassian, IBM Carbon, Material, Shopify Polaris).
Un export documenté
Exportez en DTCG (W3C Design Tokens), Figma Variables, Tokens Studio, Style Dictionary ou variables CSS, avec le clair et le sombre dans le même fichier. Chaque export documente ses combinaisons accessibles, les exceptions justifiées et la version de l'algorithme.
Rien ne quitte votre navigateur
Il n'y a ni compte ni serveur de projets : le projet est encodé dans l'adresse de la page. Pour le partager ou le rouvrir plus tard, il suffit de copier son lien.