Farvekontrast til tekst, knapper og ikoner

Hvorfor kontrast betyder noget

Bleg tekst koster læsere. Folk med nedsat syn, ældre læsere og alle, der kigger på en telefon i skarpt lys, har brug for en tydelig forskel mellem tekst og baggrund. W3C's retningslinjer for tilgængeligt webindhold (WCAG) fastsætter derfor minimumsværdier for tekst, for kontrolelementer som knapper og indtastningsfelter og for ikoner og grafik. De kan måles og tjekkes før lanceringen.

Sådan virker kontrastforholdet

Kontrastforholdet sammenligner, hvor lyse to farver er. WCAG ser ikke på farvetonen, men på den relative luminans: en værdi mellem 0 for det mørkeste sort og 1 for det lyseste hvidt. De tre kanaler rød, grøn og blå omregnes og vægtes: grøn tæller mest, rød mindre og blå mindst. Forholdet er (L1 + 0.05) / (L2 + 0.05), hvor L1 er luminansen af den lyseste farve. Resultatet ligger mellem 1:1 for to ens farver og 21:1 for sort på hvidt.

To regler fra W3C betyder noget i praksis. For det første rundes værdierne ikke: et forhold på 4,499:1 opfylder ikke grænsen på 4,5:1. For det andet måles kontrasten mod den baggrund, der er angivet for teksten. Hvis en side kun angiver en tekstfarve og ingen baggrundsfarve, regner W3C det som en fejl, fordi den besøgendes standardbaggrund er ukendt. Angiv altid begge farver sammen.

De tre succeskriterier

• 1.4.3 Contrast (Minimum), niveau AA: tekst og billeder af tekst skal have mindst 4,5:1, stor tekst mindst 3:1.
• 1.4.6 Contrast (Enhanced), niveau AAA: tekst skal have mindst 7:1, stor tekst mindst 4,5:1. Det er det strengere niveau og hjælper mest ved lange tekster.
• 1.4.11 Non-text Contrast, niveau AA: mindst 3:1 mod farverne ved siden af, for alt, hvad du skal kunne se for at genkende et kontrolelement og dets tilstand (for eksempel kanten på et indtastningsfelt eller en fokusindikator), og for de dele af grafik, du skal bruge for at forstå indholdet, for eksempel ikoner eller linjer i et diagram.

Hvad der tæller som stor tekst

Stor tekst er mindst 18 punkt, eller mindst 14 punkt med fed skrift. W3C omregner det til ca. 24 pixel og ca. 18,5 pixel med fed. Stor tekst må have mindre kontrast, fordi bogstaverne er større og stregerne bredere. Pas på med tynde skrifttyper: ifølge W3C kan kantudjævning få tynde eller usædvanlige skrifttyper til at se svagere ud end deres angivne farve. W3C anbefaler tykkere skrifttyper eller et farvepar et godt stykke over minimum.

Hvad der ikke behøver at bestå

• Inaktive komponenter, for eksempel en deaktiveret knap.
• Ren dekoration og tekst, som ingen kan se.
• Tekst, der er en del af et logo eller et varemærke.
• Tilfældig tekst i et billede med andet væsentligt indhold, for eksempel et vejskilt på et foto.

Typiske fejl

• Lysegrå på hvidt. Grå til datoer, billedtekster eller sekundær tekst er ofte for bleg: #999999 på hvidt når kun 2,84:1. Den lyseste rene grå, der består AA for normal tekst på hvidt, er #767676 med 4,54:1.
• Tekst på billeder. Kontrasten skifter med hver del af fotoet. W3C opfører baggrundsbilleder uden tilstrækkelig kontrast som en fejl (F83). Sæt teksten på en ensfarvet flade, gør billedet mørkere bag den, eller placér teksten ved siden af billedet. Tjek det lyseste sted bag teksten.
• Pladsholdertekst. Det grå tip i et tomt indtastningsfelt er tekst, og 1.4.3 gælder for det. En lysegrå som #9ca3af på hvidt når kun 2,53:1. En pladsholder erstatter heller ikke en synlig etiket.
• Hover- og fokustilstande. Tekst, der vises eller ændrer sig, når musen holdes over eller tastaturfokus kommer, skal opfylde de samme værdier. En hover-effekt må ikke sænke kontrasten på et kontrolelement eller svække fokusindikatoren. En fokusindikator, du selv designer, skal have 3:1 mod baggrunden ved siden af.
• Hvid tekst på lyse brandfarver. Orange, gule, lysegrønne eller turkise knapper med hvid tekst fejler ofte: hvidt på #ff6600 når 2,93:1.
• Blege kanter og ikoner. Hvis kanten er det eneste, der viser, hvor et indtastningsfelt er, skal den have 3:1: #cccccc på hvidt har 1,60:1. Ikoner, der bærer betydning uden tekst, for eksempel en dropdown-pil eller et luk-ikon, skal også have 3:1.
• Kun ét tema tjekket. Hvis dit website har en mørk tilstand, så tjek dens farvepar separat. En farve, der virker på hvidt, kan fejle på en mørk baggrund.

Ret en brandpalet uden at miste brandet

1. 1Skriv hver farve ned med dens rolle: tekst, baggrund, accent eller knap, kant. Mange problemer begynder, når én farve skal klare alle opgaver.
2. 2Behold brandfarven, hvor reglerne er lettere at opfylde eller ikke gælder: i logoet, på store flader, til dekoration og til store overskrifter.
3. 3Brug til tekst og små elementer en mørkere eller lysere nuance af samme farvetone. Hvis kun lysheden ændres, forbliver farven genkendelig: hvid tekst på #c74f00, en mørkere orange, når 4,61:1.
4. 4Eller skift tekstfarven i stedet. Mørk tekst på en lys brandfarve virker ofte bedre end hvid: #1a1a1a på #ff6600 når 5,92:1.
5. 5Definér én grå til sekundær tekst, der består, for eksempel #767676 på hvidt, og brug den overalt i stedet for flere blege grå.
6. 6Tjek hver tilstand: normal, hover, fokus, fejl og mørk tilstand. Gem de endelige farver som variabler i dit stylesheet, så ingen igen vælger en bleg farve manuelt.

Tjek dine farver med Do4U

Farvekontrasttjek beregner disse værdier for dine egne farver. Du indtaster dine farver, én pr. linje, og giver hver en rolle: tekst, baggrund, accent (for eksempel en knap) eller kant. Koden tjekker hvert fornuftigt par mod AA og AAA for normal og stor tekst og mod 3:1 for kanter, ikoner og knapflader, uden at runde op. For hvert par, der fejler, får du den nærmeste farve, der består, én gang mørkere og én gang lysere, i samme farvetone. Do4U bygger også en tilpasset palet, tjekker den igen som helhed og eksporterer den som CSS custom properties, SCSS eller JSON. Alt kører i kode, uden AI, og tjekket er gratis.

Tjekket kender kun de farvepar, du indtaster. Det kan ikke se skriftstørrelser, billeder bag tekst, gennemsigtighed eller hover- og fokustilstande, så test også de færdige sider. Do4U bygger udkastet, du tjekker og beslutter.