Kuidas kontrollida, kas minu teksti- ja taustavärvid vastavad WCAG nõuetele?

Sisesta kuueteistkümnendkoodid väljadele Teksti värv ja Taustavärv või kasuta värvivalijaid. Kuvatakse Kontrastitegur koos märkega Kinnitus või Ei vasta AA ja AAA nõuetele tava- ja suure teksti ning UI-komponentide jaoks.

Millist kontrastitegurit nõuab WCAG AA?

AA nõuab tava teksti puhul suhet 4,5:1 ja suure teksti puhul 3:1. AAA nõuab tava teksti puhul 7:1 ja suure teksti puhul 4,5:1. UI-komponendid ja graafilised objektid vajavad suhet 3:1.

Mis loetakse suureks tekstiks?

Tööriist käsitleb suurena 18pt (24px) tavalist teksti või 14pt (18,66px) paksu teksti. Väiksem tekst peab vastama kõrgematele tava teksti lävenditele.

Minu värvid ei vasta AA nõuetele. Kuidas neid parandada?

Kasuta ühe klõpsuga soovitusi Paranda tekstivärvi või Paranda taust. Need reguleerivad heledust, säilitades sama värvitooni, kuni paar saavutab suhte 4,5:1.

Milliseid värvivorminguid see aktsepteerib ja kas ma saan ekraanilt värvi valida?

See aktsepteerib 3- ja 6-kohalisi kuueteistkümnendväärtusi, nagu #abc või #1e293b. Vali värvi ekraanilt nupp ilmub brauserites, mis toetavad EyeDropper API-t, näiteks Chromium.

Kas see on tõesti tasuta?

Jah. Iga tööriist on tasuta kasutamiseks, ei nõua kontot ega krediitkaarti. Töö toimub sinu seadmes, mitte meie serverites, mis võimaldabki seda tasuta pakkuda.

Kas see töötab mobiilseadmetes?

Jah. See töötab tänapäevastes mobiilibrauserites iOS-is ja Androidis ning midagi pole vaja installida.

🌓

WCAG-värvikontrastsuse kontrollija tasuta

Kontrolli, kas kaks värvi vastavad WCAG AA ja AAA kontrastsuse standarditele juurdepääsetavuse jaoks. Reaalajas eelvaade mitmes tekstisuuruses koos automaatsete soovitustega, kui kontrast on liiga madal.

Töötab sinu brauserisRegistreerimist pole, hüpikaknaid poleSisselogimist ei nõutaIgavesti tasuta

Töötab võrguühenduseta pärast laadimist

Teksti värv

Taustavärv

Suur pealkiri

Keskmise suurusega põhitekst (18px) lugemiseks.

Tavaline põhitekst (16px) lõikudele.

Väike põhitekst (14px) pealkirjadele ja metaandmetele.

14,63:1

Kontrastitegur

✓WCAG AA — tavaline tekst

Nõuab 4.5:1 · Sul on 14,63:1

✓WCAG AA — suur tekst

Nõuab 3.0:1 · Sul on 14,63:1

✓WCAG AAA — tavaline tekst

Nõuab 7.0:1 · Sul on 14,63:1

✓WCAG AAA — suur tekst

Nõuab 4.5:1 · Sul on 14,63:1

✓UI-komponendid / graafilised objektid

Nõuab 3.0:1 · Sul on 14,63:1

Kiiresed eseaded

Põhineb WCAG 2.1 kontrastsuse juhistel. Suur tekst = 18pt (24px) tavaline või 14pt (18,66px) rasvane. HEX-koodid uuendatakse mõlemas suunas: sisesta HEX või vali värv, mõlemad väljad püsivad sünkroonis.

Levinud kasutusviisid

Kontrollige veebilehed WCAG vastavuse jaoksKontrollige, kas teie saidi teksti värvid vastavad WCAG AA või AAA kontraststandarditele juurdepääsetavuse jaoks.
Kontrollige kaubamärgi värvide kombinatsiooneTestiges kaubamärgi värvpaletete paare, et veenduda, et need sobivad juurdepääsetava UI-disainiga.
Testiges tumeda režiimi värvpaleteidHele tekst tumeda tausta peal võib kontrastimine ebaõnnestuda - kontrollige tumeda režiimi paleteepaare siin.
Värvide kombinatsioonid trükitud materjalidelePlakatid, märgid ja trükitud materjalid vajavad ka loetavat kontrasti - eriti vanemate lugejate jaoks.
Kujundage juurdepääsetavad nupuvärviVeenduge, et CTA, toimingunupud ja lingid läbivad WCAG nende taustade suhtes.

Kuidas see töötab

Kontrasti kontrollimine töötab täielikult sinu brauseris, kasutades WCAG 2.1 suhtelise heleduse algoritmi — teeki ega serverit pole, ainult käsitsi kirjutatud matemaatika, mis järgib spetsifikatsiooni täpselt. Iga tulemus uueneb reaalajas kirjutades või värvi valides.

1
Kuueteistkümnendsisend ja normaliseerimine
Aktsepteeritakse nii 3-numbrilisi (#abc) kui 6-numbrilisi (#aabbcc) kuueteistkümnendväärtusi ning need normaliseeritakse täielikeks RGB kolmikuteks. Kehtetu sisend lükatakse kohe tagasi, mitte vaikimisi vaikselt mustaks, seega ilmub punane serv, mitte eksitav läbimistulemus.
2
WCAG heleduse arvutus
Iga värv teisendatakse suhteliseks heleduseks WCAG 2.1 valemi abil: sRGB kanaliväärtused lineariseeritakse tükikaupa gammakorrektsiooniga (jagades 12,92-ga allpool 0,03928, tõstes astmesse 2,4 sellest ülal), seejärel kaalutakse kui 0,2126R + 0,7152G + 0,0722B.
3
Kontrastsuhe ja vastavuskontrollid
Kontrastsuhe arvutatakse kui (heledam + 0,05) / (tumedam + 0,05) ja võrreldakse kõigi viie WCAG lävendiga: AA tavatekst (4,5:1), AA suur tekst (3:1), AAA tavatekst (7:1), AAA suur tekst (4,5:1) ja liidesekomponendid (3:1). Tulemused uuenevad iga klahvivajutusega.
4
Toonisäilitavad parandussoovitused
Kui paar ei läbi WCAG AA-d, otsib tööriist HSL heleduse ruumis — astudes originaalheledusest välja mõlemas suunas — et leida iga värvi lähim variant, mis läbib 4,5:1, säilitades sama tooni ja küllastuse. EyeDropper API (Chromium) on samuti saadaval mis tahes värvi valimiseks otse su ekraanilt.

Seotud tööriistad

👁️

Värvipimedate simulaator

Vaata, kuidas sinu disain näeb välja inimestele, kellel on värvitaju häired. Simuleerib protanopiat, deuteranopiat, tritanopiat, akromatopsiat ja leebemaid anomaaliaid.

Proovi järeleFailid jäävad kohalikuks

📐

Mis on minu ekraani resolutsioon

Vaata oma ekraani resolutsiooni CSS-i ja tegelikes pikslites, akna suurust, pikslitihedust, värvisügavust, HDR-i, puutetuge ja värskendussagedust ning kopeeri kõik.

Proovi järele

🖥️

Surnud pikslite test

Kontrolli oma ekraani surnud või kinnikiilunud pikslite suhtes täisekraani musta, valge, punase, rohelise, sinise ja halliga, lisaks valikuline kinnikiilunud piksli parandaja.