Contrast Checker beregner WCAG 2.1-kontrastforholdet mellem to farver og bedømmer dem mod AA/AAA-tærskelværdier for både normal og stor tekst. Live forhåndsvisning viser tekst gengivet i de valgte farver, og en "vælg sidebaggrund"-knap indsamler farven fra den aktuelle side.
Tilgængelighed er i stigende grad et krav — WCAG-overensstemmelse er et lovkrav i mange jurisdiktioner, og selv hvor det ikke er, skubber dårlig kontrast brugere væk. Contrast Checker fortæller dig øjeblikkeligt, om to farver opfylder WCAG-standarder. Vælg en forgrunds- og baggrundsfarve via farvevælgeren eller indsæt hex-værdier; værktøjet beregner kontrastforholdet med den officielle WCAG-luminansformel og bedømmer det mod fire tærskelværdier: AA normal (≥4,5:1), AA stor (≥3:1), AAA normal (≥7:1) og AAA stor (≥4,5:1). Hver tærskelværdi vises med et tydeligt Pass/Fail-mærke. En live forhåndsvisning gengiver stor og normal tekst i de valgte farver, så du kan se den faktiske visuelle effekt. En bekvem knap indsamler den aktuelle sides beregnede body-baggrundsfarve — nyttigt når du vil tjekke, om en farvekombination på et rigtigt website består. Alt kører lokalt i din browser, ingen upload.
Bruger den officielle WCAG-luminansformel til at beregne kontrastforholdet. Resultatet er præcist og matcher enhver kompatibel tilgængelighedstjekker.
Pass/fail for AA normal (≥4,5:1), AA stor (≥3:1), AAA normal (≥7:1), AAA stor (≥4,5:1) — vist som et gitter.
Gengiver rigtig stor og normal tekst i dine valgte farver, så du kan se den visuelle effekt sammen med det numeriske forhold.
Ét klik indsamler den aktuelle sides beregnede body-baggrundsfarve — nyttigt til at teste virkelige kombinationer.
Skriv en hex-værdi, eller brug den native farvevælger. Værdierne synkroniseres begge veje, mens du redigerer den ene eller den anden.
Ét klik bytter forgrund og baggrund om — nyttigt når du tjekker inverterede temaer eller hover-tilstande.
Før du fastlåser en farvepalet, kan du tjekke hver tekstfarve mod dens baggrund for at sikre WCAG AA-overensstemmelse — undgår omarbejde senere.
Brug "vælg sidebaggrund" på et live website, og indsæt derefter den faktiske tekstfarve — find a11y-overtrædelser på få minutter uden at åbne Lighthouse.
Når et brand vælger en farve, der muligvis fejler a11y-tjek, kan du bruge checkeren til at finde den nærmeste kompatible variant (mørkere/lysere nuance).
Verificér at farver for hover-, aktive og deaktiverede tilstande stadig opfylder kontrastkravene, ikke kun standardtilstanden.
Mørke temaer fejler ofte kontrast for gråt-på-gråt tekst. Tjek dine mørkeste grå nuancer mod dine mørkeste baggrunde for at fange disse.
Klik på Contrast-ikonet i DevSuite Pro-dokken. Et panel åbner med felter til forgrunds- og baggrundsfarve.
Brug farvevælgeren, eller indsæt en hex-værdi for hver. Live forhåndsvisning opdateres, når du ændrer farverne.
Det store tal (f.eks. 4,8:1) er kontrastforholdet. Højere er bedre. 3 er det absolutte minimum; 4,5 er målet for normal tekst.
Pass/fail-mærker for AA og AAA, normal og stor tekststørrelse, viser med det samme, hvad din kombination kvalificerer til.
Hvis den fejler, så justér farverne. Gør forgrunden mørkere eller baggrunden lysere (eller omvendt), indtil den ønskede tærskel viser Pass.
Installer DevSuite Pro gratis og lås op for 64+ udviklerværktøjer til din browser.
