Outils de couleur FREE
Choisir, convertir et générer des couleurs, des palettes, des échelles et des dégradés, avec le contraste WCAG, des suggestions accessibles et la simulation du daltonisme. Tout est calculé dans votre navigateur.
Sélecteur et conversions
Toutes les notations
Détails techniques
Contraste
APCA (brouillon, information supplémentaire)
APCA est le modèle de contraste perceptuel rédigé pour WCAG 3. Ce n'est pas une exigence de conformité aujourd'hui et il diverge de WCAG 2 dans les deux sens : il est donc présenté comme une information supplémentaire, jamais comme un succès ou un échec.
Ce que cela donne
Palettes
Quelles paires sont lisibles
Chaque couleur en texte sur chaque autre. Le nombre est le rapport de contraste WCAG ; AA vaut 4,5:1 pour le texte normal et 3:1 pour le grand texte et les composants d'interface.
Copier la palette
Échelles
Onze niveaux construits en OKLCH, pour que les écarts paraissent réguliers et pas seulement des nombres réguliers. Le résultat est formé pour se coller là où un framework utilitaire attend une échelle ; c'est la gamme de cet outil et la palette d'aucun framework.
Ajuster la gamme
Dégradés
À partir d'une image
Déposez une image ici, ou choisissez-en une
Elle est lue dans cet onglet et jamais téléversée. Rien n'est conservé une fois la page quittée.
Vision des couleurs
Un modèle de ce qu'une paire de couleurs perd sous les formes courantes de daltonisme, calculé avec la projection de Vienot, Brettel et Mollon. C'est une simulation et non une photographie de ce que voit une personne donnée.
Paires qui cessent d’être distinguables
Tirées de la palette. Seules les paires nettement différentes en vision normale sont listées - deux couleurs qui se ressemblent déjà relèvent d'un choix de conception, pas d'un constat.
Chaque conversion, chaque palette et chaque valeur de contraste de cette page est calculée dans votre navigateur. Une image déposée ici est lue sur un canvas dans cet onglet et n'est jamais téléversée.
Ce que ces chiffres signifient, et ce qu'ils ne signifient pas
Calculé ici, à partir de formules publiées
Les conversions suivent CSS Color Level 4, y compris la vraie courbe de transfert sRGB plutôt qu'une approximation, et le contraste suit la définition de WCAG 2.2. Une paire de couleurs qui satisfait l'exigence de contraste ne rend pas une page accessible : le contraste est un critère de succès parmi beaucoup d'autres, et c'est celui-là que cet outil mesure. Tout s'exécute dans votre navigateur et rien n'est envoyé nulle part.
FAQ
Mes couleurs ou mes images sont-elles envoyées quelque part ?
Non. Chaque conversion, chaque palette, chaque échelle et chaque valeur de contraste est calculée dans cet onglet. Une image est lue ici sur un canvas et jamais téléversée ; les couleurs récentes et votre palette sont conservées dans le stockage propre à ce navigateur, et vous pouvez effacer les deux.
Pourquoi OKLCH plutôt que HSL ?
Parce que la luminosité de HSL est une moyenne des canaux, et non ce que l'oeil mesure. Faites tourner une teinte de 120 degrés en HSL et l'un des trois résultats paraît nettement plus sombre que les autres ; faites-le en OKLCH et les trois se lisent comme une même famille. Il en va de même pour une gamme de teintes : des pas égaux de luminosité HSL se tassent aux extrémités. HSL reste affiché, parce que c'est dans ce modèle qu'est écrit beaucoup de code.
Réussir le test de contraste rend-il ma page accessible ?
Non, et la formulation est prudente sur ce point. Une paire de couleurs satisfait une exigence de contraste. Le contraste est un critère de succès parmi beaucoup d'autres - ordre de focus, libellés, parcours au clavier, mouvement et structure sont tous distincts - et une page au contraste parfait peut rester inutilisable. Servez-vous en pour trancher la question des couleurs, pas la question entière.
Ce qu'est APCA, et pourquoi il figure dans un panneau séparé
C'est le modèle de contraste perceptuel rédigé pour WCAG 3. Il modélise la façon dont le contraste se lit réellement à une taille et une graisse données, ce que WCAG 2 ne fait pas, mais c'est un brouillon et rien n'est mesuré à son aune aujourd'hui. Le placer à égalité avec les verdicts WCAG les trahirait tous les deux : il est donc derrière un dépliant et dit ce qu'il est.
Quelle est la fidélité de la simulation du daltonisme ?
C'est la projection de Vienot, Brettel et Mollon, appliquée en lumière linéaire, la manière habituelle de modéliser la dichromatie. Elle montre ce qu'une PAIRE de couleurs perd, et c'est la question qui compte : deux éléments restent-ils distinguables. C'est un modèle d'une forme de la condition, pas une photographie de ce que voit une personne donnée, et le panneau le dit.
Puis-je coller l'échelle générée dans la configuration de mon framework ?
Oui : l'export contient une forme qui se glisse là où un framework utilitaire attend une échelle de couleurs, à côté des propriétés personnalisées CSS, des variables SCSS et du JSON. La gamme appartient à cet outil, construite en OKLCH à partir de la couleur que vous avez donnée ; ce n'est la palette d'aucun framework et elle n'est pas présentée comme telle.
Créez un meilleur web, plus vite.
Nous développons des logiciels et des solutions sur mesure adaptés à vos besoins.




