WCAG-kontrastsjekker

Sjekk kontrastforholdet mellom to farger og se om det består WCAG AA og AAA, direkte i nettleseren din.

Slik bruker du verktøyet

Angi tekstfargen og bakgrunnsfargen — bruk de innebygde velgerne eller skriv inn en hvilken som helst hex-verdi.
Les av kontrastforholdet og AA/AAA-merkene for vanlig tekst, stor tekst og grensesnittkomponenter, med en levende forhåndsvisning gjengitt i fargene du valgte.
Hvis det ikke består AA, klikker du «Bruk forslag» for å hoppe til den nærmeste tekstfargen som består. Ingenting lastes opp — sjekken kjører i nettleseren din.

Om dette verktøyet

Kontrastforhold er tallet WCAG bruker for å avgjøre om tekst er lesbar. Det sammenligner den relative luminansen til to farger på en skala fra 1:1 (identiske) til 21:1 (rent svart på rent hvitt). På nivå AA krever WCAG minst 4,5:1 for vanlig tekst og 3:1 for stor tekst; nivå AAA hever dette til 7:1 og 4,5:1. Grensesnittkomponenter — ikonknapper, feltrammer, fokusmarkeringer — trenger 3:1 mot det som ligger ved siden av dem.

Matematikken er ikke en enkel forskjell i lysstyrke. Hver sRGB-kanal lineariseres først: delt på 12,92 under terskelen 0,03928, ellers normalisert og opphøyd i 2,4. Dette steget finnes fordi skjermverdier er gammakodet og ikke er proporsjonale med utsendt lys. De lineære kanalene vektes deretter med 0,2126 for rødt, 0,7152 for grønt og 0,0722 for blått, noe som gjenspeiler hvor mye hver primærfarge bidrar til opplevd lysstyrke — grønt dominerer med god margin. Til slutt går de to luminansene inn i (L1 + 0,05) / (L2 + 0,05), der leddet 0,05 modellerer lyset en ekte skjerm reflekterer selv mens den viser svart. Den konstanten er grunnen til at svart på hvitt er nøyaktig 21:1 og ikke uendelig.

Bruk den før du lanserer, for merkevarepaletter stryker oftere enn folk tror. En mellomgrå som #777777 på hvitt lander på 4,48:1 — behagelig på en lys skjerm, én hundredel unna AA-terskelen, og et reelt problem på en mobil i sollys. Forslagsknappen sikter nettopp mot det tilfellet: den beveger tekstfargens HSL-lyshet opp og ned i steg på en halv prosent og stopper ved den første verdien som når 4,5:1, samtidig som fargetonen og metningen du valgte beholdes. Én ærlig begrensning: forholdstallet måler bare luminans, så det sier ingenting om fargeforveksling for fargeblinde lesere og ingenting om skriftvekt utover regelen for stor tekst. Alt kjører lokalt i nettleseren din.

Formelen

Relativ luminans: for hver sRGB-kanal c normalisert til 0–1, bruk c / 12,92 når c ≤ 0,03928 og ((c + 0,055) / 1,055)^2,4 ellers; deretter L = 0,2126·R + 0,7152·G + 0,0722·B. Kontrastforhold = (L1 + 0,05) / (L2 + 0,05), der L1 er den lyseste av de to fargene. Terskler: 4,5:1 vanlig tekst AA, 7:1 vanlig tekst AAA, 3:1 stor tekst AA og grensesnittkomponenter, 4,5:1 stor tekst AAA.

Ofte stilte spørsmål

Hva regnes som «stor tekst»?

Tekst på 18 pt (24 px) eller større, eller 14 pt (rundt 18,7 px) eller større når den er halvfet. Stor tekst trenger bare 3:1 på AA og 4,5:1 på AAA, fordi tykkere og større bokstavformer forblir lesbare ved lavere kontrast.

Hvorfor stryker #777 på hvitt med så liten margin?

Fordi terskelen er et hardt skille. #777777 på hvitt gir 4,48:1 og AA krever 4,5:1, så den stryker med to hundredeler. Å gjøre den ett hakk mørkere til #767676 gir 4,54:1 og består — som er nøyaktig det forslagsknappen gjør.

Gjelder kontrast også for ikoner og knapper?

Ja. WCAG-suksesskriterium 1.4.11 krever 3:1 mellom en grensesnittkomponent eller en meningsbærende grafikk og fargene ved siden av. Feltrammer, av/på-tilstander, fokusmarkeringer og knapper med bare ikon faller alle inn under det.

Er dette WCAG 2 eller den nyere APCA?

Dette verktøyet bruker forholdstallet fra WCAG 2.x, som er det tilgjengelighetslover, revisjoner og designsystemer viser til i dag. APCA er den persepsjonsbaserte algoritmen som er foreslått for WCAG 3; den gir andre tall og er ennå ikke et krav for samsvar.

Forlater fargene mine nettleseren?

Nei. Luminansen og forholdstallet beregnes i JavaScript på enheten din. Ingenting sendes til noen server eller lagres noe sted.

contraste acessibilidade wcag razão de contraste aa aaa cores legibilidade design css ux web

Relaterte verktøy

Fargekonverterer Konverter en farge mellom HEX, RGB, HSL, HSV og CMYK med levende toveis synkronisering, i nettleseren din. Generator for lyse og mørke fargenyanser Gjør én farge om til komplette skalaer med lysere nyanser, mørkere nyanser og dempede toner, og eksporter dem som CSS-variabler — i nettleseren din. Fargeblander Bland to farger med en andelsglider og les av hele skalaen på 11 trinn mellom dem, i nettleseren din. CSS Gradient Generator Design lineære og radiale CSS-gradienter visuelt, juster farger og vinkel, og kopier CSS-en. CSS Box Shadow Generator Design boks-skygger visuelt — juster forskyvning, uskarphet, spredning, farge og gjennomsiktighet, og kopier CSS-en. Bilde-til-Base64-konverter Konverter et bilde til en Base64 Data URI med HTML- og CSS-snutter klare til å limes inn — uten noen opplasting.

Lange lenker? Forkort dem gratis

Vai.la gjør enhver URL om til en kortlenke med klikkstatistikk, QR Code og din egen biolink.

Forkort en lenke Opprett gratis konto

Vai.la er ikke ansvarlig for hvordan verktøyene brukes, eller for beslutninger tatt på grunnlag av resultatene.