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 pealkiri 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 kohapeal teie brauseri kontekstis. Meie serveritele ei edastata värve, faile ega telemeetria koordinaate.

Seotud värvitööriistad

HEX RGB HSL värvimuundur
Teisendage värve ja kohandage heleduskoordinaate.
Värvipiltsid Picker
Eraldage värvipaletid disaini makettidest.
CSS värvimuundur
Konverteerige CMYK, HSV, RGB, HSL ja HEX vormingute vahel.

Värvikontrasti kontrollija

Arvuta WCAGi kontrastmäära eel- ja taustvärvidele ning näita tavalisi teksti suuruse tulemusi.

Sisend
Kaks kehtivat CSS värvi ja valikuline eelvaade teksti.
Väljund
Kontrastsuhted WCAG AA ja AAA läbivad või puuduvad näitajad.
Tegelik piirangud
Arvutamine hõlmab ainult valguskontrasti; see ei sertifitseeri vahendite või kontode jaoks font rendering, liikumine, fookus või mittevärviline koor.
Privaatsus ja andmete töötlemine
kahe kehtiva CSS värvi ja valikuväljavaade teksti töödeldakse selles brauseri tabis. konverter ei saa ega salvestada seda; lehekülje sulgemine või uuesti laadimine puhastab tööolukorda, kui tööriist ei paku selgelt kohalikku allalaadimist.

Kuidas seda tööriista kasutada

  1. Pakkige tööriista kontrollides kaks kehtivat CSS värvi ja valikuvälja teksti.
  2. Valige seadeid, mis mõjutavad kontrasti suhet WCAG AA ja AAA läbimise või puudumise näitajate, siis käivitage tööriist.
  3. Vaadake kontrasti suhet WCAG AA ja AAA läbivad või ebaõnnestuvad näitajad enne kopeerimist või allalaadimist.

Ühine ebaõnnestumismudel

Puuduvad värvid ei saa mõõta ja läbipaistvus ilma lahtise taustaga võib muuta suhe tähenduseta.

Kasulik näide

Võrdle #f2937 teksti #ffffff'is, et vaadata selle suhe normaalseks ja suureks tekstiks.