Bonne couleur de premier plan du texte pour une couleur d'arrière-plan donnée
Je dessine un bouton de sélection de couleur et je recherche une formule simple et agréable pour obtenir une bonne couleur de texte (premier plan) pour une couleur d'arrière-plan donnée en RVB.
Un simple essai serait de simplement prendre la couleur du complément, mais cela produira un bouton d'aspect étrange pour des couleurs comme le bleu pur ou le rouge pur.
Y a-t-il quelque chose de bien connu qui fait cela?
Si cela importe, j'utilise QT.
Pour une lisibilité maximale, vous souhaitez un contraste de luminosité maximal sans entrer dans des teintes qui ne fonctionnent pas ensemble. La façon la plus cohérente de le faire est de s'en tenir à noir ou blanc pour la couleur du texte. Vous pourriez être en mesure de proposer des schémas plus esthétiques, mais aucun d'entre eux ne sera plus lisible.
Pour choisir entre le noir ou le blanc, vous devez connaître la luminosité de l'arrière-plan. Cela devient un peu plus compliqué, en raison de deux facteurs:
La luminosité perçue des primaires primaires rouge, vert et bleu n'est pas identique. Le conseil le plus rapide que je puisse donner est d'utiliser la formule traditionnelle pour convertir le RVB en gris - R * 0,299 + G * 0,587 + B * 0,114. Il existe de nombreuses autres formules.
La courbe gamma appliquée aux écrans rend la valeur du gris moyen plus élevée que ce à quoi vous vous attendez. Ceci est facilement résolu en utilisant 186 comme valeur intermédiaire plutôt que 128. Tout ce qui est inférieur à 186 doit utiliser du texte blanc, tout ce qui est supérieur à 186 doit utiliser du texte noir.
Je ne suis pas un expert en programmation de choses liées au RVB, mais du point de vue d'un concepteur, souvent la couleur la plus lisible sera juste beaucoup plus claire (si la couleur d'arrière-plan est sombre) ou plus sombre (si la couleur d'arrière-plan est claire) de la même nuance.
Fondamentalement, vous prendriez vos valeurs RVB et si elles sont plus proches de 0 (sombre), vous les pousseriez chacune vers le haut d'une quantité égale pour votre couleur de premier plan, ou vice versa s'il s'agit d'un BG clair.
Les couleurs des compléments peuvent en fait être très douloureuses pour les yeux pour la lisibilité.
Tirez parti d'un plan pour la lisibilité
Si par "bonne couleur de texte (premier plan)" vous le souhaitez à des fins lisibilité lorsque l'utilisateur choisit any background colour, vous pouvez toujours produire du texte blanc avec un contour noir. Il sera lisible sur tout fond uni, à motifs ou dégradé, du noir au blanc et tout ce qui se trouve entre les deux.
Même si cela ne correspond pas à votre intention, je pense que cela vaut la peine d'être publié ici parce que je suis venu à la recherche de solutions similaires.
S'appuyant sur la réponse de Mark, voici du code Ruby qui fera 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"
Vous êtes mieux avec une différence de luminosité élevée. En général, les arrière-plans colorés avec du texte coloré craignent pour la lisibilité, blessant les yeux avec le temps. Les couleurs légèrement teintées (par exemple en HSB, S ~ 10%, B> 90%) avec du texte noir fonctionnent très bien, ou du texte légèrement teinté sur un fond noir. Je resterais loin de colorer les deux. Un texte sombre (b ~ 30%, s> 50%) avec une coloration subtile sur un fond blanc peut également être fin. Le texte jaune (ambre) sur fond bleu foncé a une excellente lisibilité, tout comme l'ambre ou le vert sur le noir. C'est pourquoi les anciens dumbterms (vt100, vt52, etc.) ont opté pour ces couleurs.
Si vous avez vraiment besoin de faire de la couleur sur la couleur pour le `` look '', vous pouvez inverser H et B, tout en épinglant la saturation à un niveau modéré à faible.
Et une dernière remarque: si vous avez un fond gris à 50%, repensez votre interface. Vous vous privez de la moitié de votre plage dynamique! Vous aliénez les utilisateurs à faible visibilité, y compris les personnes de plus de 35 ans ...
Les combinaisons de couleurs sont souvent terribles lorsqu'elles ne sont pas soigneusement choisies. Pourquoi ne pas utiliser le blanc ou le noir pour le texte, selon la luminosité de la couleur. (Il faudra d'abord convertir en HSB.)
Ou laissez l'utilisateur choisir un texte en noir ou blanc.
Ou utilisez des combinaisons prédéfinies. C'est ce que Google fait dans son produit de calendrier.
Je cherchais une réponse simailr et suis tombé sur ce post et quelques autres que je pensais partager. Selon http://juicystudio.com/services/luminositycontrastratio.php#specify le "Critère de réussite 1.4.3 de WCAG 2.0 nécessite la présentation visuelle du texte et les images de texte ont un rapport de contraste d'au moins au moins 4,5: 1 "à quelques exceptions près. Ce site vous permet de mettre en avant-plan et en arrière-plan les couleurs pour calculer leur contraste, mais il serait utile de suggérer des alternatives ou des plages.
L'un des meilleurs sites que j'ai trouvés pour visualiser le contraste des couleurs est http://colorizer.org/ Il vous permet d'ajuster presque toutes sortes d'échelles de couleurs (RVB, CMJN, etc.) en même temps puis affiche le résultat à l'écran, tel qu'un texte blanc sur fond jaune.
Je regarde généralement 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, retournez la teinte de 180 degrés pour un calcul décent