Beispiele aus dem Buch (Abschnitt 2.2: Farben, Kontraste und Schriftbild)
"Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.deDies 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
Screenshot
