7 min. læsning

Sådan sikrer du god farvekontrast

Når en besøgende læser en side eller udfylder en formular, skal teksten være nem at læse, fejlbeskeder skal forklares med ord og ikke kun med farve, og det skal være tydeligt, hvilket felt eller hvilken knap der er valgt med tastaturet. Det hjælper især mennesker med nedsat syn, mennesker, der har svært ved at skelne bestemte farver, og personer, der ikke bruger en mus.

Guiden her hjælper dig med at sikre læsbar tekst, forståelige fejlbeskeder, og en tydelig markering, når siden bruges med tastaturet.

Kort fortalt

  • Tekster skal være nemme at læse mod baggrunden.
  • Fejlbeskeder skal fortælle med ord, hvad der er galt, og hvad brugeren skal gøre.
  • En tydelig ramme eller understregning skal vise, hvilket link, felt, eller hvilken knap der er valgt med tastaturet.

Eksemplet i denne guide er en formular med et e-mailfelt og en Send-knap. En besøgende skal kunne læse teksten, forstå en fejl og se, hvor tastaturet har flyttet markeringen hen.

Illustrationen nedenfor viser formularen i fire udgaver. Den er ikke en rigtig formular, som du kan skrive i.

Illustration
Den samme formularfejl i farver og gråtoner

Den røde kant bliver mindre tydelig, når farverne forsvinder. Ikonet og fejlteksten fortæller stadig, hvad der er galt, og hvad brugeren skal skrive.

Sådan gør du

  1. Vælg det sted på siden, du vil undersøge

    Åbn den færdige side, og vælg en tekst, et ikon, et felt eller en knap, som er svær at se. Kontrast er forskellen mellem farven på indholdet og farven lige bagved. Du skal kende eller undersøge begge farver for at kunne måle forskellen.

    Hvis WordPress eller designmanualen viser farvekoderne, kan du indtaste dem som forgrund og baggrund i Forlæns’ kontrastværktøj. Brug værktøjets billedfunktion, når teksten ligger på et billede, eller når knappen er gennemsigtig. Billedfunktionen kan også bruges, når du ikke kender baggrundsfarven.

  2. Mål tekstens kontrast

    Almindelig tekst skal have mindst 4,5:1 i kontrast. Det er en nedre grænse. Kontrasten må gerne være højere, og tydeligere kontrast gør ofte teksten nemmere at læse. Brug grænsen på 4,5:1, hvis du ikke kender tekstens præcise størrelse og vægt. Skriv tekstens farve og baggrundens farve i kontrastværktøjet, og læs tallet i resultatet.

  3. Mål ikoner, felter, og knapper

    Nogle dele skal kunne ses, selv om de ikke er tekst. Kanten omkring et tomt felt viser, hvor man kan skrive, og et ikon kan vise, at en knap åbner en menu. De synlige dele, som en person skal kunne finde for at bruge siden, skal normalt have mindst 3:1 i kontrast mod farverne ved siden af.

    Illustration
    Et felt og et menuikon med for lav og tydelig kontrast

    Mål kanten, når den er nødvendig for at finde feltet. Mål selve ikonet, når ikonet viser knappens funktion. Tallene i eksemplet er målt mod den hvide baggrund.

    Mål den del, der viser funktionen. På et formularfelt kan det være kanten mod baggrunden. På en ikonknap kan det være selve ikonet mod knappens farve.

  4. Afprøv fejlbeskeder og brug siden med tastaturet

    Tryk på Tab-tasten for at flytte mellem sidens links, felter, og knapper uden at bruge musen. Hver gang du trykker, skal en tydelig ramme eller understregning vise, hvor du er. Denne synlige markering kaldes fokusmarkeringen.

    Illustration
    En svag og en tydelig markering ved brug af Tab-tasten

    Fokusmarkeringen er den ramme eller understregning, der viser, hvilket felt, link, eller hvilken knap Tab-tasten har flyttet til.

    Prøv derefter formularen med en manglende eller forkert oplysning. I e-maileksemplet kan du trykke på Send med et tomt felt. Et godt resultat er en fejltekst, der fortæller, hvilket felt der skal rettes, og hvad brugeren skal skrive. En rød kant kan supplere beskeden, men farven må ikke være den eneste forklaring.

  5. Ret problemet, og prøv igen

    Vælg en mørkere tekstfarve eller en lysere baggrund, hvis kontrastforholdet er for lavt. Tilføj en forklarende fejltekst, hvis formularen kun bruger farve, og gør markeringen omkring det valgte link, felt eller den valgte knap tydelig på alle de baggrunde, hvor den vises. Gentag derefter den samme handling, og mål de samme farver igen.

To Forlæns-farver på hvid

Eksemplet viser, hvorfor det er værd at måle den rolle, farven faktisk har. Handlingsorange kan bruges på flere måder, men ikke som almindelig linktekst på hvid.

Handlingsorange#C95F2E

Kontrast mod hvid
4,07:1
Almindelig tekst
Kan ikke bruges

Forlæns bruger ikke orange til meningsbærende tekst på hvid eller creme. Farven kan bruges på større dekorative flader. Hvis orange viser en kant eller et ikon, som man skal kunne se for at bruge siden, skal den synlige del normalt have mindst 3:1 mod farven ved siden af.

Forlæns-blå#102F49

Kontrast mod hvid
13,77:1
Almindelig tekst
Kan bruges

Forlæns-blå kan bruges som almindelig tekst på hvid.

Målt resultat

Handlingsorange mod hvid: 4,07:1.

Almindelig tekst kræver mindst 4,5:1. Orange tekst på hvid består derfor ikke kravet.

Hvad det betyder

Farven kan ikke bruges til almindelig tekst på hvid. Den kan stadig bruges som en tydelig, ekstra markering, når teksten har en mørkere farve.

Illustration
Sådan kan orange bruges sammen med mørk linktekst

Linkteksten er Forlæns-blå. Den orange linje er en ekstra markering, men den bærer ikke linkets betydning alene.

Tjekliste

  • Almindelig tekst har mindst 4,5:1.
  • Stor tekst har mindst 3:1.
  • Kanter omkring felter, ikoner, fokusmarkeringer, og anden grafik, som man skal kunne se for at bruge siden, har mindst 3:1.
  • Links og knapper er afprøvet både med mus og med Tab-tasten.
  • Tekst på billeder er målt mod de lyseste og mørkeste relevante områder.
  • Fejl og andre vigtige oplysninger kan forstås uden at se farven.
  • Fokusmarkeringen kan ses på alle relevante baggrunde.

Typiske faldgruber

  • At måle designmanualens farver i stedet for de pixels, der faktisk vises.
  • At måle siden uden at prøve links, knapper, og formularfelter med både mus og tastatur.
  • At kalde tekst stor uden at se den faktiske CSS-størrelse og vægt.
  • At bestå kontrastkravet, men stadig bruge farve som eneste signal.

Kilder og videre læsning

Senest gennemgået: .