Formidle informasjon med mer enn bare farge (WCAG 1.4.1)

Farge er et kraftig designverktøy. Men omtrent 300 000 nordmenn har en form for fargeblindhet, og mange flere opplever situasjoner der farger er vanskelige å skille - dårlig skjerm, sollys, tretthet. Når farge er den eneste bæreren av informasjon, risikerer du at en stor gruppe brukere går glipp av viktig innhold.

Hva sier kravet?

WCAG 1.4.1 Bruk av farge krever at farge ikke brukes som eneste visuelle virkemiddel for å formidle informasjon, indikere en handling, be om respons eller skille et visuelt element fra andre.

Kravet er nivå A - det mest grunnleggende nivået. Alle norske virksomheter må oppfylle dette.

Det betyr ikke at du ikke kan bruke farge. Farge er en utmerket måte å forsterke informasjon på. Men det må alltid finnes minst én annen visuell indikator i tillegg: tekst, mønster, form, ikon, understreking eller lignende.

Tenk på det som en backup: farge er «nice to have», men den tekstlige eller visuelle indikatoren er «need to have».

Hvorfor er dette viktig?

Fargeblindhet er vanlig

Omtrent 8 prosent av menn og 0,5 prosent av kvinner har en form for fargeblindhet. Den vanligste typen er rød-grønn fargeblindhet, som gjør det vanskelig å skille rødt fra grønt. Hvis feilmeldinger bare vises i rødt og suksessmeldinger i grønt, ser mange av disse brukerne ingen forskjell.

Skjermlesere ser ikke farge

Skjermlesere formidler ikke farger til brukeren. En blind bruker vet ikke at et felt har rød ramme eller at en lenke er blå. All informasjon som formidles utelukkende gjennom farge, er fullstendig usynlig for skjermleserbrukere.

Kontekstavhengige situasjoner

Selv brukere med normalt fargesyn kan ha problemer med å oppfatte farger i visse situasjoner: sterkt sollys, nattmodus, svart-hvitt-utskrift, projektorer med dårlig fargegjengivelse, eller billige skjermer med dårlig fargekalibrering.

Slik oppfyller du kravet

Lenker i brødtekst

Et av de vanligste problemene er lenker som bare skiller seg fra omgivende tekst med farge. WCAG krever at lenker som bare bruker farge for å skille seg ut, må ha minst 3:1 kontrast mot omgivende tekst - og i tillegg en visuell endring ved hover og fokus (som understreking).

Den enkleste løsningen er å alltid ha understreking på lenker:

/* Dårlig: Lenker skiller seg bare ut med farge */
a {
  color: #0066cc;
  text-decoration: none;
}

/* Bra: Lenker har understreking som ekstra visuell indikator */
a {
  color: #0066cc;
  text-decoration: underline;
}

Skjemafeilmeldinger

Å markere feil bare med rød farge er svært vanlig - og svært problematisk. Legg til en tekst, et ikon eller begge deler:

<!-- Dårlig: Kun farge indikerer feil -->
<input type="email" style="border-color: red;">

<!-- Bra: Farge + tekst + aria-attributter -->
<div class="felt-gruppe">
  <label for="epost">E-postadresse</label>
  <input type="email" id="epost" class="feil-felt"
         aria-invalid="true" aria-describedby="epost-feil">
  <p id="epost-feil" class="feilmelding" role="alert">
    ⚠ E-postadressen er ikke gyldig. Eksempel: navn@domene.no
  </p>
</div>

.feil-felt {
  border: 2px solid #cc0000;
  border-left: 4px solid #cc0000; /* Tykkere kant som ekstra indikator */
}

.feilmelding {
  color: #cc0000;
  font-weight: bold; /* Fet tekst som ekstra indikator */
}

Statusindikator og merkelapper

Mange dashbord og systemer bruker farger for å vise status - grønt for godkjent, rødt for avvist, gult for venter. Legg alltid til en tekstlig merkelapp:

<!-- Dårlig: Kun farget prikk -->
<span class="status-gronn"></span>

<!-- Bra: Farget prikk + tekst -->
<span class="status status-gronn">● Aktiv</span>
<span class="status status-rod">■ Utløpt</span>
<span class="status status-gul">▲ Venter</span>

Merk at vi også bruker ulike former (sirkel, firkant, trekant) som ekstra visuell indikator - nyttig for fargeblinde brukere.

Diagrammer og grafer

Grafer der dataserier bare skilles med farge, er et vanlig problem. Legg til mønster, direkte merking eller ulike strektyper:

/* Bruk ulike strektyper i tillegg til farge */
.linje-salg {
  stroke: #0066cc;
  stroke-dasharray: none; /* Heltrukken linje */
}

.linje-kostnader {
  stroke: #cc3300;
  stroke-dasharray: 8 4; /* Stiplet linje */
}

.linje-fortjeneste {
  stroke: #339900;
  stroke-dasharray: 2 4; /* Prikket linje */
}

Obligatoriske skjemafelt

Å markere obligatoriske felt med bare en rød stjerne er ikke tilstrekkelig. Legg til tekst:

<!-- Dårlig: Kun rød stjerne -->
<label for="navn">Navn <span style="color: red;">*</span></label>

<!-- Bra: Synlig tekst i tillegg -->
<label for="navn">Navn (obligatorisk)</label>

<!-- Alternativt: Rød stjerne + forklaring øverst i skjemaet -->
<p>Felt merket med <span class="obligatorisk">*</span> er obligatoriske.</p>
<label for="navn">Navn <span class="obligatorisk">*</span></label>

Vanlige feil

• Lenker uten understreking som bare skiller seg fra vanlig tekst med farge - ofte umulig å oppdage for fargeblinde.
• Skjemafeil bare markert med rød ramme uten feilmeldingstekst.
• Diagrammer der farger er den eneste måten å skille dataserier - uleselig for fargeblinde og i svart-hvitt-utskrift.
• Statusfarger uten tekst - grønne og røde prikker uten merkelapp.
• Kalendre der fargede datoer betyr noe - ledig (grønn), opptatt (rød) - uten tilleggsinformasjon.
• Tabeller med fargekodede rader der fargen formidler kategori eller prioritet uten tekstlig indikator.

God praksis er å alltid stille deg spørsmålet: «Hvis jeg skriver ut denne siden i svart-hvitt, går noe informasjon tapt?» Hvis svaret er ja, trenger du en ekstra visuell indikator ved siden av fargen.