81 votes

Bon texte couleur de premier plan pour un fond d'une couleur donnée

Je suis le dessin d'un bouton de sélection des couleurs et je suis à la recherche d'une belle et simple formule pour obtenir une bonne couleur du texte (au premier plan) pour une couleur d'arrière-plan en mode RVB.

Un simple essayer serait de prendre le complément de la couleur, mais cela va produire un étrange bouton de couleurs comme le bleu pur ou un rouge pur.
Il y a une chose bien connue qui fait cela?

Si c'est important à tous, je suis en utilisant QT.

145voto

Mark Ransom Points 132545

Pour un maximum de lisibilité, vous souhaitez le maximum de la luminosité, du contraste, sans entrer dans des teintes qui ne travaillent pas ensemble. La manière la plus cohérente pour ce 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.

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

  • La perception de la luminosité de l'individu couleurs primaires rouge, vert, et bleu ne sont pas identiques. Le moyen le plus rapide conseil que je puisse vous 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 gamma appliquée à l'affiche fait au moyen de la valeur de gris plus élevé que ce que vous attendez. Ceci est facilement résolu en utilisant 186 que la valeur du milieu plutôt que de 128. Rien de moins que 186 doit utiliser un texte blanc, quelque chose de plus grand que 186 doit utiliser le texte en noir.

11voto

Gabriel Hurley Points 17079

Je ne suis pas expert sur la programmation de choses liées à la RGB, mais à partir d'un designer point de vue, souvent les plus lisible couleur sera juste un beaucoup plus léger (si la couleur d'arrière-plan est sombre) ou plus sombre (si la couleur de fond est la lumière) version de la même teinte.

Fondamentalement, vous souhaitez prendre vos valeurs RVB et si ils sont proches de 0 (noir) tu ferais pousser chacun par une quantité égale de votre couleur de premier plan, ou vice versa, si c'est un peu de BG.

Compléter les couleurs peuvent effectivement être vraiment douloureux sur les yeux pour des raisons de lisibilité.

9voto

John K Points 13695

L'effet de levier d'un contour pour la lisibilité

Si par "bien la couleur du texte (au premier plan)" vous avez l'intention pour la lisibilité des fins 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 solide, à motifs ou à l'arrière-plan en dégradé, du noir au blanc et rien entre les deux.

enter image description here

Même si ce n'est pas de frapper la marque de votre intention, je pense qu'il vaut la peine posté ici parce que je suis venu à la recherche pour des solutions similaires.

3voto

Alex Feinman Points 2678

Vous êtes mieux avec une grande différence de luminosité. En général, les fonds de couleur avec la couleur du texte sucer pour des raisons de lisibilité, avoir mal aux yeux au fil du temps. Légèrement teintée de couleurs (par exemple, en TSL, S~10%, B>90%) avec texte en noir, beau travail, ou légèrement teintée de texte sur un fond noir. Je préfère rester loin de la coloration des deux. Texte sombre (b~30%, s>50%) avec une subtile coloration sur un fond blanc peut également être fine. Jaune (ambre) texte sur un arrière-plan bleu profond a d'excellentes raisons de lisibilité, tout comme orange ou vert sur noir. C'est pourquoi la vieille dumbterms (vt100, vt52, etc.) est allé pour ces couleurs.

Si vous avez vraiment besoin de faire de la couleur sur couleur pour le "look", vous pouvez inverser les deux H et B, tout en plaquant la saturation modérée à faible niveau.

Et une dernière remarque: si vous avez 50% de gris fond, de repenser votre interface. Vous vous privez de la moitié de votre gamme dynamique! Vous êtes aliéner la visibilité est faible, les utilisateurs, y compris toute personne de plus de 35...

2voto

Larry K Points 16266

Combinaisons de couleurs souvent l'air terrible quand ils ne sont pas soigneusement choisi. Pourquoi ne pas l'utiliser soit en blanc ou en noir pour le texte, en fonction de la Luminosité de la couleur. (Il faut convertir en TSL en premier.)

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

Ou de l'utilisation de pré-définies combinaisons. C'est ce que Google ne dans leur calendrier de produit.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X