Beispiele aus dem Buch (Abschnitt 2.2: Farben, Kontraste und Schriftbild)
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
1. Quartal | 2. Quartal | 3. Quartal | 4. Quartal | |
---|---|---|---|---|
Umsatz | 20000 | 30000 | 25000 | 40000 |
Gewinn/ Verlust |
2000 | 5000 | 1000 | 8000 |
Rot: Verlust
Schwarz: Gewinn
Screenshot
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
1. Quartal | 2. Quartal | 3. Quartal | 4. Quartal | |
---|---|---|---|---|
Umsatz | 20000 | 30000 | 25000 | 40000 |
Gewinn/ Verlust |
-2000 | +5000 | -1000 | +8000 |
Rot, -: Verlust
Schwarz, +: Gewinn