Fargekontrast for tekst, knapper og ikoner

Hvorfor kontrast betyr noe

Blek tekst koster lesere. Folk med nedsatt syn, eldre lesere og alle som ser på en mobil i sterkt lys, trenger en tydelig forskjell mellom tekst og bakgrunn. Web Content Accessibility Guidelines (WCAG) fra W3C setter derfor minsteverdier for tekst, for kontroller som knapper og inndatafelt, og for ikoner og grafikk. De kan måles og sjekkes før lansering.

Slik virker kontrastforholdet

Kontrastforholdet sammenligner hvor lyse to farger er. WCAG ser ikke på fargetonen, men på den relative luminansen: en verdi mellom 0 for det mørkeste svarte og 1 for det lyseste hvite. De tre kanalene rød, grønn og blå regnes om og vektes: grønn teller mest, rød mindre og blå minst. Forholdet er (L1 + 0.05) / (L2 + 0.05), der L1 er luminansen til den lyseste fargen. Resultatet ligger mellom 1:1 for to like farger og 21:1 for svart på hvitt.

To regler fra W3C betyr noe i praksis. For det første rundes ikke verdiene av: et forhold på 4,499:1 oppfyller ikke grensen på 4,5:1. For det andre måles kontrasten mot bakgrunnen som er satt for teksten. Hvis en side bare setter en tekstfarge og ingen bakgrunnsfarge, regner W3C det som en feil, fordi standardbakgrunnen til den besøkende er ukjent. Sett alltid begge fargene sammen.

De tre suksesskriteriene

• 1.4.3 Contrast (Minimum), nivå AA: tekst og bilder av tekst trenger minst 4,5:1, stor tekst minst 3:1.
• 1.4.6 Contrast (Enhanced), nivå AAA: tekst trenger minst 7:1, stor tekst minst 4,5:1. Det er det strengere nivået og hjelper mest ved lange tekster.
• 1.4.11 Non-text Contrast, nivå AA: minst 3:1 mot fargene ved siden av, for alt du må se for å kjenne igjen en kontroll og tilstanden dens (for eksempel kanten på et inndatafelt eller en fokusindikator) og for de delene av grafikk du trenger for å forstå innholdet, for eksempel ikoner eller linjer i et diagram.

Hva som regnes som stor tekst

Stor tekst er minst 18 punkter, eller minst 14 punkter i fet skrift. W3C regner dette om til omtrent 24 piksler og omtrent 18,5 piksler i fet skrift. Stor tekst kan ha mindre kontrast fordi bokstavene er større og strekene bredere. Vær forsiktig med tynne skrifter: ifølge W3C kan kantutjevning få tynne eller uvanlige skrifter til å se svakere ut enn den definerte fargen. W3C anbefaler tykkere skrifter eller et fargepar som ligger tydelig over minsteverdien.

Hva som ikke trenger å bestå

• Inaktive komponenter, for eksempel en deaktivert knapp.
• Ren dekorasjon og tekst som ingen kan se.
• Tekst som er en del av en logo eller et merkenavn.
• Tilfeldig tekst i et bilde med vesentlig annet innhold, for eksempel et gateskilt på et foto.

Vanlige feil

• Lysegrått på hvitt. Grått for datoer, bildetekster eller sekundær tekst er ofte for blekt: #999999 på hvitt når bare 2,84:1. Det lyseste rene grå som består AA for vanlig tekst på hvitt, er #767676 med 4,54:1.
• Tekst på bilder. Kontrasten endrer seg med hver del av fotoet. W3C oppgir bakgrunnsbilder uten nok kontrast som en feil (F83). Legg teksten på en ensfarget flate, gjør bildet bak mørkere eller plasser teksten ved siden av bildet. Sjekk det lyseste punktet bak teksten.
• Plassholdertekst. Det grå tipset i et tomt inndatafelt er tekst, og 1.4.3 gjelder for det. Et lysegrått som #9ca3af på hvitt når bare 2,53:1. En plassholder erstatter heller ikke en synlig etikett.
• Hover- og fokustilstander. Tekst som vises eller endres når musen holdes over eller tastaturet gir fokus, må oppfylle de samme verdiene. En hover-effekt må ikke senke kontrasten til en kontroll eller svekke fokusindikatoren. En fokusindikator du designer selv, trenger 3:1 mot bakgrunnen ved siden av.
• Hvit tekst på lyse merkevarefarger. Oransje, gule, lysegrønne eller turkise knapper med hvit tekst feiler ofte: hvitt på #ff6600 når 2,93:1.
• Bleke kanter og ikoner. Hvis kanten er det eneste som viser hvor et inndatafelt er, trenger den 3:1: #cccccc på hvitt har 1,60:1. Ikoner som bærer mening uten tekst, for eksempel en nedtrekkspil eller et lukkeikon, trenger også 3:1.
• Å sjekke bare ett tema. Hvis nettstedet ditt har mørk modus, sjekk fargeparene der separat. En farge som fungerer på hvitt, kan feile på mørk bakgrunn.

Rett en merkevarepalett uten å miste merkevaren

1. 1Skriv ned hver farge med rollen sin: tekst, bakgrunn, aksent eller knapp, kant. Mange problemer starter når én farge gjør alle jobbene.
2. 2Behold merkevarefargen der reglene er lettere å oppfylle eller ikke gjelder: i logoen, på store flater, til dekorasjon og til store overskrifter.
3. 3For tekst og små elementer bruker du en mørkere eller lysere nyanse av samme fargetone. Hvis bare lysheten endres, er fargen fortsatt gjenkjennelig: hvit tekst på #c74f00, en mørkere oransje, når 4,61:1.
4. 4Eller endre tekstfargen i stedet. Mørk tekst på en lys merkevarefarge fungerer ofte bedre enn hvit: #1a1a1a på #ff6600 når 5,92:1.
5. 5Definer ett grått for sekundær tekst som består, for eksempel #767676 på hvitt, og bruk det overalt i stedet for flere bleke grånyanser.
6. 6Sjekk hver tilstand: normal, hover, fokus, feil og mørk modus. Lagre de endelige fargene som variabler i stilarket ditt, så ingen velger en blek farge for hånd igjen.

Sjekk fargene dine med Do4U

Fargekontrastsjekk beregner disse verdiene for dine egne farger. Du skriver inn fargene dine, én per linje, og gir hver av dem en rolle: tekst, bakgrunn, aksent (for eksempel en knapp) eller kant. Koden sjekker hvert fornuftig par mot AA og AAA for vanlig og stor tekst og mot 3:1 for kanter, ikoner og knappeflater, uten å runde opp. For hvert par som feiler, får du den nærmeste fargen som består, én gang mørkere og én gang lysere, i samme fargetone. Do4U lager også en justert palett, sjekker den på nytt som helhet og eksporterer den som egendefinerte CSS-egenskaper, SCSS eller JSON. Alt kjører i kode, uten KI, og sjekken er gratis.

Sjekken kjenner bare fargeparene du skriver inn. Den kan ikke se skriftstørrelser, bilder bak tekst, gjennomsiktighet eller hover- og fokustilstander, så test også de ferdige sidene. Do4U lager utkastet, du sjekker og bestemmer.