WCAG-kontrastsjekker — gratis online verktøy

Hva er WCAG-kontrastsjekker?

Gratis online WCAG-kontrastsjekker. Skriv inn forgrunns- og bakgrunnsfarge, sjekk samsvar med WCAG 2.1 AA og AAA. Inkluderer forhåndsdefinerte fargepar og sanntidsforhåndsvisning.

Fargekontrast er et av de mest oversette aspektene ved nettilgjengelighet, likevel påvirker det direkte om millioner av brukere kan lese innholdet ditt. WCAG (Web Content Accessibility Guidelines) 2.1 definerer spesifikke kontrastforhold for tekst- og bakgrunnsfarger for å sikre lesbarhet for brukere med nedsatt syn, fargeblindhet eller visningsforhold som sterkt sollys. Color Contrast Checker måler enhver forgrunns-/bakgrunnsfargekombinasjon mot disse standardene og forteller deg umiddelbart om den består eller mislykkes.

Skriv inn farger med HEX-fargevelgeren eller skriv hex-verdier direkte. Verktøyet beregner kontrastforholdet — et tall mellom 1:1 (ingen kontrast) og 21:1 (maksimal kontrast, svart på hvitt). Resultatet sammenlignes mot fire WCAG-terskler: AA vanlig tekst (4,5:1), AA stor tekst (3:1), AAA vanlig tekst (7:1) og AAA stor tekst (4,5:1). Hver terskel viser en tydelig bestått/mislyktes-indikator, så du vet nøyaktig hvilke standarder fargeparet ditt oppfyller.

Et live-forhåndsvisningspanel viser eksempeltekst gjengitt med de valgte fargene dine, og gir deg en visuell sjekk sammen med den numeriske analysen. Dette er viktig fordi noen fargekombinasjoner som består matematisk, fortsatt kan føles ubehagelige å lese (eller omvendt). Åtte forhåndsinnstilte fargepar er inkludert for vanlige scenarioer — mørk modus, lys modus, lenkefarger og varselsmerker — slik at du raskt kan teste kombinasjoner fra den virkelige verden.

Verktøyet håndterer også kantsaker. Hvis fargene er for like, faller forholdet under 3:1 og alle sjekkene mislykkes — et sterkt signal om at paret er ubrukelig for tekst. Hvis du tester ikke-tekstuelle elementer som ikoner eller skjemakanter, er WCAG-kravene til ikke-tekstkontrast mer lemplige (minimum 3:1), noe denne kontrolløren kan hjelpe deg med å vurdere visuelt selv om primærtersklene retter seg mot tekst.

Praktiske bruksområder for WCAG-kontrastsjekker

Sikre tekstlesbarhet på en landingsside

Designeren din valgte lys grå tekst (#999) på hvit bakgrunn for hero-seksjonen. Test den her: forholdet er omtrent 2,8:1 — det mislykkes for WCAG AA for alle tekststørrelser. Juster forgrunnen til en mørkere grå (#595959) og test på nytt til den består AA for vanlig tekst (4,5:1+). Direkteforhåndsvisningen bekrefter lesbarheten på et blunk.

Validere fargeordninger for mørk modus

Et mørk modus-grensesnitt bruker hvit tekst på en mørk blå bakgrunn. Test kombinasjonen: hvit (#FFFFFF) på marineblå (#0A1628) gir vanligvis et forhold over 10:1, som enkelt består AAA. Imidlertid kan lenkefargen i mørk modus være for subtil — test den blå lenken din (#4A90D9) på samme mørke bakgrunn for å verifisere at den oppfyller minst AA for stor tekst.

Velge tilgjengelige farger for knapper og merker

Varselsmerket ditt bruker hvit tekst på rød bakgrunn. Test den eksakte rødfargen — ikke alle rødfarger består kontrastkravene. En lys rød (#E53E3E) med hvit tekst består vanligvis AA for stor tekst, men kan mislykkes for små merkeetiketter. Juster rødfargen og test på nytt til merket er både merkevareriktig og tilgjengelig.

Hvorfor bruke WCAG-kontrastsjekker?

Overholder WCAG AA/AAA-retningslinjer
Bestått/ikke-bestått-indikatorer med nødvendige forhold
8 forhåndsinnstilte fargepar for vanlige scenarioer

Slik bruker du WCAG-kontrastsjekker — Steg for steg

Skriv inn forgrunns- og bakgrunnsfarger.

Juster til alle kontroller er bestått.

Bruk forhåndsinnstillinger for vanlige scenarioer.

Hvem er WCAG-kontrastsjekker best for?

web-tilgjengelighet
UI-design
regeloverholdelse

Profftips for WCAG-kontrastsjekker

1Design for AA-overholdelse som minimumsstandard. AAA er ideelt, men ikke påkrevd for alt innhold — reserver AAA for kontekster med langtekstlesing der lesbarheten er kritisk.
2Stor tekst (18px+ vanlig eller 14px+ fet) har et lavere kontrastkrav (3:1 for AA). Bruk dette til din fordel for overskrifter, knapper og etiketter som kan styles større.
3Stol aldri på farge alene for å formidle informasjon. Selv med bestått kontrast trenger brukere med fargeblindhet tilleggssignaler som ikoner, understreking eller etiketter for å skille tilstander.
4Test fargepar tidlig i designprosessen i stedet for etter utvikling. Å fikse kontrastproblemer i CSS er enkelt; å fikse dem etter at en merkevarefarge er ferdigstilt er mye vanskeligere.

WCAG-kontrastsjekker — Ofte stilte spørsmål

What is WCAG 2.1 AA compliance?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

What is the difference between AA and AAA?

AAA is a higher standard requiring 7:1 for normal text and 4.5:1 for large text. AAA is not required for all content but is recommended where possible.

Will the generated CSS work in all browsers?

The CSS generators produce W3C-standard code that works in Chrome, Firefox, Safari, and Edge. Vendor prefixes are included where needed for older browser versions.

Can I copy the generated code directly?

Yes. Each generator provides a copy button that places the code on your clipboard. The code is ready to paste into your project — no cleanup or modification needed.

Is WCAG-kontrastsjekker really free to use?

Yes, WCAG-kontrastsjekker is completely free with no hidden charges, no usage limits, and no premium tiers. You can use it as often as you need without signing up or providing any personal information.

Klar til å bruke WCAG-kontrastsjekker?

Gratis onlineverktøy — fungerer i nettleseren din, ingen registrering nødvendig. Begynn å bruke det nå.

Prøv det nå