Webkrauts: Für mehr Qualität im Web.

Artikel

Schafe im Schnee

Eine Website muss natürlich auch bei abgeschalteten Bildern lesbar bleiben. Dies wird dann knifflig, wenn Schrift auf einem Bild steht und die Schriftfarbe dieselbe wie die Hintergrundfarbe ist. In den meisten Fällen können wir uns jedoch mit einem kleinen Trick behelfen.

Die Ausgangssituation

Nehmen wir als Beispiel einen Text, der in weißer Schrift auf einem Foto steht und dieses wiederum auf weißem Hintergrund.

Das Problem

Schauen wir uns dies nun ohne Bilder an, bleibt etwas übrig, das an die ostfriesische Nationalflagge erinnert, nämlich weiße Schrift auf weißem Grund. Von unserer liebevoll getexteten Bildunterschrift keine Spur. Lediglich der Alternativtext des Bildes ist zu sehen.

Wir brauchen also eine Möglichkeit, die Hintergrundfarbe zu ändern, sobald keine Bilder angezeigt werden.

Die Lösung

Um die Hintergrundfarbe zu ändern, sobald wir die Bilder abschalten, erzeugen wir die Hintergrundfarbe einfach mit einem Bild. Wir bauen uns in diesem Fall also eine schneeweiße Hintergrundkachel. Wir setzen die eigentliche Hintergrundfarbe auf Schwarz und legen darüber unsere weiße Kachel.

background: url(kachel.gif) #000;

Schalten wir nun die Bilder ab, verschwindet auch die weiße Kachel, der schwarze Hintergrund wird sichtbar und unsere weiße Schrift ist darauf großartig lesbar!

Leider ist nun unser Alternativtext „Schafherde im Schnee“ nicht mehr zu sehen. Zum Glück können wir diesem jedoch auch eine Farbe zuweisen, in unserem Beispiel Weiß:

img { color: #fff; }

Das dürfen wir bedenkenlos tun, weil wir diesen Text sowieso nur bei abgeschalteten Bildern zu sehen bekommen. Das Ergebnis sieht dann so aus:

Da so viel Schwarz ziemlich trüb wirkt, können hier noch kreativ werden und stattdessen für unsere Schafe ein saftiges Grün wählen. Wir müssen dabei nur sicher stellen, dass der Kontrast zur Schriftfarbe noch ausreicht, z.B. mit der Juicy Studio Accessibility Toolbar.

Wer mag, kann sich am Alternativtext bei der Gelegenheit auch noch typografisch austoben, um die bilderlose Ansicht ein wenig aufzupeppen:

img { font: italic small-caps bold 2em/5 Georgia, serif; color: #fff; }

Nicht alle Angaben werden von allen Browsern interpretiert. Das macht aber nichts, da dies ja nur dazu dient, alles ein wenig hübscher zu machen. Im Firefox 3.5 schaut das fertige Beispiel so aus:

Wir merken uns: bei weißem Schaf auf weißem Grund: Schneedecke abtauen, Wiese sichtbar machen!

Viel Spaß beim Ausprobieren!

Über die Autorin

Sandra Kallmeyer alias ScreenOrigami ist in einem Netzwerk aus Freelancern und Agenturen die Spezialistin für standardkonforme Umsetzung von Webdesigns.

Info:

Schafe im Schnee ist Beitrag Nr. 733

Autor:

Sandra Kallmeyer am 18. Dezember 2009 um 07:00

Kategorie:

Adventskalender 2009

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   Gute Idee, kannte ich noch nicht. Unbedingt merken!

   Kommentar by Renate - 18. Dezember 2009 um 08:48

2. 2.
   

   Solange das Bild nicht mit Transparenzen daherkommt, könnte man ihm alternativ auch per CSS eine dunkle Hintergrundfarbe verabreichen.

   Kommentar by Schepp - 18. Dezember 2009 um 10:05

3. 3.
   

   Diese Sache hat nur einen Haken. Wenn man davon ausgeht das man noch einen anderen Text hat der schwarz gefärbt ist wird dieser dann unlesbar. Also ist das nur eine bedingte Lösung die man eventuell in einer Box anwenden kann, aber nicht für die ganze Website.

   Dennoch ein wirklich guter(gutes?) Workaround.

   Kommentar by Lupus - 18. Dezember 2009 um 10:54

4. 4.
   

   ich halte das für umständliches gefrickel. wenn die website lädt und dann erst alles schwarz ist und dann auf einmal weiß, fängt der monitor an zu flackern. der container des bildes muss dann sowieso eine feste größe haben, sonst erkennt der user nicht, dass da eigentlich ein bild sein sollte, und das absolut positionierte textfeld hängt irgendwo im nirvana. außerdem hat das bild (mit den runden ecken) ja schon einen weißen hintergrund. warum muss dann noch ein kachel.gif dahinter liegen?

   Kommentar by mcnesium - 18. Dezember 2009 um 13:01

Kommentar-Feed für diesen Beitrag

Entschuldige, das Kommentarformular ist zurzeit geschlossen.