Ich versuche, eine vorhandene Website zu verbessern. Ich beginne damit:
<body style='
background-color: rgb(50,101,152);
color: red;
text-decoration-color: red;
text-decoration-style: solid;
font-size: 12px;
font-weight: 700;
font-family: "Bitstream Vera Sans", Verdana, Lucida, Arial, Helvetica, sans-serif;
//text-shadow: 0px 0px 15px white;
'>
This is hard to read!
</body>
Ich finde, dass diese Farbkombination schwer zu lesen ist. Andere sind anderer Meinung, aber wir sind uns einig, dass dies stark von Kontrast, Helligkeit und anderen Anzeigeeigenschaften abhängt (sogar vom Betrachtungswinkel):
Ich habe schon ziemlich viel experimentiert -webkit-text-stroke, text-shadow(siehe oben stehenden Code), aber als ich die Dinge auf einem Display zu verbessern, wird es auf einem anderen schlechter.
Was kann ich sonst noch versuchen, um dies auf einer Vielzahl von Displays besser lesbar zu machen, während das allgemeine Farbschema beibehalten wird?
Antworten:
Ändern Sie die Meinung des Kunden.
Es gibt nichts, was die Tatsache verbessern könnte, dass roter Text auf blauem Hintergrund für die Lesbarkeit eine äußerst schlechte Wahl ist, da der Kontrast zu gering ist und speziell Rot und Blau als Kontrastfarben schlecht wirken.
Diese Website webaim.org zeigt, dass der Kontrast zwischen Ihren beiden Farben kläglich 1,52: 1 ist
Kontrast ist wichtig für die Lesbarkeit
Textkontrast ist einer der wichtigsten Aspekte der Lesbarkeit von Texten. Glücklicherweise befassen sich die Web Content Accessibility Guidelines (WCAG) 2.0 speziell mit dem Kontrast von Texten und enthalten Richtlinien, die zwar darauf abzielen, Menschen mit Behinderungen den Zugang zum Internet zu ermöglichen, aber auch allgemein fundierte Ratschläge geben.
Die Website Ihrer Kunden steht also im direkten Widerspruch zu den veröffentlichten professionellen Richtlinien . Es steht auch im Widerspruch zum ästhetischen Geschmack (meiner beruflichen Meinung nach)
Sie können weiterhin Elemente in Rot und Blau in einem Entwurf verwenden, wenn dies erforderlich ist. Wenn Sie jedoch roten Text in Inhaltsgröße über einen blauen Hintergrund legen, wird ein großer Prozentsatz der Besucher Ihrer Website abgelehnt. Meiner Meinung nach haben Sie die professionelle Verantwortung, Ihren Kunden davon zu überzeugen, es nicht zu verwenden.
Hoffentlich helfen die bereitgestellten Links dabei, Ihren Fall robuster zu machen, als nur zu argumentieren, dass Sie es schwer finden, ihn zu lesen. Es ist in der Tat nachweislich schwer zu lesen.
Chromostereopsis
Wenn das nicht überzeugend genug war, probieren Sie es aus - Chromostereopsis ist (kurz!) Eine optische Täuschung, die beim Betrachter Tiefenschärfeprobleme verursacht. Es ist unangenehm!
quelle
Obwohl es keineswegs perfekt (oder sogar gut) ist, kann das Hinzufügen eines weißen (oder anderen) Umrisses zum Text die Lesbarkeit verbessern:
Dies kann nützlich sein, wenn Ihr Kunde darauf besteht, die Farben beizubehalten.
quelle
Das kannst du nicht. Diese Rottöne und Blautöne sind beide dunkle, gesättigte Farben, sie vibrieren praktisch gegeneinander und dieser Text lässt die Augen der Menschen bluten. Jeder Entwickler oder Designer, dem die Lesbarkeit von Texten egal ist, sollte mit einer Rubinschiene aus der Stadt gefahren werden.
Versuchen Sie, das Rot VIEL leichter zu machen. Es wird rosa aussehen, aber es wird besser lesbar sein. Oder verwenden Sie Weiß oder Hellgelb auf diesem Hintergrund. Dunkle Hintergründe sind notorisch schlecht lesbar. Sie können die gleiche allgemeine Farbe haben - ein grünliches Blau - aber es viel heller machen. Aber leuchtend roter Text ist auch nie leicht zu lesen, deshalb würde ich dieses Farbschema für Text weglassen.
quelle
Wenn Sie bereits Text Shadow ausprobiert haben, besteht meiner Meinung nach die einzige Möglichkeit, die gleichen Farben beizubehalten, darin, eine Textspanne zu erstellen
Stile
quelle
Wie bereits erwähnt, ist das ein schrecklicher Farbkontrast. Es ist auch eine schlechte Palette für farbenblinde Menschen (bei rot-blauer Farbenblindheit sinkt das Kontrastverhältnis auf ungefähr 1: 1, was völlig unlesbar ist).
Ihre beste Wette ist es, den Kunden davon zu überzeugen, dass er farbigen Text und Hintergründe nicht mischen sollte. Färben Sie entweder den Text oder den Hintergrund, nicht beide. Laden Sie ein Mock-up in ein Tool, mit dem Sie farbenblinde Wahrnehmungen simulieren können (Sie können online ein paar anständige Optionen finden), und zeigen Sie dem Kunden das Ergebnis, das wesentlich zur Überzeugung beitragen sollte.
Wenn dies keine Option ist, können Sie auch versuchen, die Lesbarkeit zu verbessern (beachten Sie, dass keine dieser Optionen das Problem der Farbenblindheit behebt, sondern nur den Kontrast oder die allgemeine Lesbarkeit verbessert):
text-shadow: 2px 2px 4px black;wahrscheinlich ein anständiger Startplatz.rgb(255,0,0). Ich würde es zuerst mit so etwas versuchenrgb(255,204,204)(oder vielleicht sogar leichter) und von dort aus anpassen.rgb(25,51,77)ungefähr dem gleichen Farbton, sollte jedoch dunkel genug sein, um den Text besser lesbar zu machen.Eine weitere Option, die einigen beim Problem der Farbenblindheit hilft:
rgb(82,102,122)) als Ausgangspunkt.quelle
Das Kontrastverhältnis zwischen Hintergrund und Text (Objekt im Vordergrund) muss hoch genug sein, um lesbar zu sein, mit einem minimalen Kontrastverhältnis von 4,5: 1. https://www.oss-usa.com/color-check-ada-image-compliance zeigt, dass Ihr Hintergrund und Vordergrund zu nah beieinander liegen, um lesbar zu sein.
Manchmal muss dem Kunden mitgeteilt werden, dass das Farbschema nicht vollständig beibehalten werden kann und überarbeitet werden muss, um die Lesbarkeitsanforderungen zu erfüllen. Das Umkehren des Texts in eine helle Farbe würde offensichtlich den ausreichenden Kontrast gegen einen dunklen Hintergrund ergeben.
quelle
"Wie können Sie den Text lesbarer machen?" Kurz gesagt, das tust du nicht! Die Farbkombination entspricht nicht den Richtlinien für Barrierefreiheit und sollte nicht verwendet werden. Es sollte eine andere Vordergrund- oder Hintergrundfarbe verwendet werden. Unabhängig davon, wer Ihre angenommene Zielgruppe ist, sollten Sie immer darauf abzielen, Menschen mit Sehbehinderungen gerecht zu werden, und dies ist eine einfache Lösung.
Die Kontrastverhältnisse für Ihre Farbkombinationen finden Sie hier ... https://snook.ca/technical/colour_contrast/colour.html#fg=FF0000,bg=326598
quelle
(Nicht genug Punkte, um zu kommentieren)
Sie können versuchen, dem Text einen Strich hinzuzufügen. Ich verwende den Begriff „Strich“ im Photoshop-Sinne, im Grunde genommen die Farbe des Randes / Umrisses des Texts, der als Kontrast dient. Schwarz / Weiß sollte in Ordnung sein (besonders wenn Sie mit der Strichstärke spielen), aber ich stelle mir vor, dass bestimmte Rot- / Blautöne auch funktionieren könnten.
quelle