Chromatinė chromatofobija: kodėl šiuolaikinis dizainas pamiršo įskaitomumą?

Būkime atviri: šiuolaikinis žiniatinklio dizainas patiria tikrą estetinės aklatvietės krizę. Dizaineriai, apsvaigę nuo pilkų atspalvių minimalistiniuose maketuose, pamėgo kurti svetaines, kuriose šviesiai pilkas `#999999` tekstas užrašytas ant dar šviesesnio pilko `#F5F5F5` fono. Rezultatas? Svetainė atrodo lyg elegantiškas paminklas dzeno filosofijai, tačiau jos neįmanoma perskaityti net turint idealų 1.0 regėjimą šviesią saulėtą dieną.

Štai čia į sceną žengia W3C WCAG 2.1 (Web Content Accessibility Guidelines) standartas. Tai nėra šalta biurokratinė dogma – tai skaitmeninio prieinamumo konstitucija. Ji apibrėžia griežtas ribas tarp meninio egoizmo ir praktinio įskaitomumo, kad kiekvienas žmogus, nepriklausomai nuo regėjimo aštrumo ar ekrano ryškumo, galėtų perskaityti svarbią informaciją.

Kam to reikia? Ar blogas kontrastas gadina akis, ir ką daryti su logotipais?

Būkime atviri: bandymas išskaityti neįskaitomą šviesiai pilką tekstą ant pilko fono sukelia realų fiziologinį efektą – astenopiją (akių pervargimą). Ekrano šviesoje akies krumplyninis raumuo (ciliary muscle) įsitempia, priversdamas vyzdį neproporcingai plėstis, o tai sukelia galvos skausmą, akių sausumą ir nelyginant mikro-traumas tinklainei. O kaip dėl logotipų ir prekės ženklų? W3C WCAG 2.1 taisyklės turi aiškią išimtį: logotipams ir prekės ženklų pavadinimams privalomi kontrastai netaikomi – tai laikoma menine saviraiška. Tačiau jei jūsų svetainės pagrindinis tekstas arba mygtukai bus tyčia neįskaitomi „dėl dėmesio atkreipimo“, atsitiks priešingas efektas: 80% lankytojų tiesiog užvers puslapį per 3 sekundes (padidės Bounce Rate), Google paieškos algoritmai sumažins svetainės SEO reitingą dėl prastos vartotojų patirties (Core Web Vitals), o teisininkai galės pateikti pretenziją dėl Prieinamumo akto pažeidimo. Meninis maištas gražu, tačiau neįskaitomas tekstas tiesiog žudo jūsų verslo konversijas.

Kas atrado WCAG? Pasaulinio tinklo tėvas Sir Tim Berners-Lee ir W3C atsiradimas

WCAG nėra vieno atsitiktinio dizainerio ar pavienio entuziasto pramanas – tai tarptautinės organizacijos W3C (World Wide Web Consortium) bei jos padalinio WAI (Web Accessibility Initiative) kolektyvinio darbo vaisius. Šios visuotinės misijos šaknys siekia 1994 metus, kai pačio interneto (World Wide Web) išradėjas Sir Tim Berners-Lee įkūrė W3C konsorciumą su pamatine vizija: „Žiniatinklio galia slypi jo visuotinume. Prieiga visiems, nepriklausomai nuo negalios, yra esminis aspektas.“ Pirmoji oficiali WCAG 1.0 rekomendacija buvo išleista 1999 m. gegužę, o 2008 m. gruodį ją pakeitė technologiškai neutrali WCAG 2.0. Galiausiai 2018 m. birželį dienos šviesą išvydo dabartinis WCAG 2.1 standartas, pritaikytas išmaniesiems telefonams, dideliam ekrano masteliui bei griežtiems kontrastų normatyvams. Šiandien WCAG atitiktis yra įtvirtinta Europos Sąjungos direktyvose (EN 301 549) bei JAV teisės aktuose (ADA / Section 508), paverčiant spalvų kontrastą teisine prievole kiekvienai profesionaliai organizacijai.

Matematinė metodika: kaip žingsnis po žingsnio apskaičiuojamas santykis?

WCAG kontrasto santykis nėra skaičiuojamas tiesiog atimant spalvų RGB kodų skaitines reikšmes – žmogaus akis šviesumą suvokia netolygiai (nelineijiniu būdu). Metodika susideda iš trijų griežtų matematinių žingsnių:

  1. 1 žingsnis – Gama korekcija (Linearizavimas): Kiekvienas R, G, B kanalas (nuo 0 iki 255) paverčiamas į santykį nuo 0 iki 1 (c = reikšmė / 255). Jei c ≤ 0.04045, naudojama linijinė formulė clin = c / 12.92, o jei c > 0.04045, pritaikoma laipsninė gama korekcija: clin = ((c + 0.055) / 1.055)2.4.
  2. 2 žingsnis – Reliatyvusis ryškumas (Relative Luminance L): Apskaičiuojamas bendras fotometrinis ryškumas pagal ISO normatyvą: L = 0.2126 × Rlin + 0.7152 × Glin + 0.0722 × Blin. Šviesiausia įmanoma balta spalva turi L = 1.0, o tamsiausia juoda – L = 0.0.
  3. 3 žingsnis – Santykio formulė: Gautos dviejų spalvų ryškumo reikšmės (L1 – šviesesnė, L2 – tamsesnė) palyginamos pagal W3C formulę: Santykis = (L1 + 0.05) / (L2 + 0.05). Konstanta +0.05 formulėje kompensuoja aplinkos šviesos atspindžius ekrano paviršiuje. Rezultatas visada gausis intervale nuo 1:1 (identiškos spalvos) iki 21:1 (gryna juoda ant grynos baltos).

Kas gi tas genijus, sugalvojęs šias kosmines formules? Ši „kosminė“ lygtis nėra vieno paslaptingo akademiko išradimas – tai CIE (Commission Internationale de l’Éclairage) fizikų 1931 m. atliktų fotometrijos tyrimų, 1996 m. Microsoft ir HP inžinierių sukurtos sRGB spalvų erdvės bei W3C prieinamumo guru Dr. Gregg Vanderheiden bendras kūrinys. Jie paėmė žmogaus akies tinklainės fotoreceptorių jautrumo kreives (kur žalia spalva dominuoja dėl mūsų protėvių gyvenimo džiunglėse) ir pavertė jas šalta, nepermaldaujama matematine konstanta, kad nei vienas žiniatinklio dizaineris nebegalėtų pasiteisinti sakydamas: „O man gražiai atrodo!“

Kvantinė fotonika ir chromatinis sarkazmas: kodėl šviesos bangos nepaiso dizaino madų?

Žvelgiant iš kvantinės optikos ir elektromagnetizmo fizikos perspektyvos, spalva iš esmės neegzistuoja – tai tėra tam tikro dažnio šviesos fotonų srautas, kurį žmogaus akies tinklainės kolbelės (fotoreceptoriai) paverčia elektrocheminiais impulsais galvos smegenų žievėje. Tačiau šiuolaikinis skaitmeninis dizainas, atrodo, nusprendė ignoruoti Niutono optikos dėsnius bei milijonus metų trukusią biologinę evoliuciją. Dizaineriai, pasinerę į tam tikrą chromatinį nihilizmą, sąmoningai kuria šviesiai pilkus `#A0A0A0` šriftus ant pilkšvai baltų `#F4F4F4` fonų, tarsi kiekvienas svetainės lankytojas būtų apdovanotas superherojų gebėjimu matyti ultravioletinį spinduliavimą arba dirbtų tamsiame bunkeryje be jokios saulės šviesos. Tai absurdiška estetinė atrofija: fizikinė šviesos energija slopinama dėl efemeriško minimalistinio madingumo.

W3C komiteto inžinieriai, kurdami WCAG 2.1 prieinamumo algoritmus, rėmėsi ne subjektiviu skoniu, o griežta fotometrine reliatyviojo ryškumo skaičiavimo matematine formule L = 0.2126 × R + 0.7152 × G + 0.0722 × B. Žaliasis fotonų srautas sudaro net 71.5% mūsų matomo ryškumo percepto, o mėlynasis – vos 7.2%. Nepaisyti šių fizikinių konstantių – tai tas pat, kas statyti tiltą be statybinės mechanikos dėsnių. Mūsų WCAG spalvų kontrasto tikrinimo įrankis veikia kaip nepermaldaujamas skaitmeninis fizikos arbitras: jis be užuolankų nuplėšia iliuzijų šydą nuo neįskaitomų maketų, padarydamas internetą prieinamą kiekvienai gyvajai būtybei, turinčiai akis ir fotoreceptorius.

Ką reiškia WCAG 2.1 santykis (Contrast Ratio)?

Spalvų kontrasto santykis matuojamas skale nuo 1:1 (spalvos visiškai vienodos, visiškas aklumas) iki 21:1 (tobulas juodos ir baltos spalvų kontrastas). W3C standartas išskiria tris pagrindinius atitikties lygius:

1. WCAG AA lygis (Minimalus teisinis ir profesionalus standartas)

  • Įprastas tekstas (< 18pt / 24px): Reikalaujamas kontrasto santykis bent 4.5 : 1. (Statusas: GERAI / ATITINKA).
  • Didelis tekstas (≥ 18pt / 24px arba ≥ 14pt bold): Reikalaujamas kontrasto santykis bent 3.0 : 1.
  • UI komponentai ir piktogramos: Reikalaujamas kontrasto santykis bent 3.0 : 1.

2. WCAG AAA lygis (Aukščiausias įskaitomumo standartas)

  • Įprastas tekstas: Reikalaujamas kontrasto santykis bent 7.0 : 1 (Statusas: TOBULAI / PUIKIAI).
  • Didelis tekstas: Reikalaujamas kontrasto santykis bent 4.5 : 1.

Kaip veikia šis įrankis?

  1. Pasirinkite fono spalvą: Naudokite spalvų parinkiklį arba įveskite HEX/RGB/HSL/CMYK kintamuosius fono laukelyje.
  2. Pasirinkite teksto spalvą: Įveskite arba pasirinkite teksto spalvą antrojoje kortelėje.
  3. Gaukite momentinį įvertinimą: Sistema apskaičiuos reliatyvųjį ryškumą (Luminance) pagal fotometrinę formulę, parodys didelį skaitinį santykį (pvz., 7.4 : 1) bei pateiks aiškų verdiktą: PUIKIAI!, GERAI! arba BLOGAI!.
  4. Išbandykite 1-spustelėjimo atitiktį (Auto-Fix): Jei kontrastas nepakankamas, spustelėkite išmaniojo koregavimo mygtuką ir sistema automatiškai pritaikys teksto šviesumą iki minimalaus 4.5:1 AA standarto.