Hvordan sjekker jeg om tekst- og bakgrunnsfargene mine oppfyller WCAG?

Skriv inn heksadesimalkoder i Tekstfarge og Bakgrunnsfarge, eller bruk fargevelgerne. Kontrastforhold vises med Bestått eller Ikke bestått for AA og AAA for normal og stor tekst, i tillegg til UI-komponenter.

Hvilket kontrastforhold krever WCAG AA?

AA krever 4,5:1 for normal tekst og 3:1 for stor tekst. AAA krever 7:1 for normal tekst og 4,5:1 for stor tekst. UI-komponenter og grafiske objekter krever 3:1.

Hva regnes som stor tekst?

Verktøyet regner 18 pt (24 px) vanlig tekst eller 14 pt (18,66 px) fet tekst som stor. Mindre tekst må oppfylle de strengere terskelverdiene for normal tekst.

Fargene mine oppfyller ikke AA. Hvordan fikser jeg dem?

Bruk forslagene Rett tekstfarge eller Rett bakgrunn med ett klikk. De justerer lysheten mens fargetonen beholdes, til paret når 4,5:1.

Hvilke fargeformater godtar den, og kan jeg velge fra skjermen?

Den godtar 3-sifrede og 6-sifrede heksadesimalverdier, for eksempel #abc eller #1e293b. En knapp for Velg farge fra skjermen vises i nettlesere som støtter EyeDropper-API-et, for eksempel Chromium.

Er det virkelig gratis?

Ja. Alle verktøy er gratis å bruke, uten konto og uten kredittkort. Arbeidet utføres på enheten din i stedet for på våre servere, noe som gjør det gratis å kjøre.

Fungerer det på mobil?

Ja. Det fungerer i moderne mobilnettlesere på iOS og Android, uten at du trenger å installere noe.

🌓

Gratis WCAG-fargekontrastkontroll

Sjekk om to farger oppfyller WCAG AA- og AAA-kontrastkravene for tilgjengelighet. Forhåndsvisning i sanntid i flere tekststørrelser med automatiske forslag når kontrasten er for lav.

Kjører i nettleserenIngen registrering, ingen popup-vinduerIngen pålogging krevesGratis for alltid

Fungerer uten nett når den er lastet

Tekstfarge

Bakgrunnsfarge

Stor overskriftstekst

Mellomstor brødtekst (18px) for lesing og innhold.

Normal brødtekst (16px) for avsnitt.

Liten brødtekst (14px) for bildetekster og metadata.

14,63:1

Kontrastforhold

✓WCAG AA — Normal tekst

Krever 4.5:1 · Du har 14,63:1

✓WCAG AA — Stor tekst

Krever 3.0:1 · Du har 14,63:1

✓WCAG AAA — Normal tekst

Krever 7.0:1 · Du har 14,63:1

✓WCAG AAA — Stor tekst

Krever 4.5:1 · Du har 14,63:1

✓UI-komponenter / grafiske objekter

Krever 3.0:1 · Du har 14,63:1

Hurtigvalg

Basert på WCAG 2.1 kontrastretningslinjer. Stor tekst = 18pt (24px) normal eller 14pt (18,66px) fet. Hex-koder oppdateres i begge retninger: skriv en hex-verdi eller velg en farge — begge felt holdes synkronisert.

Vanlige bruksområder

Revisjon av nettsider for WCAG-overholdelseVerifisér at nettstedsfarger oppfyller WCAG AA eller AAA kontraststandard for tilgjengelighet.
Verifisér merkefargekombinajonerTest merkefargekombinasjoner for å sikre at de fungerer for tilgjengelig UI-design.
Test mørkemodus fargepaletterLys tekst på mørk bakgrunn kan fortsatt mislykkes kontrast — sjekk mørkemodus fargeparet ditt her.
Fargepar for trykt materialePlakater, skilt og trykt materiale trenger også lesbar kontrast — spesielt for eldre seere.
Design tilgjengelige knappfargerSikre at CTA-er, handlingsknapper og lenker godkjennes WCAG mot bakgrunnene deres.

Hvordan det fungerer

Kontrastsjekken kjører helt i nettleseren med algoritmen for relativ luminans i WCAG 2.1 — ingen bibliotek, ingen server, bare håndskrevet matematikk som følger spesifikasjonen nøyaktig. Hvert resultat oppdateres i sanntid mens du skriver eller velger en farge.

1
Heksadesimal inndata og normalisering
Både 3-sifrede (#abc) og 6-sifrede (#aabbcc) heksadesimale verdier godtas og normaliseres til fulle RGB-tripler. Ugyldige inndata avvises med en gang i stedet for å falle stille tilbake til svart, så det vises en rød kant i stedet for et misvisende bestått-resultat.
2
WCAG-luminansberegning
Hver farge konverteres til relativ luminans med formelen i WCAG 2.1: sRGB-kanalverdiene lineariseres med en stykkevis gammakorreksjon (deles på 12,92 under 0,03928, opphøyes i 2,4 over), og vektes deretter som 0.2126R + 0.7152G + 0.0722B.
3
Kontrastforhold og samsvarskontroller
Kontrastforholdet beregnes som (lysere + 0,05) / (mørkere + 0,05) og kontrolleres mot alle fem WCAG-tersklene: AA normal tekst (4,5:1), AA stor tekst (3:1), AAA normal tekst (7:1), AAA stor tekst (4,5:1) og UI-komponenter (3:1). Resultatene oppdateres for hvert tastetrykk.
4
Rettingsforslag som bevarer fargetonen
Når paret ikke består WCAG AA, søker verktøyet i HSL-lyshetsrommet — trinnvis utover fra den opprinnelige lysheten i begge retninger — for å finne den nærmeste varianten av hver farge som består 4,5:1 med samme fargetone og metning. EyeDropper-API-et (Chromium) er også tilgjengelig for å hente en farge direkte fra skjermen.

Relaterte verktøy

👁️

Fargeblindhetssimulator

Se hvordan designet ditt ser ut for personer med fargesyn-svakheter. Simulerer protanopi, deuteranopi, tritanopi, akromatopsi og mildere avvik.

Prøv detFiler forblir lokale

📐

Hva er skjermoppløsningen min

Se skjermoppløsningen din i CSS- og reelle piksler, vindusstørrelse, pikselforhold, fargedybde, HDR, berøringsstøtte og oppdateringsfrekvens, og kopier alt.

Prøv det

🖥️

Dødpikseltest

Sjekk skjermen din for døde eller fastlåste piksler med fullskjerms sort, hvitt, rødt, grønt, blått og grått, pluss en valgfri fikser for fastlåste piksler.