WCAG värvikontrasti kontrollija

Hinnake teksti ja taustavärvide kontrastsuse suhet vastavalt WCAG 2.1 juhistele. Looge koheselt ligipääsetavaid värviparandusi.

HEX/RGB/HSL
HEX/RGB/HSL
Kõik toimub lokaalselt sinu brauseris.

Reaalajas teksti eelvaade

Suur pealkiri (18pt paks / 24pt tavaline)

See on suure pealkirja teksti stiili eelvaade.

Tavaline tekst (alla 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing eliit.

Kontrastsuse suhe

18.6:1

WCAG 2.1 vastavuse staatus

WCAG AA nõuded
Tavaline tekst (4.5:1) PASS
Suur tekst (3.0:1) PASS
WCAG AAA nõuded
Tavaline tekst (7.0:1) PASS
Suur tekst (4.5:1) PASS

WCAG 2.1 juhised

Kontrollige hõlpsalt kontrastsuse standardeid, et luua ligipääsetavaid liideseid, mis vastavad jaotise 508, ADA ja WCAG AA või AAA juhistele.

Soovituste mootor

HSL koordinaadide kaudu kohandatakse automaatselt värve, et leida lähimad alternatiivid, mis vastavad kontrasti suhe kriteeriumidele.

Täielikult kliendipoolne

Arvutused teostatakse kohalikult sinu brauseri kontekstis. Meie serveritele ei edastata värve, faile ega telemeetria koordinaate.

Seotud värvitööriistad

HEX RGB HSL värvimuundur
Teisenda värve ja kohanda heleduskoordinaate.
Pildi värvivalija
Eralda värvipaletid disaini makettidest.
CSS värvimuundur
Teisenda CMYK, HSV, RGB, HSL ja HEX vormingute vahel.

Värvikontrasti kontrollija

Arvuta WCAG kontrastisuhted esi- ja taustavärvidele ning näita tavalisi teksti suuruse tulemusi.

Sisend
Kaks kehtivat CSS värvi ja valikuline eelvaatetekst.
Väljund
Kontrastsuse suhe WCAG AA ja AAA läbimise või mitteläbimise näitajatega.
Tegelikud piirangud
Arvutus hõlmab ainult heleduskontrasti; see ei sertifitseeri liidest ega arvesta fondi renderdamist, liikumist, fookust ega mittevärvilisi vihjeid.
Privaatsus ja andmete töötlemine
kaks kehtivat CSS värvi ja valikuline eelvaate tekst töödeldakse selles brauseri vahekaardil. Convertr ei saa ega salvesta seda; lehekülje sulgemine või uuesti laadimine puhastab tööoleku, välja arvatud juhul, kui tööriist pakub selgelt kohalikku allalaadimist.

Kuidas seda tööriista kasutada

  1. Sisestage tööriista juhtelementidesse kaks kehtivat CSS värvi ja valikuline eelvaate tekst.
  2. Vali seaded, mis mõjutavad kontrastsuse suhet WCAG AA ja AAA läbimise või mitteläbimise näitajatega, seejärel käivita tööriist.
  3. Vaata üle kontrastsuse suhe koos WCAG AA ja AAA läbimise või mitteläbimise näitajatega enne kopeerimist või allalaadimist.

Levinud ebaõnnestumise viisid

Vigaseid värve ei saa mõõta ja läbipaistvus ilma lahendatud taustata võib muuta suhte mõttetuks.

Kasulik näide

Võrdle teksti #1f2937 #ffffff taustal, et hinnata selle suhet tavalise ja suure teksti jaoks.