Standarder · WCAG 2.2

SC 1.4.1 Nivå A WCAG 2.0

Användning av färg

Färg får inte vara det enda sättet att förmedla information. Obligatoriska fält, felmeddelanden, länkmarkeringar och diagramserier behöver alla ett andra ledtråd — text, ikon, understrykning eller mönster — så att färgblinda användare får samma information.

Vad kriteriet kräver

När ett UI-elements betydelse beror på dess färg — ett rött felmeddelande, en grön “tillgänglig”-punkt, en blå länk i brödtext, en färgad linje i ett diagram — måste den betydelsen också förmedlas på ett annat sätt än färg. Kriteriet förbjuder inte färg; det förbjuder enbart-färg. Ungefär 1 av 12 män och 1 av 200 kvinnor har någon form av färgseendedefekt. Därtill raderar monokromatiska utskrifter, dunkla skärmar och starka reflexer rutinmässigt färgskillnader.

Hur du uppfyller det

  • Stryk under länkar i textstycken. Enbart en annan färg räcker inte — det är det kanoniska 1.4.1-felet.
  • Para ihop varje statusfärg med en etikett eller ikon: rött med texten “Fel”, grönt med en bock, gult med en varningstriangel.
  • Markera obligatoriska formulärfält med både färg (asterisk i rött) och en textindikator (“obligatoriskt”).
  • Använd distinkta linjесtilar (hel, streckad, prickad) eller symboler vid datapunkter i diagram — inte bara färg.
  • Mappa “tillgänglig / upptagen / borta”-statusindikatorer till färg plus ikonsform (fylld cirkel, tom cirkel, streck).
  • Vid formulärvalidering måste det ogiltiga tillståndet ha ett felmeddelande utöver den röda kanten.

Vanliga fel

  • Länkar i brödtext visas enbart med en lite annorlunda blå färg utan understrykning. Röd-grön-färgblinda användare ser ingen skillnad.
  • Asterisker för obligatoriska fält visas i rött utan aria-required och utan textetiketten “obligatoriskt”.
  • Diagram med fem serier som bara särskiljs med färg — skriv ut diagrammet i gråskala och linjerna blir omöjliga att skilja åt.
  • Felmeddelanden markeras enbart med en röd kant utan feltext.
  • “Online / offline”-indikatorer ändrar bara färg, inte form eller etikett.
  • Pajdiagram med skivor av liknande luminans märkta enbart med färg i förklaringsrutan.

Varför det spelar roll

Det här är det vanligaste 1.4.x-felet och ett av de lättaste att åtgärda i designfasen — lägg till en understrykning, en ikon eller en etikett. Efterhandskorrigering är svårare eftersom varumärkespaletten ofta är uppbyggd kring enbart-färg-signalering. Reglerna i Qualibooth, axe och Lighthouse kan inte alltid upptäcka detta automatiskt, så det dyker upp vid manuell granskning.