Šviesiai pilkas tekstas baltame fone iš pirmo žvilgsnio gali atrodyti elegantiškai ir minimalistiškai – ir gali būti visiškai neįskaitomas naudotojams, turintiems regėjimo sutrikimų, turintiems stiprią saulės šviesą ekrane ar tiesiog įtempusiems akis darbo dienos pabaigoje. Spalvų kontrastas yra vienas iš „techniškiausių“ prieinamumo kriterijų – yra tikslūs skaičiai, kuriuos reikia atitikti, tačiau jį taip pat lengviausia išbandyti ir pataisyti iš anksto.

Trumpai tariant – ką šis vadovas apima

  1. Kokių koeficientų reikalauja WCAG
  2. Kodėl dideliam tekstui leidžiamas mažesnis kontrastas?
  3. Kaip praktiškai patikrinti kontrasto santykį
  4. Kaip iš anksto pasirinkti prieinamą spalvų paletę

Kokie koeficientai reikalauja WCAG

WCAG apibrėžia kontrasto santykį kaip skaičių nuo 1:1 (visiškai nėra kontrasto – identiška spalva) ir 21:1 (didžiausias galimas kontrastas – gryna juoda ant grynos baltos spalvos). AA lygiu (privalomas lygis daugumoje vietų, įskaitant Izraelį), įprasto teksto ir už jo esančio fono santykis yra bent 4,5:1. Esant griežtesniam AAA lygiui, reikalavimas pakyla iki 7:1.

Kodėl didelis tekstas leidžiamas mažiau kontrasto

Didelis tekstas išlieka skaitomas net esant mažesniam kontrastui, todėl WCAG nustato lengvesnę ribą: 3:1 AA lygyje (vietoj 4,5:1) ir 4,5:1 AAA lygyje (vietoj 7:1). „Didelis tekstas“ apibrėžiamas kaip 18 taškų ar didesnis tekstas (apie 24 piks.) arba 14 taškų ar didesnis (apie 18,7 piks.), jei jis paryškintas. Pavyzdžiui, didelės antraštės gali „leisti sau“ šiek tiek mažesnį kontrastą nei įprasta teksto pastraipa ir vis tiek atitinka reikalavimą.

Iliustracinė diagrama Kontrasto santykio palyginimas Trys teksto fone pavyzdžiai su skirtingais kontrasto santykiais Kontrasto santykis tarp teksto ir fono Teksto pavyzdys 1.8:1 — ✕ nepavyksta Teksto pavyzdys 7.1:1 — ✓ atitinka ir AAA Teksto pavyzdys 5.4:1 — ✓ atitinka AA lygį Įprastas tekstas: bent 4,5:1 · Didelis tekstas (24 pikselių ir daugiau arba 18,7 pikselių paryškintas): bent 3:1 Prieš užbaigiant spalvų paletę, tokie įrankiai kaip „WebAIM Contrast Checker“ pateikia tikslų santykį
Trys teksto fone pavyzdžiai: per mažas santykis (1,8:1) neatitinka net pagrindinio lygio; kiti du rodikliai atitinka atitinkamai AA ir AAA reikalavimus.

Kaip praktiškai patikrinti kontrasto santykį

Nereikia jo skaičiuoti rankiniu būdu – nemokami įrankiai, tokie kaip WebAIM Contrast Checker, leidžia įvesti teksto ir fono spalvų kodus ir iškart gauti tikslų santykį bei kiekvieno lygio išlaikymo/nepavykimo balą. Verta tikrinti ne tik tekstą kietame fone, bet ir tekstą virš fono vaizdų ar gradientų – kur kontrastas skirtingose ​​to paties vaizdo srityse gali skirtis, todėl geriausia išbandyti „problemiškiausią“ vietą.

💡 Praktinis patarimas

Ne tik tekstas: tas pats kontrasto reikalavimas (esant lengvesniam slenksčiui, 3:1) taip pat taikomas grafiniams vartotojo sąsajos komponentams, tokiems kaip formos lauko kontūrai, funkcinės piktogramos ir mygtukų kraštinės – ne tik raidėms.

Kaip iš anksto pasirinkti prieinamą spalvų paletę

Veiksmingiausias būdas yra patikrinti kontrastą šablono kūrimo etape, o ne kiekviename dokumente atskirai. Renkantis prekės ženklo spalvas antraštėms, pagrindiniam tekstui ir nuorodoms, verta iš anksto įsitikinti, kad kiekvienas faktiškai naudojamas teksto ir fono derinys atitinka bent 4,5:1. Tokiu būdu kiekvienas naujas dokumentas, sukurtas pagal šabloną, automatiškai „paveldės“ tinkamą kontrastą, o ne tikrintų kiekvieną dokumentą atskirai po to, kai jis jau parašytas.

Norite sužinoti, ar jūsų dokumentai atitinka kontrasto reikalavimus?

Mūsų įrankis tikrina spalvų kontrastą kaip automatinio kiekvieno PDF failo jūsų svetainėje nuskaitymo dalį.

Nuskaitykite savo svetainę nemokamai ←