Contrast Checker beregner WCAG 2.1-kontrastforholdet mellom to farger og karaktersetter dem mot AA/AAA-terskler for både normal og stor tekst. Live forhåndsvisning viser tekst gjengitt i de valgte fargene, og en «hent sidebakgrunn»-knapp henter fargen fra gjeldende side.
Tilgjengelighet er i økende grad et krav — WCAG-samsvar er et lovkrav i mange jurisdiksjoner, og selv der det ikke er det, skremmer dårlig kontrast bort brukere. Contrast Checker forteller deg umiddelbart om to farger oppfyller WCAG-standardene. Velg en forgrunns- og bakgrunnsfarge via fargevelgeren eller lim inn hex-verdier; verktøyet beregner kontrastforholdet med den offisielle WCAG-luminansformelen og karaktersetter det mot fire terskler: AA normal (≥4,5:1), AA stor (≥3:1), AAA normal (≥7:1) og AAA stor (≥4,5:1). Hver terskel viser et tydelig Bestått/Ikke bestått-merke. En live forhåndsvisning gjengir stor og normal tekst i de valgte fargene slik at du kan se den faktiske visuelle virkningen. En bekvem knapp henter bakgrunnsfargen fra gjeldende sides body — nyttig når du sjekker om en fargekombinasjon på et ekte nettsted består. Alt kjører lokalt i nettleseren din, ingen opplastinger.
Bruker den offisielle WCAG-luminansformelen for å beregne kontrastforholdet. Resultatet er eksakt og samsvarer med enhver godkjent tilgjengelighetssjekker.
Bestått/ikke bestått for AA normal (≥4,5:1), AA stor (≥3:1), AAA normal (≥7:1), AAA stor (≥4,5:1) — alt vist som et rutenett.
Gjengir faktisk stor og normal tekst i de valgte fargene, slik at du ser den visuelle virkningen sammen med det numeriske forholdet.
Ett klikk henter den beregnede body-bakgrunnsfargen fra gjeldende side — nyttig for å teste virkelighetsnære kombinasjoner.
Skriv inn en hex-verdi eller bruk den innebygde fargevelgeren. Verdiene synkroniseres begge veier etter hvert som du redigerer.
Ett klikk bytter forgrunn og bakgrunn — nyttig når du sjekker inverterte temaer eller hover-tilstander.
Før du ferdigstiller en fargepalett, sjekk hver tekstfarge mot bakgrunnen for å sikre WCAG AA-samsvar — unngår omarbeid senere.
Bruk «hent sidebakgrunn» på et live nettsted, lim deretter inn den faktiske tekstfargen — finn a11y-brudd på minutter uten å åpne Lighthouse.
Når en merkevare velger en farge som kan feile a11y, bruk sjekkeren til å finne den nærmeste kompatible varianten (mørkere/lysere nyanse).
Verifiser at farger for hover-, aktiv- og deaktivert-tilstander fortsatt oppfyller kontrastkravene, ikke bare standardtilstanden.
Mørke temaer feiler ofte kontrast for grå-på-grå-tekst. Sjekk de mørkeste gråtonene dine mot de mørkeste bakgrunnene dine for å fange dette.
Klikk på Kontrast-ikonet i DevSuite Pro-dokken. Et panel åpnes med felt for forgrunns- og bakgrunnsfarge.
Bruk fargevelgeren eller lim inn en hex-verdi for hver. Live forhåndsvisning oppdateres etter hvert som du endrer farger.
Det store tallet (f.eks. 4,8:1) er kontrastforholdet. Høyere er bedre. 3 er det absolutte minimum; 4,5 er målet for normal tekst.
Bestått/ikke bestått-merker for AA og AAA, normal og stor tekststørrelse, viser med ett blikk hva kombinasjonen din kvalifiserer til.
Hvis kombinasjonen feiler, juster fargene. Gjør forgrunnen mørkere eller bakgrunnen lysere (eller omvendt) til ønsket nivå viser Bestått.
Installer DevSuite Pro gratis og lås opp 64+ utviklerverktøy for nettleseren din.
