Dag 12: Bruke farger sikkert

Dette tipset er en generell regel som kan anvendes på mange områder innen webdesign, men jeg vil fokusere på ett spesifikt eksempel som er vanlig blant weblogger: Lenketekst.

Det er to potensielle problemer relatert til farge. For det første kan det hende lenketeksten din ikke har tilstrekkelig kontrast til bakgrunnsfargen. Hvilke som helst lyse farger på en hvit bakgrunn er problematisk; lenketeksten kan simpelthen forsvinne inn i bakgrunnen. Tilsvarende er det problematisk med mørke farger på sort bakgrunn. Dette gjelder selvfølgelig all tekst, ikke bare lenketekst, men det er ganske vanlig på weblogger at tekst er leselig og lenker utilsiktet er gjort uleselige, derfor nevner jeg særskilt lenker.

Det andre potensielle problemet er lenkedekorasjonen. Selv om stilsettet ditt gir linkene en annen farge enn resten av teksten må du forsikre deg om at de også kan skjelnes på en annen måte, for eksempel med fet, kursiv eller understreket tekst. Ellers kan lenkene riktignok være fullstendig leselige, men fargeblinde mennesker vil ikke se at de er lenker. Dette er illustrert nedenfor.

Hvem har nytte av det?

  1. Marius tjener på det. Her er en prøve med skjermskudd av tre forskjellige dekorasjoner for lenker.

    Picture of three links using various color schemes, description follows

    Som vist, lenken i den første setningen bruker standard dekorasjon, og vises som blå/purpur og understreket i visuelle nettlesere. På den andre lenken er det anvendt to former til tekstdekorasjon, og vises med fet og rød (men ikke understreket). På den tredje lenken er det kun anvendt én form til tekstdekorasjon, og vises kun som rød.

    Her er nå de tre samme lenkene, slik Marius ser dem.

    Picture of same three links as Michael sees them, description follows

    Som vist, den første lenken er fortsatt synlig; Marius' fargeblindhet er ikke påvirket av den blå fargen. I den andre setningen, det rødlige på lenken viskes ut, nesten til sort, men lenken ser fortsatt fet ut, så Marius kan fortsatt skjelne den. Problemet oppstår i den tredje lenken, som før bare kunne skjelnes med dens rødlige farge; nå som det rødlige har blitt visket ut til sort, er det praktisk talt umulig å avgjøre hvilket ord som er en lenke og hvilke ord som er normal tekst.

Hvordan gjøre det

For å sjekke for «tilfredsstillende kontrast» mellom din tekstfarge og bakgrunnsfarge, bruk VisCheck for å simulere hvordan nettsiden din ser ut for en fargeblind leser.

For å sjekke for lenkedekorasjons-problemer, se i dine CSS-regler etter «a» taggen. For eksempel, hvis du har en regel som dette i din CSS, da er dine lenker kun skilt ut med deres rødhet, noe som ikke er bra:

a {
  text-decoration: none;
  color: red;
}

Du kan beholde dine lenker røde, men du trenger å forsikre deg om at lenkene også er fete, eller understreket, eller kursiviserte. For å gjøre dem fete såvel som røde, legg til en linje:

a {
  text-decoration: none;
  color: red;
  font-weight: bold; /* legg til denne linjen */
}

Les mer

  • VisCheck simulerer fargeblindhet og lar deg se hva fargeblinde mennesker ser. Du kan sjekke et enkelt bilde eller en hel nettside.
  • Cal Henderson: Color Vision. Viser fargespektrumet slik som mennesker med forskjellige typer fargeblindhet ser det.
  • Ishihara Test for Color Blindness inneholder en rekke med bilder som mennesker med rød-grønn fargeblindhet ser forskjellig, eller ikke ser i det hele tatt.