Le texte est-il lisible sur le fond ?

Concepteurs et ingénieurs ont souvent besoin d’un oui ou non face à une question trompeusement simple : cette couleur de texte, à cette taille, est-elle vraiment lisible sur ce fond ? Un ratio de contraste à lui seul ne tranche pas, car les Web Content Accessibility Guidelines traitent le grand corps avec plus d’indulgence que le texte courant. Ce contrôleur prend une couleur hex de texte, une couleur hex de fond et une taille de police, classe l’échantillon en normal ou large selon la règle publiée de dix-huit points ou quatorze points en gras, puis compare le ratio officiel de contraste par luminance relative au minimum du niveau demandé. Le verdict est un booléen nommé legible, plus le ratio, le seuil et la classe d’échelle, afin que vous puissiez montrer l’arithmétique à côté de la réponse.

Comment la lisibilité WCAG est tranchée selon la taille

Les Web Content Accessibility Guidelines ne traitent pas chaque glyphe de la même façon. Un corps à seize pixels a un devoir de contraste plus strict qu’un titre à vingt-quatre pixels, car les formes plus grandes restent lisibles avec un écart de luminance plus faible. Ce contrôleur transforme cette règle en un seul booléen.

Il analyse la couleur du texte et celle du fond comme hex sRGB opaque, linéarise chaque canal de huit bits avec la courbe officielle par morceaux et construit la luminance relative avec les poids 0.2126, 0.7152 et 0.0722. Le ratio de contraste est la luminance plus claire plus 0.05 divisée par la plus foncée plus 0.05.

En parallèle il convertit la taille fournie en points CSS, où un point égale quatre tiers d’un pixel, et classe l’échantillon en large lorsqu’il atteint au moins dix-huit points, ou au moins quatorze points et qu’il est marqué gras. Le grand corps exige un minimum de trois pour un en AA et de quatre virgule cinq pour un en AAA ; le corps normal exige quatre virgule cinq et sept. Le niveau demandé choisit l’un de ces quatre planchers.

Le ratio non arrondi est comparé au plancher pour qu’un 4.50 affiché ne fasse pas passer un 4.499 sous AA. Rien n’est déduit du CSS, de captures ou d’une page en direct : vous nommez la paire et la taille, et vous obtenez un verdict reproductible pour tickets, jetons de design et portes automatisées.

Où un contrôle oui ou non selon la taille gagne sa place

Les équipes produit rencontrent cette question lorsqu’un gris de marque paraît élégant sur une diapositive mais échoue comme corps de seize pixels sur une carte blanche, ou lorsqu’un titre à vingt-quatre pixels passerait AA alors que la même paire échouerait sur une étiquette de formulaire. Les concepteurs collent un hex de jeton, la surface derrière et la taille de l’échelle, puis lisent un seul indicateur legible avant de figer la paire.

Les ingénieurs branchent le contrat sur des contrôles de pull request qui bloquent un jeton de corps lorsque le type régulier de seize pixels passe sous 4.5 pour 1, tout en laissant un titre hero à dix-huit points utiliser le plancher grand texte de 3 pour 1. Les spécialistes qualité et accessibilité joignent le ratio numérique, l’échelle classée et le booléen aux tickets afin que la correction vise la paire et la taille réelles, non une conjecture de capture.

Les équipes marketing vérifient les hex de campagne contre le fond du site à la taille réelle de la légende, non à une taille de titre supposée. Sur cette page le travail s’exécute entièrement dans votre navigateur. Associez ce verdict à un scanner d’accessibilité de page entière lorsque vous devez parcourir le balisage en direct, et à une matrice de ratios de contraste lorsque vous voulez tous les drapeaux AA et AAA des deux échelles à la fois.

Utilisez cette page lorsque l’intention de recherche est précisément de savoir si ce texte, à cette taille, est sûr sur ce fond.