Bon texte avant-plan couleur pour une couleur de fond donnée
je dessine un bouton de sélection de couleur et je suis à la recherche d'une formule simple et agréable pour obtenir une bonne couleur de texte (premier plan) pour une couleur de fond donnée en RGB.
un essai simple serait de prendre juste la couleur de complément, mais cela produira un bouton de recherche étrange pour les couleurs comme le bleu pur ou le rouge pur.
Y a-t-il quelque chose de bien connu qui fait ça?
si c'est important, J'utilise QT.
9 réponses
pour une lisibilité maximale, vous souhaitez un contraste de luminosité maximum sans entrer dans des teintes qui ne fonctionnent pas ensemble. La façon la plus cohérente de le faire est de coller avec noir ou blanc pour la couleur du texte. Vous pourriez être en mesure de venir avec plus esthétique, régimes, mais aucun d'eux ne sera plus lisible.
pour choisir entre le noir ou le blanc, vous devez connaître la luminosité de l'arrière-plan. Ceci obtient un un peu plus compliquée, en raison de deux facteurs:
-
la luminosité perçue des primaires individuelles rouge, vert et bleu ne sont pas identiques. Le Conseil le plus rapide que je puisse donner est d'utiliser la formule traditionnelle pour convertir RGB en gray - R*0.299 + G*0.587 + B*0.114. Il y a beaucoup d'autres formules.
-
la courbe gamma appliquée aux affichages fait que la valeur du gris moyen est plus élevée que vous ne le pensez. C'est facilement résolu en utilisant 186 comme valeur moyenne plutôt que 128. Tout ce qui est inférieur à 186 devrait utiliser du texte blanc, tout ce qui est supérieur à 186 devrait utiliser du texte noir.
Je ne suis pas un expert en programmation de choses liées à RGB, mais du point de vue d'un designer, souvent la couleur la plus lisible sera juste une version beaucoup plus claire (si la couleur de fond est sombre) ou plus sombre (si la couleur de fond est claire) de la même nuance.
fondamentalement, vous prendriez vos valeurs RVB et s'ils sont plus près de 0 (sombre) vous les pousseriez chacun d'une quantité égale pour votre couleur de premier plan, ou vice versa si c'est un bg léger.
Les couleurs de complément peuvent en fait être très douloureux sur les yeux pour la lisibilité.
effet de levier un contour pour lisibilité
Si par "bonne couleur de texte (au premier plan)" vous avez l'intention pour lisibilité lorsque l'utilisateur choisit any background colour , vous pouvez toujours produire un texte blanc ayant un contour noir. Il sera lisible sur n'importe quel fond solide, modelé ou en pente, du noir au blanc et n'importe quoi entre les deux.
même si cela n'atteint pas la marque de votre intention, je pense qu'il vaut la peine posté ici parce que je suis venu à la recherche de solutions similaires.
en plus de la réponse de Mark, voici un code Ruby qui fera l'affaire.""
rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"
, Vous êtes mieux avec une grande différence de luminosité. En général, les fonds colorés avec du texte coloré craignent pour la lisibilité, blessant les yeux au fil du temps. Les couleurs légèrement teintées (par exemple dans HSB, s~10%, B>90%) avec le texte noir fonctionnent bien, ou le texte légèrement teinté sur un fond noir. Je préfère rester loin de la coloration des deux. Un texte sombre(b ~ 30%, s>50%) avec une coloration subtile sur fond blanc peut aussi être parfait. Le texte jaune (ambre) sur Fond Bleu Foncé est très lisible, car ne orange ou vert sur noir. C'est pourquoi les vieux dumbterms (vt100, vt52, etc.) est allé pour ces couleurs.
si vous avez vraiment besoin de faire couleur sur couleur pour le "look", vous pouvez inverser à la fois H et B, tout en épinglant la saturation à un niveau modéré à faible.
et une dernière remarque: si vous avez un arrière-plan gris à 50%, repensez votre interface. Tu te prives de la moitié de ta gamme dynamique! Vous aliénez les utilisateurs à faible visibilité, y compris ceux de plus de 35 ans...
les combinaisons de couleurs sont souvent affreuses lorsqu'elles ne sont pas choisies avec soin. Pourquoi ne pas utiliser le blanc ou le noir pour le texte, en fonction de la luminosité de la couleur. (Devra se convertir en HSB d'abord.)
ou laissez l'utilisateur choisir le texte en noir ou blanc.
ou utiliser des combinaisons prédéfinies. C'est ce que Google fait dans son calendrier produit.
j'ai été à la recherche d'une réponse simailr et suis tombé sur ce post et quelques autres que je pensais que je partagerais. Selon http://juicystudio.com/services/luminositycontrastratio.php#specify le "critère de succès 1.4.3 du WCAG 2.0 exige une présentation visuelle du texte et des images dont le rapport de contraste est d'au moins 4,5:1", à quelques exceptions près. Ce site vous permet de mettre en premier plan et couleurs de fond pour calculer leur contraste, bien qu'il serait il serait utile de proposer des solutions de rechange ou des fourchettes.
L'un des meilleurs sites que j'ai trouvé pour visualiser le contraste des couleurs est http://colorizer.org / il vous permet d'ajuster presque toutes sortes d'échelles de couleur (RGB, CMYK, etc. en même temps, et vous montre le résultat sur l'écran, telles que du texte blanc sur un fond jaune.
je regarde habituellement les compléments de couleur, ils ont aussi des roues de complément de couleur pour aider
http://www.makart.com/resources/artclass/cwheel.html
si votre couleur est HSL, basculer la teinte de 180 degrés pour un calcul décent
je pense que la conversion en HSV pourrait être la solution, mais changer de teinte IMO serait bizarre. J'essaierais de garder la teinte et de jouer avec la valeur et peut-être la saturation (boutons rouge clair avec texte rouge foncé ... hm sons effrayants :-) ).