Skip to content

Layouts auf lesbare Farbkombinationen prüfen

  • Screenshot apricotfarbener Hintergrund t-online.de
Durch meinen Linktipp kam onli zu einer Seite, bei der er den empfohlenen Text auf seinem Röhrenmonitor nicht lesen konnte. In einem Kommentar zu seinem Beitrag stellte ich die Theorie auf, dass ein Teil schlecht lesbarer Farbwahl an den neuen Designs liegt, die nahezu ausschließlich aus Hintergrundbildern und nicht mehr wie früher aus angegebenen Farben bestehen. Ich kannte und nutzte lange einige Webseiten und Add-Ons, die überprüften, ob die gewählten Farbkombinationen auch für Menschen mit eingeschränkter Sehfähigkeit noch nutzbar sind. Was ich immernoch bei jedem Layout mache sind zumindest zwei Tests:

Design auf Farbkontraste testen

In einem meiner Browser, die immer teste, habe ich ein recht ungewöhnliches apricot als Hintergrundfarbe eingestellt, damit fällt mir sofort auf, falls ich an einer Stelle vergessen habe, die Hintergrundfarbe zu deaktivieren. Ich nutze den Seamonkey für manches nebenbei, deshalb weiß ich, dass bei weitem nicht alle Webautoren das testen, sehr amüsant finde ich wie schlecht das z.B. bei t-online klappt. Die Kontraste lassen sich z.B. mit dem Firefox Add-On Colour Contrast Analyser testen. Aber eben leider nur die Kontraste der Hintergrundfarben, das gilt nicht für Hintergrundbilder und ist daher kaum noch für ein Design passend. Sinnvoll ist immer auch ein kurzer Test mit vischeck.com dort werden die häufigsten Formen von Farbblindheit simuliert, damit fallen ganz unglückliche Farbkombinationen auf. Sinnvoll ist selbst einen Screenshot zu machen, um zu testen, testet man eine Website direkt, fehlen die Hintergrundbilder und der Eindruck ist verfälscht. Ebenfalls gut ist die Seite von Colorblind Filter dort kann auch noch einiges eingestellt werden.

Website auf Zugänglichkeit testen

Die Accessibility-Toolbar für den Firefox testet vieles, was automatisiert möglich ist, z.B. auch den Farbkontrast auf derselben Grundlage, wie das Farbkontrast-Add-On. Die Toolbar kann jedoch eben nur automatisiert testen, nicht alles was da an Fehlermeldungen oder eben nicht aufgeführt wird, ist tatsächlich relevant. Hier wird beispielsweise ein Fehler angezeigt, weil blogoscoop als Bild eingebunden ist, ohne dieses Bild können jedoch keine Zugriffe gezählt werden, hier nutze ich im Moment ein unsichtbares Bild. Ich bin nicht so begeistert von der Erweiterung, weil sie zwar viele Tests bietet, aber halt nicht "mitdenken" kann. Ein weiterer gemeldeter Fehler für dieses Blog ist, die h1 auf der Startseite sei nicht identisch mit dem title-Attribut. Ja, stimmt und das wird auch so bleiben, denn dieses Blog hat einen title für die Startseite, der etwas ausführlicher ist, als das Logo, welches hier innerhalb der h1 liegt. Manche Erklärung für einen angegebenen Fehler sagt mir keineswegs in für mich verständlicher Form, was das Problem ist. Ich habe schon einiges Wissen zu diesem Thema, sicherlich mehr als viele Webautoren, aber für manchen Hinweis reicht das nicht aus. Aus meiner Sicht sollte eine solche Toolbar jedoch so klare Meldungen bringen, dass auch weniger versierte Webautoren zumindest verstehen was gemeint ist.

Layout ohne Grafiken testen

  • Screenshot miradlo bloggt miradlo bloggt ohne Grafiken
Mit der Webdeveloper-Toolbar, die ich in Firefox und Seamonkey installiert habe, lässt sich eine Website ohne Grafiken anzeigen (für den IE gibt was ähnliches). Das zweite Bild zeigt dieses Blog ohne Grafiken. An diesem Beispiel sieht man, worauf ich achte, wenn ich Bilder für ein Layout einsetze: Die Hintergrundfarben aller Bereiche sind angelehnt an die Farbe der Layoutbilder, die Vorteile:
  • die Optik nicht mehr ganz so schick, aber noch immer sehr ähnlich
  • ganz schlecht lesbare Farbkombinationen fallen auf
  • falls die Seite mal langsam lädt, fällt es kaum auf, weil die Farben eben sehr ähnlich sind
  • wer ganz ohne Grafiken surft bekommt trotzdem noch ein lesbares Design

Fazit der Farbkombinationen

Auch nach nochmaliger Recherche konnte ich nichts finden, mit dem sich auch Farbkombinationen von Hintergrundbildern und Text testen lassen. Damit gibt es eben keine Alternative für aktuelle Designs, die auf Farbverlaufsbildern basieren, mit Transparenzen arbeiten oder ähnlichem. Ich meine das Bewusstsein, dass Webseiten in erster Linie lesbar sein sollten, hat sich noch bei weitem nicht durchgesetzt. Außerdem wird von vielen Webautoren zuwenig getestet. Doch es fehlt auch an automatisierten Tests und die Werkzeuge die solche Tests erlauben sind häufig nicht verständlich.

Trackbacks

Keine Trackbacks

Kommentare

Noch keine Kommentare

Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
BBCode-Formatierung erlaubt
Gravatar, Twitter, Favatar Autoren-Bilder werden unterstützt.
tweetbackcheck