4 min. læsning

Tjek og ret farvekontrast

Mål og ret kontrast i tekst, grafik, fokus og tilstande – med Forlæns’ egne farver og konkrete resultater.

Kort fortalt

Mål kontrasten i alle relevante tilstande, og vurder derefter, om designet stadig er forståeligt. Et godkendt tal kan ikke alene gøre en tekst, knap, eller fokusmarkering tydelig.

Farvekontrast er forskellen i lyshed mellem forgrund og baggrund. God kontrast hjælper blandt andre personer med nedsat syn, farvesynsvariationer, eller en skærm i kraftigt dagslys.

Sådan gør du

  1. Mål farverne dér, hvor de bruges

    Mål forgrund og baggrund på den færdige side. Gennemsigtighed, billeder, farveforløb, skygger, og forskellige tilstande kan ændre resultatet. Brug derfor ikke kun farvekoderne fra en designmanual.

    Mål farverne i Forlæns’ kontrastværktøj. Indtast farvekoderne for teksten og dens baggrund, og aflæs kontrastforholdet.

  2. Mål tekstens kontrast

    Almindelig tekst skal have mindst 4,5:1 i kontrast. Stor tekst skal have mindst 3:1. I WCAG betyder stor tekst mindst 24 CSS-pixels ved normal vægt eller cirka 18,66 CSS-pixels ved fed skrift.

    Logoer og rent dekorativ tekst er undtaget, men undtagelsen bør ikke bruges til vigtig information.

  3. Mål ikoner, felter, og knapper

    De dele af ikoner, diagrammer, felter og knapper, som er nødvendige for at forstå eller bruge dem, skal normalt have mindst 3:1 mod de tilstødende farver.

  4. Tjek fokus, hover, fejl, og valgte tilstande

    Mål hover, fokus, valgt, fejl, deaktiveret, og andre tilstande. En fokusmarkering skal både kunne ses mod komponenten og mod baggrunden. Sørg også for, at farve ikke er det eneste signal. Brug for eksempel både farve, ikon, og tekst ved fejl.

  5. Ret farverne, og behold tydelige tilstande

    Vælg en mørkere tekstfarve eller en lysere baggrund. En brandfarve, der ikke virker som almindelig tekst, kan ofte bruges til en tilstrækkelig kraftig kant. Den kan også bruges i en større grafisk flade. Kontrollér bagefter almindelig visning, hover, fokus, fejl, og valgt tilstand igen.

To Forlæns-farver 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 til tilstrækkelig kraftige kanter, ikoner og større grafiske flader, når de relevante krav er opfyldt.

Forlæns-blå#102F49

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

Det høje tal erstatter ikke vurderingen af størrelse, læsbarhed, fokus, og tilstande.

Målingen

Handlingsorange mod hvid: 4,07:1.

Almindelig tekst kræver mindst 4,5:1. Orange linktekst ville derfor ikke bestå. Eksemplet viser resultatet som tekst i stedet for at udsætte læseren for den fejl, guiden advarer imod.

Løsningen

Mål farverne i kontrastværktøjet

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

Tjekliste

  • Almindelig tekst har mindst 4,5:1.
  • Stor tekst har mindst 3:1.
  • Vigtige dele af kontroller og grafik har mindst 3:1.
  • Hover, fokus, valgt, og fejl er kontrolleret hver for sig.
  • Tekst på billeder er målt mod de lyseste og mørkeste relevante områder.
  • Farven står aldrig alene som signal.
  • Fokusmarkeringen kan ses på alle baggrunde.

Typiske faldgruber

  • At måle designmanualens farver i stedet for de pixels, der faktisk vises.
  • At kontrollere standardtilstanden, men glemme hover, fokus, og fejl.
  • At kalde tekst stor uden at kontrollere 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: .