Was ist das optimale Kontrastverhältnis für beste Lesbarkeit?

Es gibt nicht den einen optimalen Kontrast . Die Lesbarkeit hängt von einer Kombination aus Kontrast, Schriftgröße, Zeilenhöhe, verwendeter Schriftart und den Vorlieben des Publikums ab.

Ausgehend von dieser großartigen Antwort von Multicon zur Auswahl von Farben für den Webdesigntyp:

Während das Auge eines Designers bei Designentscheidungen immer ein Teil der endgültigen Gleichung sein sollte, gibt es Spielraum, sich von Grau zu entfernen.

Kontrast kann in allen Dimensionen erreicht werden: Farbton , Sättigung oder Helligkeit . Der Helligkeitskontrast ist visuell der stärkste , also richten Sie Ihre Entscheidungen hauptsächlich danach aus (dunkler Text auf hellem Hintergrund oder umgekehrt), da er sicherstellt, dass die Schrift unabhängig von Farbton oder Sättigungskontrast lesbar ist (Text mit gleicher Helligkeit, aber unterschiedlichem Farbton oder Sättigungsgrad wird am besten lesbar sein). wahrscheinlich unzureichender Kontrast für ausreichende Lesbarkeit).

Richtlinie

Verwenden Sie zusammengesetzten Kontrast, um die gewünschte Lesbarkeit zu erreichen.

Eine leichte Verringerung des Helligkeitskontrasts kann durch eine Erhöhung des Farbton-/Satt-Kontrasts kompensiert werden. z.B. einen dunkelbraunen Holzhintergrund (30-Grad-Farbton) würde eine helle Schrift erfordern, aber die Helligkeit der Schrift könnte etwas zurückgenommen werden, wenn wir den Farbton auf 210-Grad-Blau setzen, was eine direkte Ergänzung zu einem 30-Grad-braunen Holzhintergrund ist. Der Sat-Kontrast kann stark sein oder man kann die Sättigung nur ganz leicht von Grau wegschieben, gerade genug, um ihm einen leichten Blaustich zu geben. Wie weit wir gehen, zeigt unsere Individualität als Designer.

Der benötigte Kontrast hängt auch von den Schrifteigenschaften ab , dickere Schrift mit höherer x-Höhe benötigt weniger Kontrast um eine ausreichende Lesbarkeit zu erreichen. Monospaced-Typ erfordert auch weniger. Umgekehrt erfordert eine komprimierte Schrift möglicherweise etwas mehr Kontrast als eine normale oder breite.

---

Es gibt auch so etwas wie zu viel Helligkeitskontrast (da Ihr Bereich Web ist), aufgrund der Beschaffenheit von Bildschirmen (emittiertes Licht statt reflektiertes Licht) kann weißer Text auf schwarzem Hintergrund auf einem Monitor mit hoher Helligkeit etwas zu stark aussehen abends. Wenn Sie es etwas zurückziehen und den Kontrast verringern, wird die Lesbarkeit tatsächlich verbessert. Der Punkt ist, dass so viele Regeln wie es gibt, sie als Richtlinien dienen sollten, das Auge eines Designers ist am Ende immer ein Teil der Gleichung.

Gemäß den WCAG2 (Richtlinien für barrierefreie Webinhalte) ist ein Mindestkontrastverhältnis von 4,5:1 für Text unter 18 Pixel und ein Kontrastverhältnis von 3:1 für Text über 18 Pixel erforderlich, um AA zu bestehen. Fettgedruckter Text mit 14 Pixel oder mehr kann das Kontrastverhältnis von 3:1 verwenden. Auch hier können Schriftstärke und Tracking die Lesbarkeit verbessern/verringern, also verwenden Sie dort Ihr bestes Urteilsvermögen.

In der WGAC-Dokumentation wird ausdrücklich erwähnt, dass Farbe/Luminanz aufgrund der Wahrnehmungsvarianz von Benutzern mit Farbsehschwächen nicht zuverlässig ist, um den Kontrast zu manipulieren.

Hier ist ein Sketch-Plugin, das gut funktioniert, außer dass es keinen Kontrast berechnen kann, wenn Hintergründe zusammengesetzt/geschichtet sind (z. B. Farbverläufe über Bildern): https://github.com/getflourish/Sketch-Color-Contrast-Analyser Ich versuche, das zu probieren Bereich mit dem geringsten zu kompensierenden Kontrast.

WCAG2-Kontrastrichtlinien hier: https://github.com/getflourish/Sketch-Color-Contrast-Analyser

Sie sollten sich das Kontrastverhältnis-Tool in der Farbauswahl in Chrom ansehen:

Der Farbwähler zeigt Ihnen jetzt das Kontrastverhältnis von Textelementen an. Durch Erhöhen des Kontrastverhältnisses von Textelementen wird Ihre Website für Benutzer mit Sehbehinderungen oder Farbsehschwächen zugänglicher. Siehe Farbe und Kontrast, um mehr darüber zu erfahren, wie sich das Kontrastverhältnis auf die Barrierefreiheit auswirkt.

https://developers.google.com/web/updates/2018/01/devtools#contrast