Kontrastsjekker – WCAG AA og AAA kontrastforhold

Q: Er 4,49:1 nær nok til å bestå?

Nei. WCAG grensene er strenge minstekrav: 4,49:1 består ikke AA for vanlig tekst. Bruk forslaget for å få en farge som faktisk består.

Kontrastsjekker (WCAG)

Gratis WCAG-kontrastsjekker. Skriv inn en tekst- og bakgrunnsfarge og få kontrastforholdet, AA/AAA-resultater og nærmeste farge som består.

Tekstfarge

Bakgrunnsfarge

Kontrastforhold

–

WCAG 2.2-resultater

	AA	AAA
Vanlig tekst
Stor tekst
Grensesnittelementer og grafikk		–

Forhåndsvisning

Vanlig tekst (16 px). Vår lille kjekke hund hopper over den late reven.

Stor tekst (24 px)

Stor fet tekst (18,66 px fet)

Knapp

Forslag

Mål

Nærmeste tekstfarge som består

–

Nærmeste bakgrunnsfarge som består

–

Slik bruker du kontrastsjekkeren

Skriv inn Tekstfarge og Bakgrunnsfarge. Bruk fargeprøvene, eller skriv en hvilken som helst CSS-verdi i feltene: en HEX-kode som #595959, rgb(89 89 89), hsl(0 0% 35%) eller et navn som navy.
Kontrastforhold oppdateres mens du skriver, fra 1:1 (ingen kontrast) til 21:1 (svart på hvitt).
Tabellen WCAG 2.2-resultater viser Bestått eller Ikke bestått for Vanlig tekst, Stor tekst og Grensesnittelementer og grafikk, på nivåene AA og AAA.
Se på Forhåndsvisning: den viser vanlig tekst, stor tekst, stor fet tekst, omrisset til en knapp og et ikon i de to fargene dine.
Hvis et nivå ikke består, velger du et Mål under Forslag. Verktøyet foreslår Nærmeste tekstfarge som består og Nærmeste bakgrunnsfarge som består. Klikk på Bruk for å bruke ett av forslagene. Bytt farger bytter om tekst og bakgrunn.

Alt beregnes i nettleseren din. Ingenting du skriver inn, sendes til en server.

Slik regnes kontrastforholdet ut

WCAG 2.x definerer forholdet som (L1 + 0,05) / (L2 + 0,05), der L1 er den relative luminansen til den lyseste fargen og L2 til den mørkeste. Relativ luminans regnes ut fra linearisert sRGB: hver kanal dekodes med sRGB-overføringskurven, deretter er L = 0,2126 R + 0,7152 G + 0,0722 B. Grønt veier mest fordi øynene våre er mest følsomme for det, og derfor ser rent grønt mye lysere ut enn rent blått med samme «styrke».

Forholdet blir aldri rundet opp. #777777 på hvitt gir omtrent 4,48:1 og består ikke AA for vanlig tekst, selv om det ser ut som «4,5». Dette verktøyet kutter den viste verdien til to desimaler, slik at det du ser, er det WCAG kontrollerer.

Hvis tekstfargen er delvis gjennomsiktig (for eksempel rgb(0 0 0 / 60%)), blandes den først med bakgrunnen, slik nettleseren ville tegnet den. Gjennomsiktighet i bakgrunnsfargen ignoreres, fordi man ikke vet hva som ligger bak siden.

WCAG-nivåene i korte trekk

Innhold	AA	AAA
Vanlig tekst	4,5:1	7:1
Stor tekst (24 px, eller 18,66 px fet)	3:1	4,5:1
Grensesnittelementer og meningsbærende grafikk	3:1	–

«Stor tekst» betyr minst 18 pt (24 CSS-piksler), eller 14 pt fet (omtrent 18,66 px). Logoer og rent dekorativ tekst har ingen krav. Regelen om 3:1 for grensesnittelementer (suksesskriterium 1.4.11) gjelder kanter på inndatafelt og knapper, fokusindikatorer, ikoner og diagramlinjer som brukerne må kunne se.

Slik fungerer forslagene

De foreslåtte fargene beholder fargetonen og kromaen til fargen din i OKLCH-rommet og endrer bare lysheten, mørkere eller lysere, til målforholdet er nådd. Verktøyet velger deretter den av de to retningene som visuelt ligger nærmest den opprinnelige fargen, målt i OKLab. Resultatet kontrolleres på nytt etter avrunding til en HEX-kode, så det består faktisk. Hvis ingen lyshet kan nå målet (for eksempel 7:1 mot en middels grå), sier verktøyet fra om det.

Om APCA

APCA (Accessible Perceptual Contrast Algorithm) er en nyere kontrastmodell som vurderes for en fremtidig WCAG 3. Den tar hensyn til skriftvekt, størrelse og polaritet (mørkt på lyst mot lyst på mørkt). Den er fortsatt et utkast og ikke et juridisk eller normativt krav, så dette verktøyet rapporterer WCAG 2.x-resultater, som fortsatt er referansen for den europeiske standarden for universell utforming EN 301 549, Section 508 og de fleste lover.

Ofte stilte spørsmål

Hvilket kontrastforhold trenger jeg til brødtekst?

Minst 4,5:1 for nivå AA, som er nivået de fleste lover og retningslinjer krever. Sikt mot 7:1 (AAA) for lengre lesing eller for brukere med nedsatt syn.

Består hvit tekst på merkevarefargen min?

Skriv inn hvitt som tekstfarge og merkevarefargen som bakgrunn. Mange blå, oransje og grønne mellomtoner når bare 3:1: greit for store overskrifter og knapper med store etiketter, men ikke for liten tekst. Bruk den foreslåtte bakgrunnsfargen hvis du trenger AA for vanlig tekst.

Hvorfor endrer ikke rekkefølgen på fargene forholdet?

Formelen deler alltid den lyseste luminansen på den mørkeste, så mørkt på lyst og lyst på mørkt gir samme forhold. Den opplevde kontrasten kan likevel avvike litt, og det er et av problemene APCA prøver å løse.

Er 4,49:1 nær nok til å bestå?

Nei. WCAG-grensene er strenge minstekrav: 4,49:1 består ikke AA for vanlig tekst. Bruk forslaget for å få en farge som faktisk består.

Fungerer kontrastsjekkeren for plassholdertekst eller deaktivert tekst?

Plassholdertekst må oppfylle samme minstekrav på 4,5:1 når den gir informasjon. Deaktiverte kontroller er unntatt fra kontrastkravene, men lesbare deaktiverte tilstander hjelper likevel brukerne.