Comment choisir une couleur de texte lisible sur tout arrière-plan

Commencez par le fond que les utilisateurs verront réellement

Un jeton de couleur n’est qu’une donnée d’entrée. Le fond pertinent est la couleur derrière les glyphes une fois résolus les variables CSS, l’opacité, les superpositions, les dégradés, les images, la fusion et l’état du composant. Une carte déclarée blanche peut se trouver sous une couche translucide et apparaître bleu pâle. Un texte déclaré noir à 70 % d’alpha n’est plus #000000 après composition. Mesurer les déclarations sans résoudre cette chaîne peut fournir une réponse assurée à la mauvaise question.

• Identifiez précisément le composant, l’état, la fenêtre et le thème testés.
• Résolvez la couleur du texte et chaque couche située derrière lui en couleurs rendues effectives.
• Consignez les jetons sources ainsi que le premier plan et le fond effectifs.
• Répétez le test pour le survol, le focus, la sélection, l’état désactivé, l’erreur, le thème sombre et les variantes responsives lorsqu’une couleur change.
• Traitez dégradés, photos, vidéos et surfaces à motifs comme des plages de fonds plutôt que comme une couleur échantillonnée.

Comparez les candidats par rapport, pas par teinte ou intuition

Le rapport de contraste WCAG compare la luminance relative de la couleur rendue la plus claire à celle de la plus sombre. Il va de 1:1 pour des luminances égales à 21:1 pour le noir face au blanc. Les noms de teinte, la luminosité HSL et les impressions personnelles ne remplacent pas ce calcul. Un bleu saturé et un jaune saturé peuvent tous deux avoir une luminosité HSL de 50 % tout en produisant des luminances, donc des choix de texte, radicalement différents.

Pour le texte ordinaire, le critère de succès WCAG 2.2 1.4.3 exige au moins 4.5:1 au niveau AA. Le texte à grande échelle relève d’un seuil de 3:1. Le niveau AAA renforcé utilise 7:1 pour le texte normal et 4.5:1 pour le grand texte. Comparez le rapport non arrondi au nombre requis ; n’arrondissez que l’étiquette affichée. Une valeur montrée comme 4.5:1 peut échouer si sa valeur complète est 4.48:1.

• Choisissez la cible de conformité et la classe de texte avant de comparer les candidats.
• Calculez chaque candidat face au même fond effectif.
• Écartez les candidats sous le seuil applicable au lieu de les classer comme presque acceptables.
• Parmi les candidats conformes, choisissez selon la hiérarchie, le système de marque et la lisibilité en contexte.
• Conservez les mesures avec la décision de conception pour permettre sa révision.

Choix vérifiés du noir et du blanc sur des fonds courants

Noir et blanc sont de bons premiers candidats, car l’un des deux offre toujours un contraste mathématique fort sur un fond sRGB opaque, mais ils ne sont pas interchangeables. Le tableau utilise la formule de luminance relative WCAG 2.2, compare les valeurs en pleine précision et affiche quatre décimales. « Meilleur » désigne le rapport le plus élevé des deux ; cela ne signifie pas que le composant respecte toutes les exigences d’accessibilité.

Ne vous arrêtez pas à un choix automatique noir ou blanc

Un choix binaire constitue une base sûre pour de nombreux échantillons générés, mais un produit impose souvent d’autres contraintes. Le noir pur peut sembler inutilement dur sur une surface de lecture presque blanche ; le blanc pur peut trop accentuer un texte secondaire sur un panneau sombre. La bonne méthode teste les candidats réels du système de conception. Un neutre plus doux n’est acceptable que si son propre rapport mesuré passe la cible : le dériver d’un jeton noir conforme ne prouve rien.

• Dressez la liste des jetons de premier plan autorisés pour les textes principal, secondaire, interactif, inversé et d’état.
• Calculez chaque jeton face au fond résolu au lieu de modifier silencieusement ce fond.
• Filtrez selon le seuil requis, puis préservez la hiérarchie voulue parmi les choix restants.
• Si aucun candidat de marque ne passe, modifiez le premier plan, le fond ou ajoutez une surface contrôlée derrière le texte.
• Évitez les algorithmes qui éclaircissent ou assombrissent sans cesse une couleur de marque jusqu’à franchir un nombre ; le résultat peut sortir de la palette révisée et échouer dans un autre état.

const candidates = ["#17181C", "#4F46E5", "#FFFFFF"];
const threshold = 4.5;

const passing = candidates
  .map((foreground) => ({
    foreground,
    ratio: contrastRatio(foreground, background),
  }))
  .filter(({ ratio }) => ratio >= threshold)
  .sort((a, b) => b.ratio - a.ratio);

// Choose from `passing` by semantic role; do not round before filtering.

Transparence, dégradés et photos exigent un test de plage

Les couleurs alpha doivent être composées avant le calcul de luminance. CSS Color 4 définit la composition alpha simple canal par canal. La couleur effective dépend du premier plan translucide et de ce qui se trouve dessous ; un jeton comme rgb(0 0 0 / 60%) n’a donc pas de rapport unique. L’opacité d’un parent peut modifier le texte et son fond, et plusieurs couches translucides doivent être résolues dans leur ordre de peinture.

• Composez le texte translucide sur le fond effectif, puis comparez la couleur de texte obtenue à ce fond.
• Composez les superpositions et fonds translucides de la couche inférieure vers la supérieure avant de tester le texte.
• Pour un dégradé, testez le rapport minimal sur toute la zone occupée par chaque ligne de texte.
• Pour les photos ou vidéos, échantillonnez du contenu représentatif et défavorable, ou ajoutez un voile opaque ou translucide contrôlé.
• Figez si possible la direction artistique dynamique ; le résultat d’une image principale ne se transfère pas à l’image suivante.

La taille du texte change le seuil, pas les faits rendus

WCAG définit le texte à grande échelle selon la taille et la graisse rendues, et non selon un niveau de titre HTML ou une étiquette d’outil de conception. D’après le critère 1.4.3, le grand texte peut utiliser 3:1 au niveau AA, mais le corps de texte demande normalement 4.5:1. Ne classez pas un texte comme grand simplement parce qu’il est gras, important ou visuellement dominant. Vérifiez la taille de police calculée et la graisse de l’élément réel.

• Utilisez par défaut le seuil du texte ordinaire.
• N’appliquez l’exception de grande échelle qu’après confirmation de la taille et de la graisse rendues.
• Retestez lorsque le CSS responsive réduit la police dans une petite fenêtre.
• Mesurez séparément textes d’espace réservé, d’aide, d’erreur, de badge et de bouton s’ils emploient des jetons différents.
• Rappelez-vous que les commandes inactives, les logos et les textes décoratifs ou accessoires ont des exceptions étroites ; une exception n’est pas un raccourci de conception général.

Le rapport du texte ne certifie pas davantage les icônes, indicateurs de focus, bordures de champs, graphiques ou autres informations visuelles. Le contraste non textuel possède son propre champ et des exigences de 3:1 pour les composants d’interface et objets graphiques couverts. La couleur ne doit pas être le seul moyen de communiquer un sens important. Clavier, sémantique, zoom, redistribution et usage réel restent des contrôles distincts.

Liste reproductible pour choisir le premier plan

• Nommez le composant, la langue, le thème, la fenêtre, l’état et le style de texte précis.
• Résolvez le premier plan final et toutes les couches du fond, notamment l’alpha et les superpositions.
• Classez le contenu et sélectionnez le seuil AA ou AAA applicable.
• Calculez en pleine précision le rapport de chaque candidat autorisé.
• Rejetez les candidats sous le seuil avant d’appliquer les préférences de marque ou de hiérarchie.
• Pour les fonds variables, testez la zone la moins favorable occupée par le texte.
• Vérifiez les états responsifs et interactifs qui changent couleur, taille, graisse ou image.
• Consignez couleurs sources, couleurs effectives, rapport, seuil, résultat et date de révision.
• Poursuivez par le contraste non textuel, les indices autres que la couleur, la sémantique, le clavier, le zoom et la révision humaine.

Cette méthode passe à l’échelle parce que l’étape factuelle est déterministe et la décision de conception reste explicite. Color Atlas affiche les rapports exacts des couleurs du catalogue et conserve les principales références W3C auprès de l’explication. Servez-vous de ces nombres pour éliminer rapidement les candidats en échec, puis examinez le texte retenu dans le véritable composant. Un rapport conforme est une preuve nécessaire pour le critère testé, pas une promesse de certification de la page, du produit ou de l’organisation.