Studio d'Accessibilité des Couleurs et Palettes
Créez des palettes accessibles à partir de zéro ou d'images, vérifiez le contraste WCAG 2.2, générez des corrections, simulez le daltonisme et exportez en CSS, Tailwind et JSON.
- Vérification précise de la luminance relative et du contraste WCAG 2.2 (AA, AAA et non-texte)
- Correction automatique de contraste dans l'espace OKLCH avec changement minimal de nuance
- Extraction de palettes dans le navigateur via l'algorithme Median Cut sans envoi au serveur
- Simulation des daltonismes (protanopie, deutéranopie, tritanopie, achromatopsie) sur de vrais composants
- Exportation multi-formats : variables CSS, SCSS, Tailwind CSS, Design Tokens JSON, SVG et PNG
Start From
Color Inspector
Couleur de base (HEX, RGB, HSL, OKLCH)
#4F46E5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
hsv(243, 69%, 90%)
oklch(0.5106 0.2301 277)
Échantillons de la palette
8 colorsPrimary Indigo
Sky Blue
Amber Accent
Text Gray 900
Muted Gray 500
White Background
Surface Gray 100
Border Gray 200
Vérification du contraste WCAG 2.2
WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum) & 1.4.6 (Enhanced)
Passes WCAG AA for normal & large text
Large Headline (18pt Bold / 24px)
This is regular body text preview (16px / 1rem). Ensure high readability for all users, including those with low vision or varying environmental light conditions.
Suggestions d'accessibilité (changement minimal OKLCH)
Perceptually uniform OKLCH binary search for minimal color distortion (lowest ΔE)
Preview Text
Contrast: 18.63:1
Palette Contrast Matrix
Cross-audit all foreground and background combinations across your palette. Click any cell to test.
| FG ↓ \ BG → | 4F46E5 | 0EA5E9 | F59E0B | 111827 | 6B7280 | FFFFFF | F3F4F6 | E5E7EB |
|---|---|---|---|---|---|---|---|---|
#4F46E5 | — | 2.27 | 2.93 | 2.82 | 1.3 | 6.29 | 5.71 | 5.08 |
#0EA5E9 | 2.27 | — | 1.29 | 6.4 | 1.74 | 2.77 | 2.52 | 2.24 |
#F59E0B | 2.93 | 1.29 | — | 8.26 | 2.25 | 2.15 | 1.95 | 1.73 |
#111827 | 2.82 | 6.4 | 8.26 | — | 3.67 | 17.74 | 16.12 | 14.33 |
#6B7280 | 1.3 | 1.74 | 2.25 | 3.67 | — | 4.83 | 4.39 | 3.9 |
#FFFFFF | 6.29 | 2.77 | 2.15 | 17.74 | 4.83 | — | 1.1 | 1.24 |
#F3F4F6 | 5.71 | 2.52 | 1.95 | 16.12 | 4.39 | 1.1 | — | 1.13 |
#E5E7EB | 5.08 | 2.24 | 1.73 | 14.33 | 3.9 | 1.24 | 1.13 | — |
Aperçu des composants d'interface
Test theme colors in realistic UI layouts with WCAG SC 1.4.1 compliance
Analytics Overview
Updated 5 minutes ago
Total Users
24,592
Conversion Rate
3.48%
Error Incidents
2
Simulation des déficiences de vision des couleurs
Test how color vision deficiency affects your palette and chart readability
Deuteranopia (Green-blind)
Medium-wavelength (M) cone absence; difficulties distinguishing red and green.
* Simulation mathématique approximative. La perception individuelle peut varier.
Palette Simulation
#4C4CC6
orig: #4F46E5
#6A60D8
orig: #0EA5E9
#DAE05B
orig: #F59E0B
#141323
orig: #111827
#6E6D7C
orig: #6B7280
#FFFFFF
orig: #FFFFFF
#F3F3F5
orig: #F3F4F6
#E6E6EA
orig: #E5E7EB
Accessible Multi-Series Chart Preview
WCAG SC 1.4.1 Compliant: Differentiating series with both color, stroke styles, and shape markers
Analyse des risques de contraste sur dégradé
Multi-point contrast risk analysis across gradient color stops
Gradient Hero Headline
Background gradients can create unexpected readability zones where contrast drops below WCAG requirements.
background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);Lisibilité du texte sur image
Calibrate scrim overlay opacity to guarantee readable text over varied images
Scenic Horizon Photography
Semi-transparent scrim layers ensure dependable legibility regardless of underlying image luminance spikes.
background-color: rgba(0, 0, 0, 0.50);Exporter le code et les fichiers
Export tokens to CSS variables, SCSS, Tailwind v3/v4, W3C JSON, SVG, PNG, or complete ZIP archive
:root {
/* Palette Tokens */
--color-primary-indigo: #4F46E5;
--color-sky-blue: #0EA5E9;
--color-amber-accent: #F59E0B;
--color-text-gray-900: #111827;
--color-muted-gray-500: #6B7280;
--color-white-background: #FFFFFF;
--color-surface-gray-100: #F3F4F6;
--color-border-gray-200: #E5E7EB;
/* Semantic Roles (Light Theme) */
--color-primary: #4F46E5;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #FFFFFF;
--color-surface: #F8FAFC;
--color-text: #0F172A;
--color-mutedText: #64748B;
--color-border: #E2E8F0;
--color-focus: #4F46E5;
--color-success: #16A34A;
--color-warning: #D97706;
--color-danger: #DC2626;
--color-info: #0284C7;
/* Interactive States */
--color-primary-hover: #4433D3;
--color-primary-active: #3A1DC2;
--color-primary-focus: #4F46E5;
--color-primary-disabled: #A8ACC4;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #7579FF;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #0F172A;
--color-surface: #1E293B;
--color-text: #F8FAFC;
--color-mutedText: #94A3B8;
--color-border: #334155;
--color-focus: #818CF8;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-danger: #F87171;
--color-info: #38BDF8;
--color-primary-hover: #8389FF;
--color-primary-active: #9299FF;
--color-primary-focus: #7579FF;
--color-primary-disabled: #37394A;
}
}À propos du Studio d'Accessibilité des Couleurs et Palettes
Le Studio d'Accessibilité des Couleurs de Solasu dépasse largement le cadre d'un simple nuancier ou vérificateur de contraste.
Il offre un flux de travail professionnel complet : création de nuances, extraction automatique depuis des images, audit de conformité WCAG 2.2 (critères AA, AAA et éléments graphiques), correction intelligente par décalage minimal dans l'espace perceptif OKLCH, aperçu interactif en modes clair et sombre, simulation des daltonismes et export de code pour CSS, Tailwind, JSON, SVG, PNG et ZIP.
L'ensemble des calculs s'exécute localement dans la mémoire de votre navigateur, sans aucun envoi vers un serveur.
Calcul de contraste rigoureux selon la norme W3C / WCAG 2.2
Mise en œuvre scrupuleuse de la formule de luminance relative sRGB après linéarisation gamma (L = 0.2126*R + 0.7152*G + 0.0722*B).
Évaluation indépendante du texte standard (AA: 4.5:1, AAA: 7.0:1), des grands caractères (AA: 3.0:1, AAA: 4.5:1) et des contrôles d'interface (3.0:1).
Correction de couleur à « changement minimal » dans l'espace OKLCH
En cas de contraste insuffisant, notre algorithme effectue une recherche dichotomique sur la luminosité OKLCH pour atteindre le seuil requis tout en préservant la teinte d'origine.
Plusieurs modes d'ajustement (fond fixe, texte fixe ou adaptation simultanée) sont proposés avec quantification Delta E.
Extraction de palette locale depuis des images (Median Cut)
Extraction automatique des dominantes, touches vives, tons neutres, sombres et clairs à partir de fichiers JPEG, PNG et WebP, avec élimination des zones transparentes.
Redimensionnement de sécurité à 1000px et garde-fou de 64MP pour préserver la mémoire du navigateur.
Simulation du daltonisme et validation sur composants réels
Simulation de la protanopie, deutéranopie, tritanopie et achromatopsie sur tableaux de bord, formulaires et graphiques.
Rappel de la règle WCAG 2.2 1.4.1 pour ne jamais transmettre une information uniquement par la couleur sans texte ou icône d'accompagnement.
Exportation de code prêt pour l'intégration
Génération de variables CSS avec états d'interaction et requêtes mode sombre, configurations Tailwind CSS v3 et v4, jetons Design Tokens JSON, SVG et archives ZIP.
Foire Aux Questions (FAQ)
Cet outil est-il gratuit ? Faut-il créer un compte ?
L'outil est 100% gratuit, sans inscription ni abonnement.
Mes images ou mes couleurs sont-elles enregistrées sur un serveur ?
Non, tous les calculs sont strictement locaux. Aucune donnée n'est transmise.
Quels formats de couleur sont pris en charge ?
HEX (3, 4, 6, 8 chiffres), RGB, RGBA, HSL, HSLA, HSV et OKLCH.
Comment est calculé le ratio de contraste WCAG 2.2 ?
Par linéarisation de la luminance relative : (Plus clair + 0.05) / (Plus sombre + 0.05).
Quelle est la différence entre les niveaux AA et AAA ?
AA exige 4.5:1 pour le texte normal et 3.0:1 pour les grands textes ; AAA exige 7.0:1 et 4.5:1.
Qu'est-ce qu'un « grand texte » selon la norme ?
Un texte d'au moins 18pt (environ 24px) ou 14pt (environ 18.66px) en gras.
Qu'est-ce que le contraste non textuel ?
Le critère 1.4.11 exige un contraste minimal de 3.0:1 pour les bordures de champs, icônes et boutons.
Comment fonctionnent les suggestions de correction ?
En modifiant la luminosité dans l'espace OKLCH pour trouver la nuance valide la plus proche.
Que signifie « changement minimal » ?
Minimiser l'écart Delta E dans l'espace Oklab pour préserver la fidélité de marque.
Comment sont extraites les couleurs d'une image ?
Par quantification Median Cut directement sur le canevas de votre navigateur.
Comment sont traités les pixels transparents PNG ?
Les pixels avec un canal alpha inférieur à 128 sont exclus de l'analyse.
Puis-je importer des photos en très haute résolution ?
Oui, elles sont redimensionnées à 1000px pour préserver la rapidité et la mémoire.
La simulation de daltonisme est-elle exacte ?
C'est un modèle mathématique représentatif, la perception réelle variant selon les individus.
Quels types de daltonisme peuvent être simulés ?
Protanopie (rouge), deutéranopie (vert), tritanopie (bleu/jaune) et achromatopsie (noir et blanc).
Pourquoi les graphiques ne doivent-ils pas dépendre uniquement de la couleur ?
Pour permettre aux utilisateurs daltoniens d'identifier les séries via des pointillés et étiquettes.
Comment le mode sombre est-il audité ?
Les couleurs sont reconfigurées pour fond sombre (#0F172A) avec un contrôle des contrastes.
Comment analyser le contraste sur un dégradé ?
En évaluant 11 points le long du dégradé pour détecter les zones à risque inférieur à 4.5:1.
Quelles sont les règles pour afficher du texte sur une image ?
L'outil mesure la luminance moyenne et calcule l'opacité requise pour un voile protecteur.
L'export Tailwind CSS est-il disponible ?
Oui, pour la configuration Tailwind v3 ainsi que la syntaxe CSS `@theme` de Tailwind v4.
Que contient le fichier ZIP téléchargeable ?
palette.css, palette.scss, tailwind.config.js, tokens.json, palette.svg et palette.png.
L'outil fonctionne-t-il sur smartphone ?
Oui, l'interface est conçue pour s'adapter parfaitement aux écrans mobiles tactiles.
Un bon contraste garantit-il une accessibilité totale ?
Non, d'autres critères comme la navigation au clavier et les balises sémantiques sont indispensables.