tigtools

Kontrastsjekker

Skriv inn en tekstfarge og en bakgrunnsfarge for å se WCAG-kontrastforholdet, hvilke nivåer som består, og en sanntidsforhåndsvisning.

Kjører i nettleseren din Ingen registrering

Kontrastforhold

4.47:1

KravKreverResultat
AA, normal tekst4.5:1Ikke bestått
AA, stor tekst3:1Bestått
AAA, normal tekst7:1Ikke bestått
AAA, stor tekst4.5:1Ikke bestått
UI-komponenter og grafikk3:1Bestått

Stor tekst betyr minst 24px (18pt) vanlig eller 18.66px (14pt) fet.

Forhåndsvisning

Normal tekst ved 16px. Den raske brune reven hopper over den late hunden.

Liten tekst ved 14px er vanskeligere å lese med lav kontrast.

Stor tekst ved 24px

Fet tekst ved 18.66px (14pt)

Knapp

Nærmeste godkjente tekstfarge

Mål
#767676 oppnår 4.54:1 mot denne bakgrunnen.

Gjennomsiktig tekst blandes med bakgrunnen før måling; en gjennomsiktig bakgrunn blandes med hvitt.

Slik bruker du det

  1. Skriv inn tekstfargen (forgrunn) og bakgrunnsfargen som HEX, rgb(), hsl() eller et annet CSS-format, eller bruk fargevelgerne.
  2. Les av kontrastforholdet og om hvert WCAG-krav er bestått eller ikke.
  3. Hvis et krav ikke er bestått, velger du et mål og bruker den foreslåtte fargen, som beholder fargetonen og bare endrer lysheten.
  4. Bruk «Bytt» for å sjekke den omvendte kombinasjonen, for eksempel lys tekst på en mørk knapp.

Slik fungerer det

Kontrastforholdet følger WCAG 2.2-definisjonen: hver farges relative luminans beregnes ut fra sRGB-kanalene, og forholdet er (lysere + 0,05) ÷ (mørkere + 0,05). Det varierer fra 1:1 (like farger) til 21:1 (svart på hvitt).

Krav som sjekkes: suksesskriterium 1.4.3 (AA) krever 4,5:1 for normal tekst og 3:1 for stor tekst; 1.4.6 (AAA) krever 7:1 og 4,5:1; 1.4.11 krever 3:1 for deler av brukergrensesnittet og meningsfull grafikk som rammer rundt inndatafelt og ikoner. Stor tekst er minst 24px normal eller omtrent 18,66px fet. WCAG tillater ikke å runde opp, så 4,49:1 består ikke AA selv om det er nært; forholdet som vises her er avkortet, ikke avrundet.

Forslaget beholder tekstfargens fargetone og kroma i OKLCH og søker etter den nærmeste lysheten, mørkere eller lysere, som oppfyller målet. Kontrastforholdet er én del av lesbarheten: skriftvekt, størrelse og forskjeller i fargesyn har også betydning, og WCAG 2.2 er den gjeldende W3C-anbefalingen som de fleste tilgjengelighetslover viser til.

Eksempler

Grå tekst som nesten oppfyller kravet

#777777 på hvitt gir 4,48:1. Det oppfyller kravene for stor tekst og UI-komponenter, men oppfyller ikke AA for normal tekst. Den nærmeste gråfargen som oppfyller kravet, er omtrent #767676, som når 4,54:1.

Hvit tekst på en merkevareknapp

Hvitt på #ff8800 gir omtrent 2,4:1, som ikke engang oppfyller 3:1-nivået for stor tekst. Å gjøre orangen mørkere eller bruke mørk tekst i stedet er vanlige løsninger; forslaget viser hvor mørk tekstfargen måtte være.

Sjekke kanten på et skjemafelt

En lys grå kant #cccccc på hvitt er omtrent 1,6:1. I henhold til kriterium 1.4.11 må kanten som identifiserer et inndatafelt ha 3:1, så noe rundt #949494 eller mørkere er nødvendig.

Ofte stilte spørsmål

Hvilket kontrastforhold trenger jeg for WCAG AA?

4,5:1 for normal brødtekst, 3:1 for stor tekst (24px, eller 18,66px fet) og 3:1 for UI-komponenter og meningsfull grafikk. AAA hever kravet for tekst til 7:1 og for stor tekst til 4,5:1.

Må logotekst eller tekst på deaktiverte knapper oppfylle kravene?

Nei. WCAG unntar tekst i logoer og merkenavn, rent dekorativ tekst og tekst i inaktive (deaktiverte) brukergrensesnittkomponenter.

Hvorfor avviker resultatet mitt litt fra en annen kontrastsjekker?

Noen verktøy runder forholdet til én desimal eller runder opp. WCAG sammenligner den nøyaktige verdien, så dette verktøyet avkorter til to desimaler. Små forskjeller kan også komme av farger som er oppgitt med alfakanal.

Hva med den nye APCA-kontrastmetoden?

APCA er en annen metode som er foreslått for en fremtidig WCAG-versjon. Den er ikke en del av WCAG 2.2, som er det dette verktøyet måler og det gjeldende tilgjengelighetsregelverket viser til.

Personvern

Fargene sjekkes i nettleseren din. Ingenting lastes opp eller lagres.