Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Schafe im Schnee

Schafe im Schnee

Bilder machen jede Webseite schöner, genauso wie Schnee im Winter die Landschaft schöner macht. Doch wenn der Schnee schmilzt oder die Bilder nicht angezeigt werden, kann das ein trostloser Anblick sein. Sandra Kallmeyer zeigt, wie man trotz abgeschalteter Bilder nicht auf Informationen verzichten muss.

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.

Bild 1: normale Ansicht mit Bildern
Bild 1: normale Ansicht mit Bildern

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.

Bild 2: Ansicht ohne Bilder
Bild 2: Ansicht ohne Bilder

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.

  1. 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!

Bild 3: Ansicht ohne Bilder mit schwarzem Hintergrund
Bild 3: Ansicht ohne Bilder mit schwarzem Hintergrund

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

  1. 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:

Bild 4: Ansicht ohne Bilder mit schwarzem Hintergrund und weißem Alternativtext
Bild 4: Ansicht ohne Bilder mit schwarzem Hintergrund und weißem Alternativtext

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:

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

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:

Bild 5: Ansicht ohne Bilder mit grünem Hintergrund
Bild 5: Ansicht ohne Bilder mit grünem Hintergrund

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

Viel Spaß beim Ausprobieren!

Kommentare

Renate Hermanns

Renate Hermanns (Webkraut)
am 18.12.2009 - 08:48

Gute Idee, kannte ich noch nicht. Unbedingt merken!

Permanenter Link

Schepp
am 18.12.2009 - 10:05

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

Permanenter Link

Lupus
am 18.12.2009 - 10:54

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.

Permanenter Link

mcnesium
am 18.12.2009 - 13:01

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?

Permanenter Link

Die Kommentare sind geschlossen.