WCAG fargekontrast for designere
4.5:1-regelen, kontrastforhold-matematikk og gratis verktøy for å sjekke ethvert fargepar.
Hvis teksten din ikke oppfyller WCAG AA-kontrast, kan omtrent 285 millioner synshemmede personer ikke lese den. I tillegg befinner du deg på stadig mer ustabil juridisk grunn i EU og USA. Den gode nyheten: regelen er enkel.
4.5:1-regelen
Brødtekst må ha et kontrastforhold på minst 4.5:1 mot bakgrunnen for å bestå WCAG AA. Stor tekst (24px+ vanlig eller 18px+ fet) har en lavere grense på 3:1.
For AAA-samsvar: 7:1 for brødtekst, 4.5:1 for stor tekst.
Slik beregnes kontrastforhold
WCAG bruker relativ luminans — konverter hver farge til en luminansverdi (0 = svart, 1 = hvit) ved hjelp av en bestemt formel, og beregn deretter (L1 + 0.05) / (L2 + 0.05), der L1 er den lysere fargen.
Du trenger ikke å gjøre regnestykket — bruk vår gratis kontrastsjekker for å legge inn to farger og se forholdet.
Vanlige feiltilfeller
- Lysegrått på hvitt — #999 på #fff = 2,85 (feiler). #767676 på #fff = 4,54 (består).
- Hvitt på gult — feiler nesten alltid. Bruk mørk tekst på gult.
- Fargede lenker i brødtekst — de fleste blå lenker består mot hvitt, men feiler mot lysegrått. Test den faktiske omgivende bakgrunnen.
- Merkevarefarger som ser flotte ut — de feiler ofte. Legg til en off-white bakgrunn eller mørkne teksten.
Velge tilgjengelige fargepar
Tre pålitelige mønstre:
- Mørkt på lyst — #1f2937 på #fff = 14:1 (perfekt).
- Hvitt på mørkt — #fff på #1f2937 = 14:1 (perfekt).
- Mørkt på aksent — #1f2937 på #fbbf24 = 9:1 (perfekt for knapper).
Utover tekst
WCAG 2.1 krever også 3:1 for ikke-tekstlige elementer (knapper, fokusringer, skjemakanter). Sjekkeren håndterer begge.
Bakgrunnsbilder som ikke kjemper mot widgetsene dine
Hvis du er designer og setter bakgrunnsbilder bak klokke-widgets og varsler, velg bakgrunnsbilder med kontrast under 5:1 i widgetsonene. Vårt Gaussisk uskarphet-verktøy kan myke opp travle områder av ethvert bakgrunnsbilde for bedre widget-lesbarhet.
Prøv våre gratis verktøy
De fleste av disse guidene følges av et praktisk verktøy du kan bruke med en gang — ingen registrering kreves for første kjøring:
- Bildeskalerer — pikselperfekt nedskalering + oppskalering.
- Konverter til WebP — 30-50 % mindre filer enn JPG.
- Bakgrunnsfjerner — ett-klikks utklipp, gjennomsiktig PNG.
- Favicon-generator — alle nettleserstørrelser fra én kilde.
- Sosiale medier-skalerer — alle plattformers eksakte dimensjoner.
- Massebehandling — bruk ethvert verktøy på opptil 200 bilder samtidig.
Utforsk hele verktøykatalogen.
