23

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?

color website-design color-theory

— bers
quelle

22

Fühlen Sie sich frei, diesen Kommentar Ihrem Kunden zu zeigen. Ich habe langjährige Designerfahrung und kann Ihnen versichern, dass die "anderen" in Ihrer obigen Frage, die dies für lesbar halten, völlig falsch sind :) Das gesamte Schema sollte geändert werden, da es irreparabel ist.

— Mayersdesign

15

Ich habe über 30 Jahre Erfahrung als Designer ... Ich könnte dem obigen Kommentar von @mayersdesign nicht mehr zustimmen. Dieses Farbschema sollte sofort abgelehnt werden.

— Scott

6

Zunächst sollten Sie den Zweck Ihres Farbschemas verstehen. In einem Farbschema für die Benutzeroberfläche ist es sinnvoll, neutrale Farben als Primärfarben zu verwenden. Akzentfarben sollten sparsam eingesetzt werden . Denken Sie zum Beispiel an YouTube. Welche Farbe fällt Ihnen ein? Rot und Schwarz, aber schauen Sie sich die aktuelle YouTube-Webseite an, die zu 98% weiß und hellgrau ist. Rot wird lediglich als Akzent verwendet.

— Happy Hour Coding

Vielen Dank an alle (einschließlich der Antwortenden)! Ich habe SE nur zweimal überprüft, um zu sehen, was ich erwartet hatte, 1 oder 2 Kommentare seit heute Morgen zu sein, und jetzt das. Ich habe viel gelernt und einige überzeugende Argumente erhalten - danke!

— Bers

1

1995 angerufen. Sie wollen ihr Farbschema zurück.

— Mazura

53

Ä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 WCAG-Stufe AA erfordert ein Kontrastverhältnis von mindestens 4,5: 1 für normalen Text und 3: 1 für großen Text und die Stufe AAA erfordert ein Kontrastverhältnis von mindestens 7: 1 für normalen Text und 4,5: 1 für großen Text.

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!

— mayersdesign
quelle

11

Zur Verdeutlichung sind die Kontrastverhältnisse im W3C-Dokument Mindestwerte . Die sagen nicht, dass das Verhältnis zwischen 4,5: 1 oder 7: 1 liegen sollte; Sie sagen, es sollte mindestens eine davon sein, je nachdem, auf welche Ebene der Barrierefreiheit Sie abzielen.

— Adrian McCarthy

1

Sehr guter Punkt, ich habe die Antwort aktualisiert, um mehr Details aufzunehmen, insbesondere diese.

— Mayersdesign

8

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.

— Gremlin
quelle

Um fair zu sein, das funktioniert nur mit 36pt Typ.

— user8356

Ja, tolles Konzept. Nicht als Sarkasmus gemeint. Und je öfter Sie es anwenden, desto besser können wir den Text lesen. Also nimm die weißen Umrisse bis zum Rand des Bildschirms ... Wink, zwinker.

— Martin Zaske

8

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.

— user8356
quelle

6

Wenn Sie bereits Text Shadow ausprobiert haben, besteht meiner Meinung nach die einzige Möglichkeit, die gleichen Farben beizubehalten, darin, eine Textspanne zu erstellen

<div> <span0>This is hard to read!</span></div><br>
<div> <span1>This is hard to read!</span></div><br>
<div> <span2>This is hard to read!</span></div><br>

Stile

span0 {text-shadow: 0px 2px 1px black;
}

span1 {padding:0 4px;
background-color: rgba(255,255,255,0.25);
position:relative;
display:inline-block;
}

span2 {padding:0 4px;
background-color: rgba(0,0,0,0.35);
position:relative;
display:inline-block;
}

— Danielillo
quelle

1

Oder sogar ein hartes schlichtes Weiß ist besser

— sagt aloisdg Reinstate Monica

1

Diese sind für mich immer noch schwer zu lesen.

— Happy Hour Coding

@Dylan was denken Sie über jsfiddle.net/bersbers/xdkj76L3

— Bers

2

Es ist lesbar. Ich halte es nicht für eine gute Idee. Aber es kann gelesen werden.

— Happy Hour Coding

blog.theteamw.com/2009/11/09/…

— yunzen

6

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):

Verwenden Sie eine in einem Abstand angeordnete Schriftart. Klingt dumm, aber das hilft den meisten Menschen tatsächlich dabei, Text leichter zu lesen. Natürlich nicht Courier New, aber Bitstream Vera Sans Mono (oder so ähnlich wie Droid Sans Mono) sollte immer noch anständig aussehen und etwas besser lesbar sein.
Stellen Sie die Schriftgröße und wahrscheinlich auch die Schriftgröße ein. Größerer, kühnerer Text ist unabhängig vom Kontrast besser lesbar.
Tauschen Sie das Farbschema aus (dh Sie erhalten dunkelblauen Text auf einem hellroten Hintergrund). Es hört sich einfach an, aber für die meisten Menschen ist es im Allgemeinen einfacher, Dunkelblau auf Hellrot vorzubereiten, als umgekehrt.
Fügen Sie dem Text einen kontrastreichen, schmalen Schlagschatten mit einem Versatz hinzu. Was Sie hier wollen, ist keine Verschmelzung mit dem Hintergrund, sondern eine harte Kante, die für einen guten Kontrast sorgt. Auch hier kann ein Versatz des Schattens helfen, insbesondere ein einfacher Diagonalversatz. Ich würde auch hier mit Schwarz anstatt mit Weiß arbeiten (Sie möchten den Text betonen, nicht den Hintergrund, also einen hohen Kontrast zum Text erzielen). Insgesamt ist etwas in der Art text-shadow: 2px 2px 4px black;wahrscheinlich ein anständiger Startplatz.
Hellen Sie das Rot deutlich auf. Im Moment verwenden Sie rgb(255,0,0). Ich würde es zuerst mit so etwas versuchen rgb(255,204,204)(oder vielleicht sogar leichter) und von dort aus anpassen.
Verdunkle das Blau. Etwas näheres entspricht 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:

Entsättigen Sie den blauen Hintergrund. Obwohl dies nicht die beste Option ist (das Farbschema wird dadurch etwas verzerrt), sollte dies die Lesbarkeit der anderen aufgelisteten Dinge verbessern, da der Kontrast dadurch aktiv erhöht wird. Ich würde versuchen, ungefähr 30% niedrigere Sättigung (das ist rgb(82,102,122)) als Ausgangspunkt.

— Austin Hemmelgarn
quelle

5

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.

— Max Tokman
quelle

3

"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

— Andrew
quelle

2

(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.

— allthemikeysaretaken
quelle

Wie mache ich diese Farbkombination besser lesbar?

Ändern Sie die Meinung des Kunden.