Fargekontrastkontroll

Sjekk fargene dine

Test fargekombinasjoner for å sikre at de oppfyller WCAG-tilgjengelighetsstandarder for tekstlesbarhet.

1.00:1

Kontrast

Ikke bestått

Veldig dårlig

Vanlig tekst

AA (4.5:1)

AAA (7:1)

Stor tekst

AA (3:1)

AAA (4.5:1)

Tekstfarge

Bakgrunnsfarge

Raske løsninger

Forhåndsvisningstittel

Den raske brune reven hopper over den late hunden

Eksempel på liten tekst (12px)

Tekst

#ffffff

Bakgrunn

#e57000

WCAG-standarder

Nivå AA

Minimum kontrastforhold på 4.5:1 for normal tekst og 3:1 for stor tekst. Kreves for de fleste nettsteder.

Nivå AAA

Forbedret kontrastforhold på 7:1 for normal tekst og 4.5:1 for stor tekst. Anbefalt for optimal tilgjengelighet.

Utilstrekkelig kontrast for alle tekststørrelser - oppfyller ikke WCAG-standarder.

Beregn kontrastforholdet mellom tekst- og bakgrunnsfarger.

Velg en farge ved å bruke fargevelgeren for tekst- og bakgrunnsfarge eller skriv inn en RGB-hexadecimal farge (f.eks. #259 eller #2596BE). Du kan justere skyveknappen for å velge farge. Web Content Accessibility Guidelines (WCAG) har en spesifikk retningslinje for å sikre at tekst er leselig for seende brukere. Dette kriteriet bruker en spesiell algoritme for å kartlegge fargekombinasjoner til sammenlignbare forhold. Ved å bruke denne formelen sier WCAG at et 4.5:1 fargekontrastforhold med tekst og bakgrunn er tilstrekkelig for vanlig (brød)tekst, og stor tekst (18+ pt vanlig, eller 14+ pt fet) bør ha minst et 3:1 fargekontrastforhold.

Nøkkelfunksjoner

Sanntidsberegning av kontrastforhold
WCAG AA & AAA samsvarssjekk
HSL-glidere for finjustering
Flere forhåndsvisningsformater

Avanserte verktøy

Automatisk fargekorrigering
Tekst- og bakgrunnsprøver
Fargenavngjenkjenning
Eksporter resultater

Ofte stilte spørsmål

For WCAG AA-samsvar må vanlig tekst ha et kontrastforhold på minst 4,5:1, mens stor tekst (18pt eller 14pt fet) må ha 3:1.

WCAG AAA krever høyere kontrastforhold: 7:1 for vanlig tekst og 4,5:1 for stor tekst, mot 4,5:1 og 3:1 for AA.

Bruk den automatiske rettingen for å justere tekst- eller bakgrunnsfarger uten å endre designet, eller juster fargene manuelt med HSL-glidere som viser optimale områder for AA- og AAA-samsvar.

De grønne sonene og AA- og AAA-markørene viser optimale områder for WCAG-samsvar. Retningshintene (Lysere/Mørkere) viser deg hvilken vei du bør gå for bedre kontrast, basert på fargekombinasjonen din.

Ja, du kan skrive inn hex-koder for alle farger eller bruke fargevelgeren til å velge egne farger. Nettadressen oppdateres automatisk, så du kan dele bestemte fargekombinasjoner.