Couleur claire ou sombre

Choisir un libellé noir ou blanc sur un bouton coloré est un problème classique d'accessibilité et de marque : le blanc pur sur un jaune pâle échoue au contraste, et le noir pur sur un bleu marine peut paraître faux lorsque le fond est presque noir. Ce classifieur clair ou sombre prend une couleur hex opaque, calcule une luminosité perçue déterministe avec les coefficients ITU-R BT.601 qui pondèrent le vert plus que le rouge et le bleu, compare cette luminosité à un seuil configurable (par défaut cent vingt-huit sur l'échelle de zéro à deux cent cinquante-cinq) et renvoie si l'échantillon est clair ou sombre plus une couleur de texte superposé recommandée. Les designers qui branchent des jetons de thème, les développeurs qui choisissent la couleur d'icônes sur des badges dynamiques et les tests automatisés qui figent les décisions clair versus sombre ont besoin de la même arithmétique à chaque fois.

Pourquoi la luminosité perçue, et non la moyenne brute des canaux

Une règle naïve de gris moyen qui moyenne le rouge, le vert et le bleu traite le bleu pur et le jaune pur comme également brillants, ce qui ne correspond pas à la façon dont la vision humaine et la plupart des bibliothèques d'interface décident du clair versus sombre.

La luminosité perçue de cette page suit les coefficients de luma de style BT.601 utilisés de longue date en vidéo et dans les outils web : la luminosité vaut zéro virgule deux neuf neuf fois le rouge plus zéro virgule cinq huit sept fois le vert plus zéro virgule un un quatre fois le bleu, chaque canal étant un entier de zéro à deux cent cinquante-cinq. Le vert domine la somme car l'œil y est le plus sensible ; le bleu contribue le moins.

Après le calcul, l'outil compare la luminosité à un seuil. Le seuil par défaut est cent vingt-huit, le milieu de l'échelle huit bits, aligné sur de nombreux helpers isLight open source qui traitent une luminosité supérieure ou égale à cette coupure comme claire. Vous pouvez passer un seuil personnalisé lorsque votre système de design veut classer plus de couleurs comme sombres (augmentez le seuil) ou plus comme claires (abaissez-le).

La classification est inclusive du côté clair : luminosité supérieure ou égale au seuil donne clair, et tout ce qui est strictement en dessous donne sombre. Cette recommandation est un défaut pratique pour badges et puces ; les produits en production qui doivent respecter des ratios de contraste WCAG doivent encore mesurer la paire finale avec un vérificateur de contraste, car le noir sur gris moyen peut passer la classification par luminosité et pourtant échouer AA pour le petit texte.

Cette page répond volontairement à l'intention de recherche couleur claire ou sombre et classifieur hex clair sombre, plutôt qu'au calcul d'un ratio de contraste complet entre deux couleurs.

Conseils pratiques, limites et recherches associées

En écrivant des tests unitaires, couvrez au moins un fond quasi blanc qui doit être clair, un remplissage quasi noir qui doit être sombre, une couleur de marque saturée à mi-teinte près du seuil par défaut, un raccourci à trois chiffres, un seuil personnalisé qui inverse une couleur limite, et un hex invalide volontaire pour que les régressions de validation ne passent pas.

Souvenez-vous que ce classifieur répond clair versus sombre pour un seul échantillon ; il ne calcule pas le contraste WCAG entre premier plan et arrière-plan, ne renvoie pas la luminance relative sur une échelle sRGB linéarisée de zéro à un comme score principal (il rapporte la luminosité de canal BT.601) et n'ajuste ni pour l'alpha ni pour la taille du texte. Ne passez pas de formes alpha comme #RRGGBBAA — cette page ne classe que l'hex opaque.

Les noms CSS et les chaînes rgb() doivent d'abord être résolus en hex, puis passés ici, afin que la surface de validation reste une seule chaîne de couleur bien spécifiée. Cette page vise les recherches couleur claire ou sombre, vérificateur hex clair sombre, luminosité perçue pour texte superposé, ou classer hex clair sombre gratuitement en ligne ; ce n'est pas un générateur de palette complet, ni un mélangeur d'assombrissement ou d'éclaircissement, ni un convertisseur multi-espaces.

Préférez cette capacité lorsque vous avez déjà un jeton hex et n'avez besoin que d'une étiquette déterministe clair ou sombre plus une recommandation par défaut de superposition noire ou blanche ; si votre pipeline a besoin de ratios de contraste ou d'indicateurs AA entre deux couleurs, utilisez un vérificateur de contraste dédié après avoir choisi des candidats.