WCAG 2.1 / 2.2 kontrasto gairių supratimas
Spalvų kontrastas yra vienas svarbiausių skaitmeninės erdvės prieinamumo elementų, tiesiogiai veikiantis svetainių ir programų naudojimo patogumą. Šis įrankis leidžia įvesti teksto bei fono spalvas ir nustatyti jų kontrasto santykį pagal WCAG 2.1 / 2.2 standartus. Atlikus skaičiavimą, sistema parodo, kuriuos prieinamumo lygius (AA ir AAA) atitinka pasirinktas spalvų derinys, vertinant įprastą tekstą, didelį tekstą bei vartotojo sąsajos (UI) komponentus.
Kontrasto santykis yra matematiškai apskaičiuojamas rodiklis, kuris svyruoja nuo 1:1 (kai spalvos yra visiškai vienodos ir nėra jokio kontrasto) iki 21:1 (maksimalus įmanomas kontrastas, pavyzdžiui, juodas tekstas baltame fone). Pradinės įrankio spalvos yra nustatytos #4f46e5 tekstui ir #ffffff fonui, o tai užtikrina 6.29 kontrasto santykį.
Spalvų įvesties formatai ir valdymas
Svetainių kūrėjai, dizaineriai ir turinio autoriai savo darbe naudoja skirtingus spalvų kodavimo būdus. Šis tikrintuvas palaiko tris pagrindinius formatus:
- Šešioliktainės reikšmės (Hex): pavyzdžiui,
#1a1a1a. - RGB reikšmės: pavyzdžiui,
rgb(26, 26, 26). - HSL reikšmės: spalvų kodavimas naudojant atspalvį, sodrumą ir šviesumą.
Įrankio sąsajoje įdiegtas specialus sukeitimo mygtukas, kuris leidžia akimirksniu sukeisti teksto ir fono spalvas vietomis. Jei įvesties laukelyje nurodoma neteisinga reikšmė, sistema pateikia klaidų pranešimus. Įvedus netinkamą teksto spalvą, rodomas pranešimas: „Įveskite tinkamą teksto spalvą, pavyzdžiui, #1a1a1a or rgb(26, 26, 26).“. Jei klaidingai nurodoma fono spalva, sistema pateikia įspėjimą: „Įveskite tinkamą fono spalvą, pavyzdžiui, #ffffff arba rgb(255, 255, 255).“.
Skirtumai tarp AA ir AAA prieinamumo lygių
WCAG standartuose apibrėžiami skirtingi atitikties lygiai, reikalaujantys specifinių kontrasto santykių, kad informacija būtų lengvai perskaitoma:
| Teksto tipas / Elementas | AA lygio reikalavimas | AAA lygio reikalavimas |
|---|---|---|
| Įprastas tekstas | Ne mažiau kaip 4.5:1 | Ne mažiau kaip 7:1 |
| Didelis tekstas | Ne mažiau kaip 3:1 | Ne mažiau kaip 4.5:1 |
| Sąsaja ir grafika | Ne mažiau kaip 3:1 (vienas slenkstis) | Netaikoma (atskiro AAA lygio nėra) |
Įprastam tekstui taikomi griežtesni reikalavimai, nes smulkesnius šriftus vizualiai sunkiau išskirti iš fono. Dideliam tekstui taikomi švelnesni reikalavimai, nes didesnis šrifto dydis natūraliai pagerina įskaitomumą. Pagal standartą, dideliu tekstu laikomas toks tekstas, kurio dydis yra nuo 18pt (apie 24px) arba nuo 14pt (apie 18.5px), jei naudojamas pusjuodis (bold) šriftas.
Sąsajos komponentams ir grafiniams elementams taikomas vienas bendras 3:1 kontrasto slenkstis. Ši eilutė neturi atskiro AA ir AAA lygių padalijimo – įrankis pateikia tik vieną bendrą šio parametro rezultatą.
Rezultatų ir verdiktų interpretavimas
Atlikus spalvų analizę, įrankis kiekvienai kategorijai pateikia aiškų įvertinimą – „Praėjo“ arba „Nepraėjo“. Taip pat sugeneruojamas bendras verdiktas, kuris nurodo aukščiausią pasiektą atitikties lygį:
- „Atitinka AA ir AAA reikalavimus įprastam tekstui.“ – derinys pasiekia aukščiausią įmanomą kontrastą.
- „Atitinka AA reikalavimus įprastam tekstui.“ – spalvos tinka kasdieniam naudojimui, bet nesiekia griežčiausio AAA standarto įprastam tekstui.
- „Atitinka AA reikalavimus tik dideliam tekstui.“ – derinys yra per mažo kontrasto smulkiam tekstui, tačiau yra tinkamas naudoti didelėms antraštėms.
- „Nesiekia AA minimumo – padidinkite kontrastą.“ – spalvų derinys neatitinka minimalių prieinamumo reikalavimų ir turi būti koreguojamas.
Vietinis duomenų apdorojimas ir privatumas
Naudojantis šiuo įrankiu, jūsų įvedami duomenys išlieka visiškai privatūs. Kiekvienas spalvų kontrasto patikrinimas yra atliekamas tiesiogiai jūsų interneto naršyklėje. Jokie įvesti duomenys, spalvų kodai ar pasirinkimai nėra siunčiami į „BroBroGo“ serverius.
Dažniausiai užduodami klausimai (DUK)
Ką reiškia AA ir AAA rezultatai? AA yra lygis, kurio siekia dauguma svetainių: įprastam tekstui reikalingas bent 4.5:1 santykis, o dideliam tekstui – 3:1. AAA lygis yra griežtesnis – 7:1 įprastam tekstui ir 4.5:1 dideliam tekstui. Kontrasto santykis svyruoja nuo 1:1 (nėra kontrasto) iki 21:1 (juoda ant balto).
Kas laikoma dideliu tekstu? Tekstas nuo 18pt (apie 24px) arba nuo 14pt (apie 18.5px), jei jis yra paryškintas. Didesnis tekstas išlieka įskaitomas ir esant mažesniam kontrastui, todėl jam taikomi švelnesni reikalavimai: AA lygis pasiekiamas su santykiu 3:1, o AAA – su 4.5:1 (vietoj griežtesnių įprasto teksto ribų).
Kokius spalvų formatus galiu įvesti? Įveskite šešioliktainę reikšmę, pvz., #1a1a1a, rgb() reikšmę, pvz., rgb(26, 26, 26), arba hsl() reikšmę – arba spustelėkite bet kurį spalvos langelį, kad ją pasirinktumėte. Naudokite sukeitimo mygtuką, kad sukeistumėte teksto ir fono spalvas.
Ar tai WCAG 2, ar naujesnis APCA metodas? Šis įrankis naudoja WCAG 2.1 / 2.2 formulę, kuria šiandien remiasi prieinamumo taisyklės ir auditai. APCA yra naujesnis, geriau žmogaus suvokimą atitinkantis metodas, vis dar kuriamas WCAG 3 standartui – jis perspektyvus, bet dar nėra oficialus atitikties standartas, todėl čia pateikiami rezultatai jo nenaudoja.