TeaFun Appuyez sur / pour rechercher
Collection
Vérifiez les ratios de contraste pour la conformité WCAG, simulez le daltonisme et calculez les rapports d'aspect — des aides au design gratuites qui fonctionnent entièrement dans votre navigateur.
3 outils dans cette catégorie
← AccueilDes visuels accessibles et bien proportionnés commencent par les bons chiffres. Cette collection réunit les outils TeaFun que designers, développeurs et créateurs de contenu utilisent pour vérifier l'accessibilité des couleurs, simuler des conditions visuelles et figer les bonnes proportions.
Trois outils pour bien régler les chiffres derrière un design : un vérificateur de contraste WCAG, un simulateur de daltonisme et un calculateur de rapport d'aspect. Le vérificateur prend une couleur de premier plan et une couleur de fond et indique le ratio par rapport aux seuils WCAG AA et AAA, pour savoir si le texte sera lisible plutôt que de le deviner. Le simulateur de daltonisme approche l'apparence d'une palette pour les personnes ayant les formes courantes de déficience de la vision des couleurs. Le calculateur de rapport d'aspect garde les proportions justes lors d'un redimensionnement ou d'un recadrage. Ce sont de petits utilitaires ciblés — le genre de contrôle qu'on fait vers la fin d'un design, pas la toile sur laquelle on le crée.
Utilisez le vérificateur de contraste dès qu'un texte repose sur un fond coloré ou une image : saisissez les deux couleurs et confirmez que le ratio atteint au moins 4,5:1 pour le texte normal, ou 3:1 pour le texte grand ou gras. Passez le simulateur de daltonisme sur tout ce où la couleur porte du sens — un graphique, un jeu de badges d'état, un état d'erreur de formulaire — et assurez-vous que l'information subsiste sans la couleur, car une part notable des utilisateurs a une forme de déficience de la vision des couleurs. Recourez au calculateur de rapport d'aspect quand vous devez redimensionner sans déformer : saisissez une dimension et le rapport visé, et il vous donne l'autre.
L'accessibilité et la proportion sont faciles à mal juger à l'œil. Une association de couleurs qui paraît correcte sur votre écran calibré peut échouer au contraste sur un téléphone en plein soleil, et une palette nette pour vous peut s'effondrer pour un utilisateur daltonien si la couleur est le seul repère. Les ratios WCAG existent précisément parce que le jugement humain du contraste n'est pas fiable. La proportion compte aussi : une image mal recadrée ou une vidéo étirée, c'est le genre de petit défaut que les gens remarquent sans savoir le nommer. Aucun de ces outils ne conçoit à votre place — ils attrapent les erreurs mesurables qu'un bon œil peut encore manquer, pour que le travail tienne au-delà de votre propre écran.
Vérifiez les ratios de contraste, la conformité AA/AAA, générez des variantes de palette et exportez des jetons de couleur CSS ou Tailwind v4 localement.
Testez votre vision des couleurs à l'aide de planches de type Ishihara spécialement conçues pour les gamers.
Calculez les formats d'image instantanement. Convertissez des dimensions, resolvez les cotes manquants et consultez les tailles d'images pour reseaux sociaux 2025/2026.
Le texte normal exige un ratio de 4,5:1 ; le grand texte (18pt et plus, ou 14pt en gras) exige 3:1. Le vérificateur de contraste WCAG affiche les deux seuils et votre statut réussi ou échoué instantanément.
Il applique des matrices de daltonisation standard aux couleurs d'entrée pour approcher leur apparence selon différents types de déficience de la vision des couleurs — le tout calculé en local dans votre navigateur.
Non. Comme certains utilisateurs ne distinguent pas certaines couleurs, associez chaque repère coloré à un second signal — une étiquette, une icône, un motif ou du texte. Le simulateur vous aide à vérifier si votre sens subsiste quand la couleur, elle, disparaît.
Recadrer ou redimensionner avec un mauvais rapport déforme le contenu ou impose des bandes noires. Verrouiller un rapport standard comme 16:9 ou 1:1 garde tout en proportion et prévisible partout où ce sera affiché.