Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Beispiele aus dem Buch (Abschnitt 2.2: Farben, Kontraste und Schriftbild)

Cover: 'Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen' von Jan Eric Hellbusch Extern: "Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.de

Dies ist ein Beispiel aus dem Buch Barrierefreies Webdesign (2004), das Ende 2004 im dpunkt.Verlag erschienen ist.

Farbliche Kennzeichnung von Inhalten

Das folgende Beispiel zeigt eine Tabelle, in der positive und negative Zahlen über farbliche Narkierungen gekennzeichnet werden. Bei benutzerdefinierten Farben sind die farblichgekennzeichneten Zahlen nicht mehr unterscheidbar.

HTML

<table border="1">
  <caption>Meiner kleiner Hobby-Blumenladen</caption>
  <tr>
    <th> </th>
    <th>1. Quartal</th>
    <th>2. Quartal</th>
    <th>3. Quartal</th>
    <th>4. Quartal</th>
  </tr>
  <tr>
    <th>Umsatz</th>
    <td>20000</td>
    <td>30000</td>
    <td>25000</td>
    <td>40000</td>
  </tr>
  <tr>
    <th>Gewinn/<br />Verlust</th>
    <td style="color:red;">2000</td>
    <td>5000</td>
    <td style="color:red;">1000</td>
    <td>8000</td>
  </tr>
</table>
<p class="subText">Rot: Verlust<br />
Schwarz: Gewinn</p>

CSS

caption {
  font-size: 1.2em;
  font-weight: bold;
  padding-bottom: 10px;
}
th {
  background-color: #FFDB94;
  text-align: left;
  padding: 5px;
}
td {
  text-align: right;
  background-color: #EBF3FE;
  padding: 5px;
}
p.subText {
  padding: 20px 0 0 20px;
}

Browseransicht

Meiner kleiner Hobby-Blumenladen
  1. Quartal 2. Quartal 3. Quartal 4. Quartal
Umsatz 20000 30000 25000 40000
Gewinn/
Verlust
2000 5000 1000 8000

Rot: Verlust
Schwarz: Gewinn

Screenshot

Screenshot dieses Beispiels

Screenshot dieses Beispiels ohne Farben

Es spricht nichts gegen die Kennzeichnung von Inhalten mit Farbe. Nur benötigen die Inhalte mindestens eine weitere Kennzeichnung, um auch ohne Farbe wahrgenommen werden zu können. In diesem Beispiel kann das mit einem Plus- bzw- Minuszeichen erfolgen. Nur wenn Inhalte mehrfach gekennzeichnet sind, können sie auch ohne Farbe wahrgenommen werden.

HTML

<table border="1">
  <caption>Meiner kleiner Hobby-Blumenladen</caption>
  <tr>
    <th></th>
    <th>1. Quartal</th>
    <th>2. Quartal</th>
    <th>3. Quartal</th>
    <th>4. Quartal</th>
  </tr>
  <tr>
    <th>Umsatz</th>
    <td>20000</td>
    <td>30000</td>
    <td>25000</td>
    <td>40000</td>
  </tr>
  <tr>
  <th>Gewinn/<br />Verlust</th>
    <td style="color:red;">-2000</td>
    <td>+5000</td>
    <td style="color:red;">-1000</td>
    <td>+8000</td>
  </tr>
</table>
<p class="subText">Rot, -: Verlust<br />
Schwarz, +: Gewinn</p>

Browseransicht

Meiner kleiner Hobby-Blumenladen
1. Quartal 2. Quartal 3. Quartal 4. Quartal
Umsatz 20000 30000 25000 40000
Gewinn/
Verlust
-2000 +5000 -1000 +8000

Rot, -: Verlust
Schwarz, +: Gewinn

Screenshot

Screenshot dieses Beispiels

Screenshot dieses Beispiels ohne Farben