WCAG 2.1 / 2.2 kontrastsuse suunised ja standardid
Veebisisu juurdepääsetavuse suunised (WCAG) versioonides 2.1 ja 2.2 määravad kindlaks reeglid, mis tagavad digitaalse sisu loetavuse võimalikult paljudele kasutajatele, sealhulgas vaegnägijatele. Kontrastsuse suhe näitab teksti ja selle tausta vahelist heledusvahet. See suhe ulatub vahemikku 1:1, mis tähistab täielikku kontrasti puudumist (näiteks valge tekst valgel taustal), kuni suhteni 21:1, mis tähistab maksimaalset võimalikku kontrasti (must tekst valgel taustal).
Tööriist algatatakse vaikimisi algväärtustega, kus teksti värv on #4f46e5 ja taustavärv on #ffffff. See kombinatsioon annab kontrastsuse suhteks 6.29. Kasutades vahetusnuppu, saab teksti- ja taustavärvide asukohti kiiresti ümber pöörata, et hinnata sama kombinatsiooni vastupidist toimimist.
AA ja AAA ligipääsetavuse tasemed
WCAG standardid jagavad nõuded erinevatesse vastavustasemetesse, millest levinumad on AA ja AAA. Need tasemed määravad ära minimaalsed lubatud kontrastsuse suhted sõltuvalt teksti suurusest ja otstarbest:
- Tavaline tekst: AA-taseme saavutamiseks on nõutav suhe vähemalt 4.5:1. Rangema AAA-taseme läbimiseks peab suhe olema vähemalt 7:1.
- Suur tekst: Kuna suuremat kirja on kergem lugeda, on selle nõuded madalamad. AA-tase nõuab suhet vähemalt 3:1 ja AAA-tase suhet vähemalt 4.5:1.
- UI ja graafika: Kasutajaliidese komponendid ja graafilised elemendid peavad vastama ühele kindlale piirmäärale, milleks on 3:1. Selle rea puhul puudub eraldi AA ja AAA eristus — tööriist kuvab selle kohta üheainsa tulemuse.
Tavalise ja suure teksti määratlus ligipääsetavuses
Teksti suurus mõjutab otseselt seda, kui suurt kontrasti on vaja loetavuse tagamiseks. WCAG reeglite kohaselt jaguneb tekst kahte kategooriasse:
| Teksti tüüp | Suurus ja stiil | AA miinimumsuhe | AAA miinimumsuhe |
|---|---|---|---|
| Tavaline tekst | Alla 18pt (umbes 24px) tavalises kirjas või alla 14pt (umbes 18.5px) poolpaksus kirjas | 4.5:1 | 7:1 |
| Suur tekst | Alates 18pt (umbes 24px) tavalises kirjas või alates 14pt (umbes 18.5px) poolpaksus kirjas | 3:1 | 4.5:1 |
Suurema teksti puhul piisab väiksemast kontrastsusest, sest suuremad tähekujud on silmale kergemini eristatavad.
Kasutajaliidese komponentide ja graafika kontrastsus
Digitaalses disainis ei ole oluline ainult teksti loetavus. Kasutajad peavad suutma tuvastada ka nuppe, sisestusväljade piirjooni, ikoone ja muid graafilisi elemente, mis on vajalikud liidese mõistmiseks ja juhtimiseks.
Selleks on WCAG standardites kehtestatud nõue kasutajaliidese komponentidele ja graafikale, mille minimaalne lubatud kontrastsuse suhe taustaga on 3:1. Erinevalt tekstist ei jagune see nõue AA ja AAA tasemeteks, vaid sellele kehtib üks ühine läbivuslävi. Kui suhe on vähemalt 3:1, märgib tööriist selle rea staatuseks "Läbib", vastasel juhul kuvatakse "Ei läbi".
Värvivormingute kasutamine ja vigade käsitlemine
Tööriist toetab disainis ja arenduses levinud värvivorminguid. Sisendväljadele võib sisestada järgmisi väärtusi:
- Hex-väärtused (näiteks
#1a1a1avõi#ffffff). - RGB-väärtused kujul
rgb(26, 26, 26)võirgb(255, 255, 255). - HSL-väärtused.
Kui sisestatud väärtus ei vasta ühelegi toetatud vormingule või on vigane, kuvab tööriist vastava veateate. Teksti värvi vea puhul kuvatakse teade: "Sisestage korrektne teksti värv, näiteks #1a1a1a või rgb(26, 26, 26).". Taustavärvi vea puhul kuvatakse teade: "Sisestage korrektne taustavärv, näiteks #ffffff või rgb(255, 255, 255).".
Tulemuste ja kokkuvõtliku hinnangu tõlgendamine
Pärast värvide sisestamist arvutab tööriist automaatselt kontrastsuse suhte ja kuvab iga kategooria (tavaline tekst, suur tekst ning UI ja graafika) kohta staatuse "Läbib" või "Ei läbi". Lisaks kuvatakse kokkuvõtlik hinnang, mis näitab kõrgeimat saavutatud taset:
- "Läbib AA ja AAA taseme tavalise teksti puhul." – Värvikombinatsioon vastab kõige rangematele nõuetele.
- "Läbib AA taseme tavalise teksti puhul." – Värvid sobivad tavalise teksti jaoks AA-tasemel, kuid ei täida AAA-taseme nõudeid.
- "Läbib AA taseme ainult suure teksti puhul." – Kontrast on liiga madal tavalise teksti jaoks, kuid piisav suure teksti ja graafika jaoks.
- "Alla AA miinimumi — suurendage kontrastsust." – Värvikombinatsioon ei vasta isegi AA-taseme miinimumnõuetele ja vajab korrigeerimist.
Privaatsus ja andmetöötlus
Selle tööriistaga värvide kontrollimisel on tagatud teie andmete privaatsus. Iga kontroll toimub teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse. Kogu arvutusprotsess tehakse kohapeal teie seadmes, mis tähendab, et sisestatud värvikoodid ja testitavad kombinatsioonid ei lahkuda kunagi teie veebilehitsejast.
Korduma kippuvad küsimused
Mida tähendavad AA ja AAA tulemused?
AA on tase, mille poole enamik veebisaite püüdleb: see nõuab tavalise teksti puhul suhet vähemalt 4.5:1 ja suure teksti puhul 3:1. AAA on rangem – 7:1 tavalise teksti ja 4.5:1 suure teksti puhul. Suhe ulatub vahemikku 1:1 (kontrast puudub) kuni 21:1 (must valgel).
Mis loetakse suureks tekstiks?
Tekst alates 18pt (umbes 24px) või poolpaks tekst alates 14pt (umbes 18.5px). Suurem tekst on loetav ka väiksema kontrastsuse juures, mistõttu see läbib AA taseme suhtega 3:1 ja AAA taseme suhtega 4.5:1 (tavalise teksti rangemate piirmäärade asemel).
Milliseid värvivorminguid saan sisestada?
Sisestage hex-väärtus nagu #1a1a1a, rgb() väärtus nagu rgb(26, 26, 26) või hsl() väärtus – või klõpsake värvi valimiseks mistahes näidist. Kasutage vahetusnuppu teksti- ja taustavärvide asukohtade vahetamiseks.
Kas see on WCAG 2 või uuem APCA meetod?
See tööriist kasutab WCAG 2.1 / 2.2 valemit, millele tuginevad praegused ligipääsetavuse reeglid ja auditid. APCA on uuem, tajupõhisem meetod, mida alles töötatakse välja WCAG 3 jaoks – see on lubav, kuid pole veel ametlik vastavusstandard, seega siinsed läbimistulemused seda ei kasuta.