Vérificateur de contraste gratuit : tester la lisibilité de ses couleurs et de son logo
« Le noir et blanc, c'est le contraste. » Je l'ai écrit en me présentant, et c'est toujours ce qui guide mon regard derrière l'appareil. Quand le studio a eu besoin de sa propre charte graphique, cette exigence est passée de la photo au graphisme. Le premier outil du studio est né comme ça : un vérificateur de contraste gratuit, qui vous dit en une seconde si un texte ou un logo reste lisible sur son fond.
Le contraste, une affaire de photographe avant d'être une règle
En noir et blanc, aucune couleur ne vient sauver une image. Il reste la lumière, les formes et l'écart entre le clair et le sombre. Dans « Place de la Victoire », ma photo préférée, un passant traverse le cadre à contre-jour : il devient une silhouette noire contre un ciel blanc. Toute l'image tient sur ce contraste.
Un texte fonctionne de la même façon. S'il ne se détache pas assez de son fond, l'œil fatigue, puis décroche. Sur un téléphone en plein soleil, avec une vue qui baisse ou un écran mal réglé, une couleur « juste un peu claire » devient vite illisible.
Mi-septembre 2026, la charte graphique du studio a été mise en ligne avec une page entière consacrée à ce sujet : les duos de couleurs validés, et ceux qui sont interdits. Pour l'écrire, il fallait mesurer chaque couple de teintes. Le vérificateur de contraste est arrivé dans la foulée, d'abord pour mon propre travail de graphiste, puis pour tout le monde.
Ce que fait le vérificateur de contraste
Vous saisissez la couleur du texte et celle du fond, en code HEX ou avec le nuancier, et l'outil calcule leur ratio de contraste. Le résultat se place sur une échelle qui va de 1 à 21, avec un verdict en toutes lettres. Dessous, deux aperçus montrent le duo en situation, un paragraphe pour le texte courant et un titre pour les grands caractères. Chacun indique si les niveaux AA et AAA sont atteints.
Quand ça ne passe pas, l'outil propose une correction
Le cas le plus parlant, c'est celui du studio lui-même. Son orange, #FF681F, est la couleur du soleil de son logo. Posé en texte sur le fond crème, il tombe à 2,45:1 : illisible en texte courant, et même en titre. Le vérificateur ne se contente pas de dire non. Il garde le fond et propose une version du texte qui atteint 4,5:1, ici #C03F00, un orange brûlé. Un clic sur « Appliquer », et le duo passe.
Dans la charte du studio, la règle qui en découle est simple : l'orange sert aux aplats, aux boutons et aux éléments graphiques, avec un brun très foncé posé dessus (6,3:1). Jamais en petit texte sur un fond clair. C'est d'ailleurs pour ça que les boutons de cet article sont orange avec un texte sombre.
Tester un logo sur un fond
Un logo n'est pas un texte comme les autres. Il mélange souvent plusieurs couleurs, et il se pose partout : un site, une vitrine, un emballage, une photo. La seconde partie de l'outil accepte un fichier SVG, PNG, JPG ou WebP jusqu'à 10 Mo, repère jusqu'à trois couleurs dedans et mesure le contraste de chacune avec le fond choisi.
Le verdict rejoint celui de la charte : sur un fond clair, le logo du studio passe en version brun foncé, et l'orange est réservé aux fonds sombres et aux très grands formats décoratifs. Ce jour-là, les chiffres ont tranché avant moi.
Comment le contraste est calculé
Le calcul suit les WCAG (Web Content Accessibility Guidelines), la référence internationale de l'accessibilité numérique publiée par le W3C. Chaque couleur reçoit une luminance relative, de 0 pour le noir à 1 pour le blanc. Le ratio vaut (L1 + 0,05) / (L2 + 0,05), L1 étant la couleur la plus claire. Il va de 1:1, pour deux couleurs identiques, à 21:1, pour du noir sur du blanc.
Un détail qui compte : le résultat est tronqué, jamais arrondi au-dessus. Un duo à 4,49:1 reste un échec, même s'il frôle le seuil.
| Usage | Niveau AA | Niveau AAA |
|---|---|---|
| Texte courant (moins de 24 px) | 4,5:1 | 7:1 |
| Titres (24 px et plus, ou 19 px en gras) | 3:1 | 4,5:1 |
| Icônes, contours de boutons et de champs | 3:1 | Pas de niveau AAA |
| Logos | Aucune exigence WCAG. Le studio vise 3:1, et 4,5:1 quand le logo contient du petit texte. | |
Dans quels métiers il sert
Un contraste se vérifie dans beaucoup de métiers, souvent au dernier moment, quand il est trop tard pour tout refaire.
Graphistes et indépendants
Avant de livrer une palette ou une charte, tester chaque duo évite les mauvaises surprises à l'écran comme à l'impression. Et face à un client attaché à « son » gris clair, un 2,8:1 se discute beaucoup moins qu'une préférence.
Boutiques en ligne
Depuis le 28 juin 2025, l'acte européen sur l'accessibilité (European Accessibility Act) impose des exigences d'accessibilité à de nombreux services numériques, dont le commerce en ligne. Les micro-entreprises qui fournissent des services, moins de 10 personnes et 2 millions d'euros de chiffre d'affaires ou de bilan au plus, en sont exemptées. Même sans obligation, un texte lisible reste un client qui lit jusqu'au bouton d'achat. Pour savoir précisément si votre activité est concernée, renseignez-vous auprès d'un professionnel du droit.
Collectivités et associations
Le secteur public doit respecter le RGAA, le référentiel français d'accessibilité, qui s'appuie sur les WCAG. Les couleurs et les contrastes y ont leur propre thématique. Le papier n'y échappe pas dans les faits : un bulletin municipal se lit souvent à bout de bras, par des lecteurs de tous âges. J'en mets en page, et c'est exactement le genre de document où un gris trop clair fait perdre des lecteurs.
Commerces, restaurants et artisans
Menus, ardoises, vitrines, étiquettes de prix, cartes de visite : le calcul des WCAG est pensé pour les écrans, mais il reste un très bon repère pour l'imprimé. Il ne remplace pas une épreuve papier, surtout sur un support coloré ou brillant, mais il évite les erreurs grossières avant même d'appeler l'imprimeur.
Logos et signalétique
Un logo posé sur une photo, un carton kraft ou un fond de couleur doit rester visible. Tester chaque version sur chaque fond, c'est ce qui permet d'écrire la page « quelle version sur quel fond » d'une charte graphique.
Vos couleurs restent chez vous
Tout se calcule dans votre navigateur. Aucune couleur et aucun fichier ne sont enregistrés ou envoyés au studio. L'outil est gratuit, sans inscription et sans publicité. Si un résultat vous semble faux, le bouton « Signaler un problème » ouvre votre messagerie avec les couleurs testées déjà notées : rien ne part sans votre accord.
Le contraste n'est qu'un critère parmi d'autres. Une information ne doit jamais reposer sur la couleur seule : un lien se souligne, une erreur s'écrit en toutes lettres. C'est aussi pour ça que les liens de cet article sont soulignés.
Questions fréquentes
Quel contraste minimum faut-il pour un texte ?
4,5:1 pour le texte courant au niveau AA, la référence la plus utilisée. Les titres de 24 px et plus, ou de 19 px en gras, peuvent descendre à 3:1. Le niveau renforcé AAA demande 7:1 pour le texte courant.
Un logo doit-il respecter les règles WCAG ?
Non, les logos et les noms de marque en sont exemptés. Le studio vise tout de même 3:1 pour qu'ils restent visibles, et 4,5:1 quand ils contiennent du petit texte.
Pourquoi 4,49:1 est-il un échec ?
Parce que le seuil est un minimum. Le ratio est tronqué, jamais arrondi au-dessus : tant que 4,5:1 n'est pas atteint, le duo ne passe pas.
Mes couleurs ou mon logo sont-ils envoyés quelque part ?
Non. Le fichier est lu par votre navigateur et n'est jamais transmis. Tout le calcul se fait sur votre appareil.
Comment soutenir l'outil ?
S'il vous rend service, vous pouvez soutenir le studio avec un petit montant. Rien ne vous y oblige.
Et maintenant, à vous
Le vérificateur fait partie des outils du studio, avec le générateur de palette de couleurs, le générateur de polices, le générateur de charte graphique et l'Atelier de motifs. J'ai raconté comment la charte du studio est devenue un outil dans l'article sur le générateur de charte graphique. Et si, comme moi, vous aimez les contrastes francs, ils ont aussi leur place au mur : la plupart de mes tirages sont en noir et blanc.
Ouvrir le vérificateur de contraste →Voir les tirages noir et blanc →
Corentin Godefroy Morlet
pour Studio Soleil Orange
