Bon texte couleur de premier plan pour une couleur d'arrière-plan donnée

Question

Je dessine un bouton de sélection des couleurs et je suis à la recherche d'une formule simple et agréable d'obtenir une bonne couleur de texte (premier plan) pour une couleur d'arrière-plan donnée en RVB.

Un essai simple serait de prendre juste la couleur du complément, mais cela produira un bouton recherche étrange pour des couleurs comme le rouge pur bleu ou pur.
Y at-il quelque chose bien connu qui fait cela?

S'il importe du tout, j'utilise QT.

Answer 1

Pour une lisibilité maximale, vous voulez contraste de luminosité maximale sans entrer dans des teintes qui ne travaillent pas ensemble. La façon la plus cohérente pour le faire est de rester avec noir ou blanc pour la couleur du texte. Vous pourriez être en mesure de proposer des systèmes plus esthétiques, mais aucun d'entre eux seront plus lisibles.

Pour choisir entre noir ou blanc, vous avez besoin de connaître la luminosité de l'arrière-plan. Cela devient un peu plus compliquée, en raison de deux facteurs:

• La luminosité perçue du rouge des primaires individuels, vert et bleu ne sont pas identiques. Le plus rapide des conseils que je peux donner est d'utiliser la formule traditionnelle pour convertir RVB en gris - R * 0,299 + G * 0,587 + B * 0,114. Il y a beaucoup d'autres formules.

• La courbe de gamma appliquée à des écrans rend la valeur de gris moyenne supérieure à celle que vous attendez. Ceci est facilement résolu en utilisant 186 comme la valeur moyenne plutôt que 128. Rien de moins que 186 devrait utiliser du texte blanc, quoi que ce soit supérieur à 186 devrait utiliser du texte noir.

Answer 2

Je ne suis pas expert sur les activités de programmation liées à RVB, mais du point de vue d'un concepteur, souvent la couleur la plus lisible sera juste un beaucoup plus léger (si la couleur de fond est sombre) ou plus sombre (si la couleur de fond est clair) version de la même nuance.

Fondamentalement, vous prendriez vos valeurs RVB et si elles sont plus proches de 0 (noir), vous souhaitez les pousser chacun par un montant égal pour votre couleur de premier plan, ou vice-versa si elle est une lumière BG.

couleurs peuvent réellement Complement être très douloureux pour les yeux pour une meilleure lisibilité.

Answer 3

Tirez profit de grandes lignes pour la lisibilité

Si par « bonne couleur de texte (premier plan) » vous destiner à lisibilité des fins lorsque l'utilisateur choisit any background colour, vous pouvez toujours produire du texte blanc ayant un contour noir. Il sera lisible sur tout fond solide, ou à motifs gradient, du noir au blanc et rien entre les deux.

Même si cela ne touche pas la marque de votre intention, je pense qu'il vaut la peine affichée ici parce que je suis venu chercher des solutions similaires.

Answer 4

Bâtiment sur le dessus de la réponse de Marc, voici un code Ruby qui va faire le travail

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"

Answer 5

Vous êtes mieux avec une grande différence de luminosité. En général, les fonds de couleur avec le texte de couleur sucent pour une meilleure lisibilité, blesser les yeux au fil du temps. Légèrement les couleurs teintés (par exemple dans HSB, S ~ 10%, B> 90%) avec le travail du texte noir fin, ou d'un texte légèrement teinté sur un fond noir. Je reste loin de la coloration à la fois. Un texte sombre (b ~ 30%, s> 50%) avec une coloration subtile sur un fond blanc peut aussi bien. Texte jaune (orange) sur un fond bleu profond a une excellente lisibilité, tout comme l'ambre ou vert sur fond noir. Voilà pourquoi vieux dumbterms (VT100, VT52, etc.) se sont pour ces couleurs.

Si vous avez vraiment besoin de faire couleur en couleur pour le « look », vous pouvez inverser les deux H et B, tout en épinglant la saturation à un rythme modéré à faible niveau.

Une dernière remarque: si vous avez un fond gris 50%, repenser votre interface. Vous vous priver de la moitié de votre dynamique! Vous aliénant les utilisateurs à faible visibilité, y compris toute personne de plus de 35 ...

Answer 6

Les combinaisons de couleurs semblent souvent terribles lorsqu'ils ne sont pas choisis avec soin. Pourquoi ne pas utiliser soit blanc ou noir pour le texte, en fonction de la luminosité de la couleur. (Devrez convertir en HSB en premier.)

Ou laisser l'utilisateur choisir soit le texte en noir ou blanc.

Ou utiliser des combinaisons prédéfinies. C'est ce que Google fait dans leur produit calendrier.

Answer 7

J'ai cherché une réponse simailr et suis tombé sur ce poste et quelques autres que je pensais que je partage. Selon http://juicystudio.com/services/luminositycontrastratio.php#specify la " le critère de succès 1.4.3 de WCAG 2.0 nécessite la présentation visuelle du texte et des images de texte a un rapport de contraste d'au moins 4,5: 1" à quelques exceptions près. Ce site vous permet de mettre en couleurs de premier plan et arrière-plan pour calculer leur contraste, bien qu'il serait utile si elle suggère des alternatives ou des plages.

L'un des meilleurs sites que j'ai trouvé pour visualiser le contraste des couleurs est http://colorizer.org/ Il vous permet de régler presque toutes sortes d'échelles de couleurs (RVB, CMJN, etc.) en même temps et vous montre le résultat à l'écran, tel que le texte blanc sur un fond jaune.

Answer 8

Je regarde habituellement à des compléments de couleurs, ils ont aussi des roues de complément de couleur pour aider

http://www.makart.com/resources/artclass/cwheel.html

Si la couleur est HSL, retournez la teinte de 180 degrés pour un calcul décent

Answer 9

chose que je que la conversion à HSV pourrait être le moyen, mais l'OMI changer la teinte regarderait bizarre. Je vais essayer maintenant la teinte et de jongler avec la valeur et peut-être la saturation (boutons rouge clair avec le texte rouge foncé ... hm sons :-) effrayant).