Webdesign brauch harte Kontraste Wenn man eine Webseite für Google baut

Kontraste

Webdesign brauch harte Kontraste

Webdesign brauch harte Kontraste, zumindest, wenn man das macht, was Google gerne will. Die harten Kontraste sollen die Zugänglichkeit der Webseiten erhöhen, was im Grunde auch logisch klinkt bzw. scheint.

Hier hat Google sogar einen relativ genauen Schwellenwert (Kontrast Ratio) von ca. 7 % Kontrast, zwischen Hintergrund – und Vordergrundfarbe. Dieser Schwellenwert variiert zur Schriftgröße.

Heißt bei größerer und dickerer Schrift ist ein geringerer Wert des Kontrastes notwendig.

Nehmen wir das Beispiel grauer Hintergrund mit weißer Schrift, vom Gefühl her noch gut lesbar. Grenzwertig aber man kann es Lesen.

Kontraste

Bei diesem Beispiel haben wir einen Kontrast Wert von 2.37 : 1. Fällt demnach bei Google komplett durch.

Kontrast1

Beim zweiten Beispiel sind wir schon bei einem Wert von 3.94 : 1, dieser wert ist nur bei sehr großer Schrift zulässig. Der gefühlte Eindruck ist aber unsere Meinung nach schon sehr gut lesbar.

Kontrast2

Sogar bei diesem Beispiel ist nicht alles in Butter. Bei einem Kontrast Wert von 6.00 : 1 sind nur kurze Texte und große Schriften lesbar.

Kontrast3

Erst jetzt bei einem Wert von 7.00 : 1 geht der Kontrast Wert für Google klar.

Problem ist aber, wie bekommt man diese Werte raus?

Im Google Audits Tool gibt es unter „Accessibility“ den Punkt „Color Contrast“. Hier haben wir einen interessanten Link gefunden. Auf dieser Seite habt Ihr die Möglichkeit die Vorder – und Hintergrundfarbe anzugeben.

Das Tool berechnet dann, ob der Kontrast Wert ausreichend Lesbar ist. Sollte dies nicht der Fall sein könnt Ihr über den Schieberegler die Farben solange nachjustieren bis es passt.

Aufpassen müsst Ihr, nur wenn Ihr „Bunte Farben“ auf Eurer Seite nutzt. Da könnte es passieren das Ihr Euch mit dem Tool die Farben verschlimmbessert. Um aus dieser Zwickmühle zu entkommen, könnt Ihr auch zusammen mit diesem Tool die Seite colorhexa.com aufrufen.

Wenn Ihr hier einen Farbcode eingebt (#595959), zeigt Euch die Seite auch gleich noch Alternativen an.

alternative

Auch Abstufungen in Hellere oder dunklere Farben werden hier direkt mit angezeigt. Dies ist bei bunten Farben, wie hier mit Grün, natürlich sehr günstig, damit man in seinem Farbschema bleibt.

alternative1

Wenn, Ihr nun ein wenig mit den Farben spielt, bekommt Ihr garantiert einen sauberen Kontrast Wert hin.

Kontraste richtig wählen

also nicht einfach die Farben frei wählen und nach dem Gefühl vorgehen, sondern auch Prüfen wie gut es Lesbar ist.

Besonders auch bei der Erstellung von Logo oder Webseiten.

 

Teile uns

Schreibe einen Kommentar

Über WAM

Die WAM - Webagentur-Meerbusch. Die Typo3 und Wordpress Agentur aus Meerbusch bei Düsseldorf in NRW. Ganz nach dem Motto: Wenn man es ins Netz stellen kann, können wir es bauen. Und das schon seit über 10 Jahren.

-
Das Archiv
Werbung
Haendlerbund_Leistungen_265x221_animiert
Datenschutz-Übersicht
logo_wam_gray

Hier können Sie einstellen welche Cookies unsere Webseite auf Ihrem Endgerät speichern „Local Storage“ darf. Diese werden beim nächsten besuch auf unserer Webseite reaktiviert. Diese Einstellungen können Sie jederzeit wieder ändern. Dazu klicken Sie unten Links auf das Zahnradsymbol.

Sie können die Cookies nach dem Besuch unserer Webseite natürlich auch bedenkenlos löschen. Dazu müssen Sie die entsprechenden Einstellungen in Ihrem Browser vornehmen.

Unbedingt notwendige Cookies

Unbedingt notwendige Cookies sollten jederzeit aktiviert sein, damit wir deine Einstellungen für die Cookie-Einstellungen speichern können.

  • pll_language .

Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr

  • reCAPTCHA ist ein CAPTCHA-System,

das es Webhostern ermöglicht, zwischen menschlichen und automatisierten Zugriffen auf Websites zu unterscheiden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten:
KlickpfadSichtbarkeit von Anzeigen messenMausbewegungZeitstempelKlicks auf Anzeigen verfolgenConversion-TrackingIPUhrzeit und Datum verfolgenVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.
Cookies, die in Ihrem Browser gesetzt werden Cookiename Beispielwert Ablaufzeit Typ Domain rc::a MjNxdWs3M2o5ZGt­x Persistent Funktion www.google.com

  • Google Fonts

ist ein Dienst, der es Websites ermöglicht, bestimmte Schriftarten für ihre Gestaltung zu verwenden.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

  • Google Maps

ist ein von Google entwickeltes Web-Mapping-Produkt.

Unternehmen, das die Daten verarbeitet
Google Ireland Ltd
Gordon House, Barrow Street
Dublin 4
IE

Datenschutzerklärung

Kategorien verarbeiteter Daten
Betrugserkennung und -präventionSichtbarkeit von Anzeigen messenZeitstempelIPUhrzeit und Datum verfolgenVerfolgen des BenutzergerätsVerfolgung des BenutzerstandortsBesucherverhaltenUser-AgentSpracheBesuchte WebseiteZeitzone

Rechtsgrundlage für die Datenverarbeitung: Einwilligung (DSGVO 6.1.a)

Datenübertragung außerhalb der EU
Dieser Anbieter kann Ihre personenbezogenen Daten außerhalb des EWR/der EU übertragen, speichern oder verarbeiten. Diese Länder haben möglicherweise nicht das gleiche Datenschutzniveau und die Durchsetzung Ihrer Rechte kann eingeschränkt oder nicht möglich sein.

Drittanbieter-Cookies

Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher der Website zu sammeln.

Betreibergesellschaft der Google-Analytics-Komponente ist die Google Inc., 1600 Amphitheatre Pkwy, Mountain View, CA 94043-1351, USA.

Name des Cookies: _ga
Inhalte: GA1.2.1970440283.1622365906
Ablaufdatum des Cookies : 1 Jahr - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gat_gtag_UA_1602708_1
Inhalte: 1
Ablaufdatum des Cookies : 1 Minute - Nur bei Verbindungen zur gleichen Website

Name des Cookies: _gid
Inhalte: GA1.2.1949554392.1622365906
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Name des Cookies: chimpstatic
Inhalte: E-Mail Adresse bei Newsletter anmeldung
Ablaufdatum des Cookies : 24 Stunden - Nur bei Verbindungen zur gleichen Website

Zusätzliche Cookies

Diese Website verwendet die folgenden zusätzlichen Cookies:

Name des Cookies: pll_language
Cookie zur Verarbeitung eines mehrsprachiges System. Inhalte auf de / en / fr - Ablaufdatum 1 Jahr - Nur bei sicheren Verbindungen zur gleichen Website

Name des Cookies: moove_gdpr_popup
Cookie zur Speicherung der Funktion der Cookieseinstellung - Ablaufdatum 1 Jahr - Nur bei Verbindungen zur gleichen Website