Monochromer Text auf farbigem Hintergrund. Schwarz oder Weiß für Text? -> Algorithmus



  • Hallo zusammen,

    ich habe hier Texte, die ich auf farbigem Untergrund platzieren muss. Der Untergrund hat durchgehend die gleiche Farbe. Die Farbe ist mir nur zur Laufzeit bekannt. Der Text darf weiß oder schwarz sein.
    Die Frage ist jetzt: Wie entscheide ich, ob eine Hintergrundfarbe zu dunkel ist um auf ihr schwarzen Text zu platzieren?
    Habe das hier gefunden: http://www.bennadel.com/blog/902-Selecting-Contrasting-Text-Color-Based-On-Background-Color.htm
    Aber das genügt meinen Kriterien nicht 😉
    Ich denke, es gibt einen Algorithmus der normalerweise für so etwas verwendet wird und auf mehr als Trial & Error basiert...



  • Wie wärs mit:
    - Farbe in HSL umrechnen
    - Anhand des Farbtons und der Sättigung einen bestimmten Schwellwert für die Helligkeit bestimmen. Da könnte man sich ne Tabelle machen, ich denke eindeutige Kriterien gibt es hier nicht, außer dass grün, gelb, rot als eher hell, blau, violett eher als dunkel wahrgenommen werden.
    Oder man bestimmt nach der Formel, die sicher irgendwo im Netz rumfährt, den wahrgenommenen Grauwert (R, G und B werden unterschiedlich gewichtet addiert) und nimmt dafür einen festen Schwellwert. Nicht so genau, kommt aber wenn man keine besonderen Ansprüche stellt aufs selbe an.
    Ansonsten gilt: alles was mit Farbe zu tun hat ist subjektiv.



  • hm, wenn es keinen Standard-Algorithmus gibt, dann nehm ich den von dem Link mit etwas anderen Schwellwerten. Dann reicht mir das schon...



  • ich behaupte jetzt einfach mal, dass es völlig ausreicht, das produkt von sättigung und helligkeit der hintergrundfarbe herzunehmen (in HSB umrechnen) und als textfarbe schwarz zu wählen, wenn sie über dem mittelwert liegt, sonst weiss.



  • denke nicht, dass man da alles einfach ausrechnen kann. Es gibt einfach Farben da sieht schwarzer Text besser aus und bei anderen weißer. Vielleicht mal Designer oder Grafiker fragen.



  • wenn es wirklich nur schwarz oder weiss ist, dann kannst du einfach die helligkeit vom hintergrund ausrechnen und pruefen ob der eher hell oder dunkel ist und entsprechend das gegenteil als farbe fuer den font nehmen.

    besser waere, wenn es moeglich ist, den text einmal mit der einen farbe rendern und dann etwas duenner mit der anderen, so bekommst du einen kontrastreichen rahmen um den text, das sollte dann immer gut lesbar sein.



  • Danke für eure Vorschlage. Der Ansatz von dem Link oben reicht glücklicherweise für mein Einsatzgebiet völlig aus.



  • hab grad mal paar varianten ausprobiert und meiner meinung nach bekommt man ziemlich gute ergebnisse, wenn man als grundlage einfach den betrag der differenz der farbintensität (0.299 * R + 0.587 * G + 0.114 * 😎 nimmt. dadurch wird grün entsprechend gewichtet.

    http://img508.imageshack.us/img508/8254/colorsub3.png



  • Verstehe ich nicht ganz. Wie ist deine ganze Formel?



  • f = foreground (weiss/schwarz), b = background

    s = abs( ( 0.299 * fR + 0.587 * fG + 0.114 * fB ) - ( 0.299 * bR + 0.587 * bG + 0.114 * bB ) );
    

    einmal für weiss, einmal für schwarz, größerer betrag gewinnt.



  • danke 👍


Log in to reply