Kontrastsuhte kontroll

Kuidas kontrastsuhte kontrolli kasutada

1. Sisesta Teksti värv ja Taustavärv. Kasuta värviproove või sisesta väljadele mis tahes CSS-i väärtus: HEX-kood, näiteks #595959, rgb(89 89 89), hsl(0 0% 35%) või nimi, näiteks navy.
2. Kontrastsuhe uueneb sedamööda, kuidas kirjutad, vahemikus 1:1 (kontrasti pole) kuni 21:1 (must valgel).
3. Tabel WCAG 2.2 tulemused näitab hinnangut Läbib või Ei läbi nii Tavalise teksti, Suure teksti kui ka Liideseelementide ja graafika jaoks, tasemetel AA ja AAA.
4. Vaata Eelvaadet: see näitab tavalist teksti, suurt teksti, suurt rasvast teksti, nupu piirjoont ja ikooni sinu kahes värvis.
5. Kui mõni tase ei läbi, vali jaotises Soovitused Eesmärk. Tööriist pakub Lähima sobiva teksti värvi ja Lähima sobiva taustavärvi. Klõpsa nupul Kasuta, et üks neist rakendada. Vaheta värvid vahetab teksti ja tausta omavahel.

Kõik arvutatakse sinu brauseris; midagi ei saadeta kuhugi.

Kuidas kontrastsuhet arvutatakse

WCAG 2.x määratleb suhte kujul (L1 + 0,05) / (L2 + 0,05), kus L1 on heledama värvi suhteline luminants ja L2 tumedama oma. Suhteline luminants arvutatakse lineariseeritud sRGB kanalitest: iga kanal dekodeeritakse sRGB ülekandekõveraga, seejärel L = 0,2126 R + 0,7152 G + 0,0722 B. Roheline kaalub kõige rohkem, sest meie silmad on selle suhtes kõige tundlikumad, mistõttu paistab puhas roheline palju heledam kui sama „tugevusega“ puhas sinine.

Suhet ei ümardata kunagi ülespoole. #777777 valgel annab umbes 4,48:1 ja ei läbi AA taset tavalise teksti jaoks, kuigi see näeb välja nagu „4,5“. See tööriist kärbib kuvatava väärtuse kahe kümnendkohani, nii et see, mida näed, on see, mida WCAG kontrollib.

Kui teksti värv on poolläbipaistev (näiteks rgb(0 0 0 / 60%)), segatakse see esmalt taustaga, nagu brauser seda joonistaks. Tausta värvi läbipaistvust ignoreeritakse, sest tundmatu on, mis lehe taga asub.

WCAG tasemed ühe pilguga

„Suur tekst“ tähendab vähemalt 18 pt (24 CSS-i pikslit) või 14 pt rasvast (umbes 18,66 px). Logodele ja puhtalt dekoratiivsele tekstile nõudeid ei ole. Liideseelementide 3:1 reegel (edukriteerium 1.4.11) kehtib sisestusväljade ja nuppude äärisjoontele, fookusnäitajatele, ikoonidele ja diagrammijoontele, mida kasutajad peavad nägema.

Kuidas soovitused töötavad

Soovitatud värvid säilitavad sinu värvi tooni ja kroma OKLCH-ruumis ning muudavad ainult heledust, tumedamaks või heledamaks, kuni eesmärgiks seatud suhe on saavutatud. Seejärel valib tööriist kahest suunast selle, mis on visuaalselt sinu algsele värvile lähim, mõõdetuna OKLabis. Tulemust kontrollitakse pärast HEX-koodiks ümardamist uuesti, nii et see tõesti läbib. Kui ükski heledus eesmärki ei saavuta (näiteks 7:1 keskmise halli vastu), ütleb tööriist seda.

APCA-st

APCA (Accessible Perceptual Contrast Algorithm) on uuem kontrastimudel, mida kaalutakse tulevase WCAG 3 jaoks. See arvestab kirja jämedust, suurust ja polaarsust (tume heledal versus hele tumedal). See on veel mustand ega ole õiguslik ega normatiivne nõue, seega annab see tööriist WCAG 2.x tulemusi, mis jäävad võrdlusaluseks Euroopa ligipääsetavusstandardile EN 301 549, Section 508 ja enamikule seadustele.