Kontrastsjekk – WCAG Kontrastforhold

Sjekk fargekontrast for tilgjengelighet

Fargekontrast er avgjørende for lesbarheten. Når forgrunnstekst ikke har nok kontrast mot bakgrunnen, blir den vanskelig å lese — spesielt for brukere med nedsatt syn eller fargesynsvansker.

Denne kontrastsjekken beregner kontrastforholdet mellom to vilkårlige farger og evaluerer det mot WCAG 2.1-suksesskriterier. Skriv inn farger i HEX, RGB eller HSL-format og få umiddelbare resultater.

Forstå WCAG-kontrastnivåer

Retningslinjene for tilgjengelighet for webinnhold (WCAG) definerer minimumskontrastforhold for tekstlesbarhet. Det finnes to samsvarsnivåer:

• WCAG AA Normal tekst — krever et kontrastforhold på minst 4,5:1
• WCAG AA Stor tekst — krever et kontrastforhold på minst 3:1 (stor tekst er 18pt+ eller 14pt+ fet)
• WCAG AAA Normal tekst — krever et kontrastforhold på minst 7:1
• WCAG AAA Stor tekst — krever et kontrastforhold på minst 4,5:1

AA er standardnivået som de fleste nettsteder og apper sikter mot. AAA er det forsterkede nivået, anbefalt der maksimal lesbarhet er viktig.

Slik bruker du kontrastsjekken

1. Skriv inn en forgrunnsfarge (tekst) — HEX, RGB eller HSL
2. Skriv inn en bakgrunnsfarge i et støttet format
3. Se kontrastforholdet og en direkte forhåndsvisning av tekst på den bakgrunnen
4. Sjekk bestått/ikke bestått-resultatene for WCAG AA og AAA
5. Bruk bytt-knappen for å raskt bytte forgrunn og bakgrunn

Når du bør sjekke fargekontrast

• Når du velger tekst- og bakgrunnsfarger for et nettsted eller en app
• Når du verifiserer at et designsystem oppfyller tilgjengelighetskrav
• Når du tester knapp-, lenke- eller ikonfarger mot bakgrunnene
• Når du sjekker fargekombinasjoner i mørk modus
• Når du skal oppfylle juridiske tilgjengelighetsstandarder (ADA, EAA, Section 508)

Nøyaktig, umiddelbar og gratis

Dette verktøyet beregner WCAG 2.1-kontrastforholdet ved hjelp av standardformelen for relativ luminans. Resultatene beregnes umiddelbart i nettleseren din — ingen data sendes til noen server.

Trenger du å finne eller konvertere en farge først? Bruk Fargevelgeren for å hente farger fra et bilde, eller Fargekonverteren for å konvertere mellom HEX, RGB og HSL.

Ofte stilte spørsmål

Hva er et godt kontrastforhold for tekst?

For brødtekst i normal størrelse kreves et kontrastforhold på minst 4,5:1 for å oppfylle WCAG AA. For stor tekst (18pt eller 14pt fet og oppover) er minimum 3:1. For det høyeste tilgjengelighetsnivået (WCAG AAA) trenger normal tekst minst 7:1.

Hva er forskjellen mellom WCAG AA og AAA?

AA er standard samsvarsnivået som de fleste nettsteder og apper bør oppfylle. AAA er det forsterkede nivået med strengere kontrastkrav, anbefalt for innhold der maksimal lesbarhet er avgjørende, som offentlige eller helserelaterte nettsteder.

Hva regnes som stor tekst i WCAG?

Stor tekst defineres som 18 punkt (24px) eller større ved normal vekt, eller 14 punkt (omtrent 18,66px) eller større ved fet. Stor tekst har lavere kontrastkrav fordi størrelsen gjør den lettere å lese.

Hvilke fargeformater støtter denne sjekken?

Du kan skrive inn farger i HEX (f.eks. #1E293B), RGB (f.eks. rgb(30, 41, 59)) eller HSL (f.eks. hsl(222, 33%, 17%)). Verktøyet oppdager formatet automatisk.

Hvordan beregnes kontrastforholdet?

Kontrastforholdet beregnes med WCAG 2.1-formelen: (L1 + 0,05) / (L2 + 0,05), der L1 er den relative luminansen til den lysere fargen og L2 er den relative luminansen til den mørkere fargen. Resultatet spenner fra 1:1 (ingen kontrast) til 21:1 (maksimal kontrast, svart på hvit).

Fungerer dette verktøyet på mobil?

Ja. Kontrastsjekken fungerer på alle enheter med en moderne nettleser — datamaskin, nettbrett eller telefon.

Er dette verktøyet gratis?

Ja. ColourPicker.app er helt gratis å bruke, uten registrering.

Kan jeg sjekke kontrast for UI-komponenter, ikke bare tekst?

WCAG 2.1 krever også et minimum kontrastforhold på 3:1 for meningsfulle UI-komponenter og grafiske objekter (suksesskriterium 1.4.11). Du kan bruke denne sjekken for å verifisere disse kombinasjonene også — forholdsberegningen er den samme.