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 anslagsvis 285 millioner synshemmede mennesker ikke lese den. I tillegg står du på stadig mer usikker 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 spesifikk 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 kontrastkontroll for å legge inn to farger og se forholdet.
Vanlige feiltilfeller
- Lys grå på hvit — #999 på #fff = 2.85 (består ikke). #767676 på #fff = 4.54 (består).
- Hvit på gul — består nesten aldri. Bruk mørk tekst på gul.
- Fargede lenker i brødtekst — de fleste blå lenker består mot hvit, men består ikke mot lys grå. Test den faktiske omgivende bakgrunnen.
- Merkevarer som ser bra ut — de består ofte ikke. Legg til en off-white bakgrunn eller mørkere teksten.
Velge tilgjengelige fargepar
Tre pålitelige mønstre:
- Mørk på lys — #1f2937 på #fff = 14:1 (perfekt).
- Hvit på mørk — #fff på #1f2937 = 14:1 (perfekt).
- Mørk på aksent — #1f2937 på #fbbf24 = 9:1 (perfekt for knapper).
Utover tekst
WCAG 2.1 krever også 3:1 for ikke-tekst-elementer (knapper, fokusringer, skjemakanter). Kontrollen håndterer begge.
Bakgrunnsbilder som ikke kjemper mot widgetene dine
Hvis du er en designer som 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 i ethvert bakgrunnsbilde for bedre widget-lesbarhet.
Prøv våre gratis verktøy
De fleste av disse guidene følger med et praktisk verktøy du kan bruke med en gang — ingen registrering nødvendig for første kjøring:
- Bildeomformer — 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-størrelsesomformer — nøyaktige dimensjoner for hver plattform.
- Bulkbehandling — bruk et hvilket som helst verktøy på opptil 200 bilder samtidig.
Se gjennom hele verktøykatalogen.
