WCAG 1.4.1 Användning av färger

Färg får inte vara det enda sättet att visa information, att visa att något har hänt eller att skilja ett element från ett annat. Den som är färgblind, har nedsatt syn eller använder skärmläsare ser inte skillnaden. Färg får gärna användas, men samma information ska också finnas i text, en ikon, en ram eller en understrykning. Kravet handlar om färgen i sig. Kontrasten mellan färgerna är ett eget krav (1.4.3 och 1.4.11).

• Fel i kassan visas bara med röd ram runt fältet, utan text som säger vad som är fel.
• Slutsålda storlekar visas bara i ljusgrått, så att det inte går att se vilka som går att köpa.
• Den valda färgen eller storleken markeras bara med en annan bakgrundsfärg.
• Länkar i produkttexter och villkor skiljer sig från texten runt bara med färg och saknar understrykning.
• Lagerstatus visas som en grön, gul eller röd prick utan text.
• Rabattpriset visas bara i rött bredvid det vanliga priset, utan att det framgår vilket pris som gäller.

Lägg till något mer än färgen: en text, en ikon, en överstrykning eller en tjockare ram. Länkar i löptext får understrykning.

<!-- Bara färg -->
<button class="storlek slutsald">M</button>

<!-- Text och tillstånd i koden -->
<button class="storlek" disabled>
  M <span class="dold">, slutsåld</span>
</button>

.storlek[disabled] { text-decoration: line-through; }
.produkttext a { text-decoration: underline; }

Kontrollera själv

Månadsgranskningen kör axe-core, som hittar länkar i löptext som bara skiljer sig från texten runt med färg. Om fel, valda alternativ och slutsålda varianter visas med något mer än färg går inte att avgöra automatiskt. Ett enkelt sätt att prova själv är att visa sidan i gråskala, till exempel med inställningen för färgfilter i telefonen.

• Understanding 1.4.1 Use of Color hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Det svenska namnet kommer från W3C:s auktoriserade svenska översättning, som gäller WCAG 2.0. Kravet 1.4.1 har samma lydelse i WCAG 2.1.