Vérification du contraste des couleurs

Do4U vérifie le contraste de tes couleurs de marque et de ton site web. Tu entres tes couleurs, une par ligne, et tu indiques l'usage de chaque couleur : texte, arrière-plan, accent (par exemple un bouton) ou bordure. Le code calcule le ratio de contraste de chaque paire avec la formule WCAG et affiche les niveaux atteints : AA et AAA pour le texte normal et large, et 3:1 pour les bordures, les icônes et les zones de boutons. Les valeurs ne sont pas arrondies à l'unité supérieure. Pour chaque paire qui échoue, tu obtiens la couleur la plus proche qui passe, une fois plus foncée et une fois plus claire, dans la même teinte. Do4U crée également une palette ajustée et la vérifie à nouveau dans son ensemble. Tu exportes la palette en tant que propriétés CSS personnalisées, variables SCSS ou JSON, et l'exportation se fait dans ton navigateur. Tout s'exécute par code, sans IA, et c'est gratuit.

Essayer maintenant Tarifs

Gratuit et sans compte : Calculateur de ratio de contraste →

À qui cela s'adresse

Pour les designers, les développeurs, les agences et les propriétaires de sites web qui choisissent des couleurs de marque ou créent un guide de style et qui veulent des textes et des boutons lisibles par tous.

Utilisations typiques

Vérifie une nouvelle palette de marque avant de commencer le design
Trouve un gris pour le texte secondaire qui passe tout de même le test AA
Vérifie les couleurs des boutons, des liens et des bordures par rapport à l'arrière-plan de la page
Exporte les couleurs ajustées en tant que variables CSS pour ta feuille de style

Exemple

Entrée

#1a1a1a texte #777777 texte Secondaire #ffffff arrière-plan #cccccc bordure

Résultat

#1a1a1a sur #ffffff : 17.4:1, passe AA et AAA #777777 sur #ffffff : 4.47:1, échoue AA pour le texte normal (passe pour le texte large). Plus foncé : #767676 → 4.54:1. Plus clair : impossible #cccccc sur #ffffff : 1.6:1, échoue au contraste non-texte de 3:1. Plus foncé : #949494 → 3.03:1 Exporter (ajusté) : :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Un exemple fixe, raccourci. Les vrais résultats sont générés par l'IA : vérifie-les.

Prix et limites

Prix: gratuit, jusqu'à 30 vérifications par jour
Disponible avec: Gratuit, Avec forfait
Limite d'entrée: Jusqu'à 3 000 caractères par fichier

Confidentialité

Traités sur nos propres serveurs dans l'UE (Pologne). Les entrées et les résultats sont supprimés après 7 jours (Gratuit) ou 30 jours (forfaits), ou immédiatement après que tu as vu le résultat si tu choisis de ne pas les stocker. Les images sont supprimées immédiatement après traitement.

Dans l'API

Nom de l'outil : contrast_check. Crée une tâche avec POST /api/v1/jobs et récupère le résultat avec GET /api/v1/jobs/{id}. Tu trouveras ta clé API dans ton compte.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Documentation API complète →

Questions et réponses

Comment le ratio de contraste est-il calculé ?

Avec la formule WCAG 2.2 : d'abord la luminance relative de chaque couleur, puis (L1 + 0,05) / (L2 + 0,05), où L1 est la couleur la plus claire. Le résultat se situe entre 1:1 et 21:1. Les valeurs sont comparées sans arrondi, donc 4,49:1 n'atteint pas 4,5:1, et l'affichage n'arrondit jamais au supérieur.

Quelles paires sont vérifiées ?

Le texte est vérifié sur chaque arrière-plan et sur les couleurs d'accentuation, par rapport à 4,5:1 et 7:1 pour le texte normal, et 3:1 et 4,5:1 pour le texte large. Les couleurs d'accentuation et de bordure sont vérifiées sur l'arrière-plan par rapport à 3:1 pour le contraste non textuel. Une couleur sans rôle est comparée à toutes les autres couleurs.

Comment les couleurs suggérées sont-elles trouvées ?

Seule la luminosité change, dans l'espace colorimétrique OKLCH ; la teinte reste la même. Do4U cherche la couleur la plus proche qui passe, une fois plus sombre et une fois plus claire, et la vérifie à nouveau sous forme de code hexadécimal. Si aucune couleur ne peut passer sur un arrière-plan, il l'indique.

Est-ce que mon texte est stocké ?

Seulement le temps nécessaire : 7 jours en version gratuite, 30 jours avec un forfait – ou pas du tout si tu choisis de ne pas le stocker. Le traitement s'effectue sur nos propres serveurs dans l'UE (Pologne).

Puis-je utiliser le résultat immédiatement ?

Les résultats sont générés par l'IA. Merci de les lire avant de les publier ou de les envoyer.

Outils associés

Vérification d'accessibilité
Vérifie une page pour détecter les barrières courantes et explique comment les corriger.
Retours de design à partir d'une capture d'écran
Télécharge une capture d'écran d'une page ou d'une appli et obtiens des conclusions concrètes et numérotées sur la taille des boutons, le contraste, le texte dans les images, la hiérarchie et l'espacement, chacune avec un cadre sur l'image. Une évaluation par IA, pas une mesure.
Textes alternatifs
Courtes descriptions d'images pour les lecteurs d'écran et les moteurs de recherche.

Tous les outils →