Kontrastsjekker

Skriv inn tekst- og bakgrunnsfarge for å se WCAG-kontrastforholdet og hvilke AA- og AAA-nivåer som blir bestått.

—Kontrastforhold
Normal tekstAA4.5:1—
Normal tekstAAA7:1—
Stor tekstAA3:1—
Stor tekstAAA4.5:1—
Grensesnitt og grafikk3:1—
Skriv inn en tekst- og bakgrunnsfarge for å sjekke.

Hver sjekk kjøres i nettleseren din. Ingenting du skriver inn lastes opp til BroBroGo.

Ofte stilte spørsmål

Hva betyr AA- og AAA-resultatene?

AA er nivået de fleste nettsteder sikter mot: det krever et forhold på minst 4,5:1 for normal tekst og 3:1 for stor tekst. AAA er strengere — 7:1 for normal tekst og 4,5:1 for stor tekst. Kontrastforholdet går fra 1:1 (ingen kontrast) til 21:1 (svart på hvitt).

Hva regnes som stor tekst?

Tekst fra 18pt (ca. 24px), eller 14pt (ca. 18,5px) når den er fet. Større tekst er lettere å lese med lavere kontrast, så den består AA ved 3:1 og AAA ved 4,5:1 i stedet for de strengere kravene til normal tekst.

Hvilke fargeformater kan jeg skrive inn?

Skriv inn en hex-verdi som #1a1a1a, en rgb()-verdi som rgb(26, 26, 26), eller en hsl()-verdi — eller klikk på en av fargeprøvene for å velge farge. Bruk knappen for å bytte om på tekst- og bakgrunnsfarge.

Er dette WCAG 2 eller den nyere APCA-metoden?

Den bruker formelen fra WCAG 2.1 / 2.2, som er den gjeldende standarden for universell utforming og revisjoner i dag. APCA er en nyere, mer persepsjonsbasert metode som utvikles for WCAG 3 — lovende, men ikke en formell standard ennå, så resultatene her bruker den ikke.

Skrevet og gjennomgått av BroBroGo-redaksjonen.Sist oppdatert:

WCAG 2.1 og 2.2 retningslinjer for kontrast

Universell utforming av nettløsninger krever at tekst og visuelle elementer har tilstrekkelig kontrast mot bakgrunnen. Kontrastsjekkeren beregner kontrastforholdet basert på formelen i WCAG 2.1 / 2.2, som er den gjeldende standarden for samsvar og revisjoner i dag.

Kontrastforholdet uttrykkes som et forholdstall fra 1:1 til 21:1. Forholdet 1:1 representerer ingen kontrast (for eksempel hvit tekst på hvit bakgrunn), mens 21:1 representerer maksimal kontrast med svart tekst på hvit bakgrunn. Verktøyet starter med standardverdiene #4f46e5 for tekstfarge og #ffffff for bakgrunnsfarge, noe som gir et kontrastforhold på 6,29:1.

Forskjellen mellom AA- og AAA-nivåer

Retningslinjene i WCAG opererer med ulike samsvarsnivåer for å definere hvor tilgjengelig innholdet er:

  • AA-nivået: Dette er minstekravet de fleste nettsteder og de fleste nettsteder sikter mot. For normal tekst kreves et kontrastforhold på minst 4,5:1. For stor tekst er kravet minst 3:1.
  • AAA-nivået: Dette er det strengeste nivået for tilgjengelighet. For å oppnå AAA-status må normal tekst ha et kontrastforhold på minst 7:1, mens stor tekst må ha et forhold på minst 4,5:1.

Definisjon av normal tekst versus stor tekst

Tekststørrelsen har direkte betydning for hvor lett den er å lese, og WCAG skiller derfor kravene basert på dimensjonene:

  • Stor tekst: Defineres som tekst fra 18pt (omtrent 24px), eller fra 14pt (omtrent 18,5px) dersom teksten er fet. Fordi større og fetere skrift er enklere å oppfatte, tillater retningslinjene lavere kontrastverdier for disse størrelsene (3:1 for AA og 4,5:1 for AAA).
  • Normal tekst: All tekst som faller under grensene for stor tekst. Denne teksten krever høyere kontrast (4,5:1 for AA og 7:1 for AAA) for å sikre god lesbarhet.

Kontrast for grensesnitt og grafikk

Det er ikke bare ren brødtekst som må være synlig. WCAG stiller også krav til ikke-tekstlig innhold. Raden for grensesnitt og grafikk i verktøyet vurderer kontrasten for aktive grensesnittkomponenter (som rammer rundt skrivefelt eller knapper) og grafiske objekter.

Dette elementet skiller seg fra tekstvurderingene ved at det kun opererer med én enkelt grenseverdi på 3:1. Det er ingen oppdeling i AA- og AAA-nivåer for denne kategorien; verktøyet gir ett enkelt resultat basert på om fargekombinasjonen oppnår det nødvendige minimumskravet.

Fargeformater og feilhåndtering i praksis

Verktøyet støtter tre vanlige fargeformater for både tekstfarge og bakgrunnsfarge:

  • Hex-verdier: For eksempel #1a1a1a.
  • RGB-verdier: For eksempel rgb(26, 26, 26).
  • HSL-verdier.

Dersom du skriver inn en verdi som ikke gjenkjennes av systemet, vil verktøyet vise spesifikke feilmeldinger. Hvis tekstfargen er ugyldig, vises meldingen: "Skriv inn en gyldig tekstfarge, som #1a1a1a or rgb(26, 26, 26).". Hvis bakgrunnsfargen er ugyldig, vises meldingen: "Skriv inn en gyldig bakgrunnsfarge, som #ffffff eller rgb(255, 255, 255).".

Med den innebygde knappen for å bytte om på fargene kan du raskt snu om på tekstfarge og bakgrunnsfarge for å teste omvendt kontrast.

Tolking av resultater og personvern

Når du legger inn fargene, beregner verktøyet kontrastforholdet og viser om kombinasjonen gir "Bestått" eller "Ikke bestått" for de ulike kategoriene. Den samlede vurderingen oppsummeres i en av følgende meldinger:

  • "Består AA og AAA for normal tekst."
  • "Består AA for normal tekst."
  • "Består AA kun for stor tekst."
  • "Under AA-minimum — øk kontrasten."

Når det gjelder datasikkerhet, kjøres hver sjekk lokalt i nettleseren din. Ingenting du skriver inn av fargekoder eller verdier lastes opp til BroBroGo.

Ofte stilte spørsmål

Hva betyr AA- og AAA-resultatene?
AA er nivået de fleste nettsteder sikter mot: det krever et forhold på minst 4,5:1 for normal tekst og 3:1 for stor tekst. AAA er strengere — 7:1 for normal tekst og 4,5:1 for stor tekst. Kontrastforholdet går fra 1:1 (ingen kontrast) til 21:1 (svart på hvitt).

Hva regnes som stor tekst?
Tekst fra 18pt (ca. 24px), eller 14pt (ca. 18,5px) når den er fet. Større tekst er lettere å lese med lavere kontrast, så den består AA ved 3:1 og AAA ved 4,5:1 i stedet for de strengere kravene til normal tekst.

Hvilke fargeformater kan jeg skrive inn?
Skriv inn en hex-verdi som #1a1a1a, en rgb()-verdi som rgb(26, 26, 26), eller en hsl()-verdi — eller klikk på en av fargeprøvene for å velge farge. Bruk knappen for å bytte om på tekst- og bakgrunnsfarge.

Er dette WCAG 2 eller den nyere APCA-metoden?
Den bruker formelen fra WCAG 2.1 / 2.2, som er den gjeldende standarden for universell utforming og revisjoner i dag. APCA er en nyere, mer persepsjonsbasert metode som utvikles for WCAG 3 — lovende, men ikke en formell standard ennå, så resultatene her bruker den ikke.

FargekonvertererKonverter farger mellom HEX, RGB, HSL, HSV, CMYK og LAB — rediger et felt og resten oppdateres fortløpende.Fargevelger fra bildeVelg en hvilken som helst piksel fra et bilde og les av HEX, RGB og HSL, med et forstørrelsesglass for nøyaktig fargehenting.Konverter bildeformatKonverter JPG-, PNG-, WebP-, HEIC- og AVIF-bilder direkte i nettleseren din.Kalkulator for bildeforholdGjør om enhver bredde × høyde til et rent bildeforhold som 16:9, eller velg et forhold og beregn den manglende siden – for både video, bilder og skjermer.Box Shadow-generatorDra i glidebryterne for å forme en box-shadow, stable lag for dybde, og kopier den ferdige CSS-koden umiddelbart.Gradient-generatorBygg en lineær, radial eller konisk gradient, legg til fargepunkter og angi retning, og kopier deretter CSS-koden med ett klikk.Testverktøy for skjermSjekk hvilken som helst skjerm med testmønstre i fullskjerm – døde piksler, lyslekkasje, banding, gamma, ghosting, oppdateringsfrekvens og mer.