Ako auditovať farebný kontrast bez inštalácie čohokoľvek

Audity farebného kontrastu sa často berú ako špecializovaná úloha prístupnosti: otvoriť dizajnový súbor, nainštalovať plugin, exportovať screenshoty, spustiť report, diskutovať o brandových farbách. To môže byť užitočné, ale väčšina tímov by nemala začínať práve tam.

Pri produkčnom webe sa najrýchlejší spoľahlivý audit zvyčajne robí v prehliadači, ktorý už máte otvorený. Moderné browser DevTools dokážu kontrolovať vypočítané farby, zobrazovať pomery kontrastu, odhaliť štýly stavov a pomôcť vám otestovať nepríjemné prípady, ktoré automatizované reporty prehliadnu.

Tento návod predpokladá, že nič neinštalujete. Žiadne rozšírenia prehliadača. Žiadne dizajnové pluginy. Žiadny platený auditovací balík. Iba stránka, prehliadač a jednoduchá metóda.

Pravidlá kontrastu, ktoré naozaj potrebujete

Pri väčšine webovej práce sa kontrast podľa WCAG redukuje na niekoľko prahov:

• Bežný text: kontrast aspoň 4.5:1 voči pozadiu.
• Veľký text: aspoň 3:1. WCAG to definuje približne ako 24 CSS pixelov alebo približne 18,66 CSS pixelov, ak je text tučný.
• UI komponenty a grafické objekty: aspoň 3:1 pre významové okraje, ikony, stavy a časti grafov potrebné na pochopenie rozhrania.
• Zvýšený kontrast: 7:1 pre bežný text a 4.5:1 pre veľký text, ak mierite nad základnú úroveň.

Existujú výnimky, napríklad neaktívne ovládacie prvky, dekoratívne prvky a logá. Používajte ich striedmo. „Je to súčasť brandu“ nie je výnimka; je to dizajnové obmedzenie.

Pamätajte tiež, že kontrast je iba jedna časť prístupného používania farieb. Ak má červený chybový stav dostatočný kontrast, ale nemá text, popis ikony ani programové označenie, stále môže zlyhať pre používateľov, ktorí nedokážu odlíšiť červenú od blízkych farieb.

Začnite vykreslenou stránkou, nie dizajnovým súborom

Dizajnové súbory sú užitočné, ale nezahŕňajú všetky premenné z reálneho sveta: CSS overrides, opacity, hover states, vykresľovanie písma v prehliadači, používateľské priblíženie, dark mode, zdedené štýly, obsah z CMS a marketingové embedy.

Auditujte stránku tak, ako ju dostanú používatelia.

Otvorte stránku v aktuálnom desktopovom prehliadači. Chrome, Edge, Firefox a Safari majú užitočné nástroje na kontrolu. Presné názvy sa líšia, ale postup je rovnaký:

1. Kliknite pravým tlačidlom na text alebo UI prvok.
2. Vyberte Inspect.
3. Nájdite vypočítané color a background-color.
4. Pomocou farebnej vzorky prehliadača alebo panela prístupnosti odčítajte pomer kontrastu.
5. Zaznamenajte vyhovuje, nevyhovuje a neistotu.

V prehliadačoch založených na Chromium výber farby často zobrazuje pomer kontrastu a odporúčanie vyhovuje/nevyhovuje podľa WCAG pre text. Firefox DevTools tiež sprístupňuje informácie o prístupnosti a nástroje farieb. Safari Web Inspector vie zobraziť vypočítané štýly a informácie o prístupnosti, hoci postup je mierne odlišný.

Kľúčový nie je konkrétny prehliadač. Kľúčové je čítať vypočítaný výsledok, nie hodnotu, o ktorej si niekto myslí, že ju komponent používa.

Najprv si vytvorte krátky auditný zoznam

Nekontrolujte náhodný text, kým vás to neunaví. Urobte si krátky inventár vzorov:

• Základný text na hlavnom pozadí stránky.
• Tlmený text, popisky, metadáta a placeholdery.
• Odkazy v normálnom, hover, visited a focus stave.
• Primárne, sekundárne a deštruktívne tlačidlá.
• Popisky formulárov, pomocný text, chyby a úspešné správy.
• Navigačné položky, breadcrumbs a taby.
• Karty, badges, pills a tagy.
• Ikony, ktoré komunikujú význam.
• Grafy, mapy, progress bary a stavové farby.
• Text nad obrázkami, videom, gradientmi alebo priesvitnými prekrytiami.

To stačí na nájdenie väčšiny zlyhaní na typickom webe. Audit tak zároveň zostane naviazaný na komponenty, nie na jednorazové pixely.

Ak váš audit zahŕňa tlačidlá, spojte kontrolu kontrastu so základmi v našom checkliste prístupných webových tlačidiel. Problémy s kontrastom tlačidiel často sedia vedľa chýbajúcich stavov fokusu, nejasných labelov alebo nefunkčného ovládania klávesnicou.

Kontrolujte kontrast textu v DevTools

Pri obyčajnom texte na jednoliatom pozadí vie prehliadač zvyčajne vypočítať kontrast za vás.

Skontrolujte prvok a nájdite vlastnosť color. Otvorte výber farby cez vzorku. Ak prehliadač dokáže určiť pozadie, zobrazí pomer kontrastu. Niektoré nástroje vo výbere farby zobrazujú aj čiaru, ktorá ukazuje, kde by farba prešla prahmi 3:1, 4.5:1 alebo 7:1.

Keď prehliadač hlási zlyhanie, verte mu, kým nedokážete opak. Keď hlási úspech, stále používajte úsudok. Malé tenké písmo, nekvalitné displeje, výrazný anti-aliasing a rušné pozadia môžu spôsobiť, že technicky vyhovujúci text pôsobí slabo.

Praktické pravidlo: ak základný text prechádza len tesne na 4.55:1, neoslavujte. Dajte mu väčšiu rezervu. Požiadavky na kontrast sú minimum, nie ideálny cieľ.

Dôležitá je aj typografia. Väčší a čitateľnejší typografický systém znižuje námahu ešte skôr, než začnete upravovať farby. Ak sa stránka číta ťažko napriek vyhovujúcemu kontrastu, znovu sa pozrite na dĺžku riadkov, veľkosť, hrúbku a rozostupy cez širší pohľad na čitateľnosť, napríklad v tomto praktickom sprievodcovi čitateľnou typografiou.

Skontrolujte skutočné pozadie vrátane priehľadnosti

Mnohé chyby kontrastu vznikajú preto, že viditeľné pozadie nie je deklarované pozadie.

Časté pasce zahŕňajú:

• Text v polopriehľadnej karte.
• Text na rodičovi s aplikovaným opacity.
• Prekrytia používajúce rgba() alebo color-mix().
• Gradienty za nadpismi.
• Obrázky na pozadí, ktoré sa menia v oblasti textu.
• Premenné tém, ktoré sa menia v dark mode.

Ak DevTools nedokážu spoľahlivo vypočítať kontrast, identifikujte vykreslené farby popredia a pozadia manuálne. Použite panel vypočítaných štýlov, dočasne vypnite vrstvy alebo odoberte vzorku viditeľnej farby vstavaným výberom farby, ak to váš prehliadač podporuje.

Pri texte nad obrázkami neodoberajte vzorku z najkrajšej časti obrázka. Odoberajte ju z najhoršej realistickej oblasti za textom. Ak sa obrázok mení cez CMS uploady, karusely alebo responzívne orezy, nejde o stabilný kontrastný systém. Pridajte spoľahlivé prekrytie, tieň textu, plný kontajner alebo gradientové riešenie, ktoré ochráni text bez ohľadu na obrázok.

Dobrý systém prekrytia obrázkov je nudný: rovnaká sila prekrytia, predvídateľná oblasť orezu, dostatočný kontrast aj pri svetlých fotografiách. Nuda je v poriadku. Používatelia sa snažia čítať.

Nezabudnite na stavy

Statické screenshoty prehliadajú mnoho zlyhaní kontrastu. Auditujte interakčné stavy priamo v prehliadači.

V DevTools vynúťte pseudotriedy ako:

• :hover
• :focus
• :focus-visible
• :active
• :visited
• :disabled
• :checked
• :invalid

Potom znova skontrolujte vypočítané farby.

Indikátory fokusu si zaslúžia osobitnú pozornosť. WCAG 2.2 sprísnilo očakávania okolo vzhľadu fokusu a bledomodrý obrys na svetlosivej karte je stále bežné zlyhanie. Indikátor fokusu potrebuje dostatočný kontrast voči susedným farbám a dostatočnú plochu, aby bol postrehnuteľný.

Pri disabled ovládacích prvkoch majú pravidlá kontrastu WCAG výnimku pre neaktívne komponenty. To neznamená, že disabled prvky majú byť štandardne nečitateľné. Ak disabled stav nesie užitočnú informáciu, urobte ho čitateľným. Ak nie, zvážte, či tam vôbec má byť.

Použite Lighthouse, ale neoutsourcujte mu úsudok

Audity v prehliadači, ako Lighthouse, vedia rýchlo zachytiť niektoré zlyhania kontrastu. Spustite vstavaný audit, ak ho váš prehliadač poskytuje, a výsledky berte ako východisko.

Automatizované kontroly sú dobré v hľadaní textových uzlov so zjavnými zlyhaniami vypočítaného kontrastu. Slabšie sú pri:

• Texte vloženom v obrázkoch.
• Labeloch vykreslených cez canvas.
• Hraničných prípadoch SVG.
• Zlyhaniach iba v hover stave.
• Kvalite indikátora fokusu.
• Grafoch, kde farebné vzťahy nesú význam.
• Komponentoch skrytých za autentifikáciou, menu alebo krokmi formulára.

Ak sa report vráti zelený, stále musíte skontrolovať reprezentatívne komponenty. Ak sa report vráti červený, nepanikárte a trieďte zlyhania podľa dopadu na používateľov. Rovnaký princíp platí všeobecne pre výkonnostné a prístupnostné reporty: výstup nástroja čítajte ako dôkaz, nie ako rozsudok. Tento prístup používame v našom návode, ako čítať Lighthouse report bez paniky, a dobre sa hodí aj sem.

Auditujte aj netextový kontrast

Text získava väčšinu pozornosti, ale WCAG pokrýva aj netextový obsah potrebný na pochopenie alebo ovládanie rozhrania.

Skontrolujte aspoň tieto prípady:

• Okraje inputov voči pozadiu stránky.
• Obrysy checkboxov a radio tlačidiel.
• Stavy prepínačov.
• Tlačidlá iba s ikonou.
• Chybové ikony a varovné symboly.
• Čiary, stĺpce a labely grafov.
• Indikátory priebehu.
• Indikátory vybraného tabu alebo aktívnej navigácie.

Cieľ je zvyčajne 3:1 voči susedným farbám. Napríklad svetlosivý okraj inputu na bielom pozadí môže byť takmer neviditeľný. Graf s piatimi pastelovými čiarami môže pôsobiť elegantne a stále byť nepoužiteľný.

Pri grafoch samotný kontrast nestačí. Používajte labely, vzory, štýly čiar, priame anotácie alebo rozostupy, aby informácia nezávisela iba od farby. Pomáha to farboslepým používateľom, používateľom so slabým zrakom, ľuďom pozerajúcim sa pri odleskoch aj komukoľvek, kto číta screenshot v dokumente.

Zaznamenávajte zistenia vo formáte použiteľnom pre vývojárov

Užitočný audit kontrastu nehovorí „niektoré sivé odtiene nevyhovujú“. Identifikuje komponent, stav, aktuálne hodnoty, očakávaný prah a navrhovanú opravu.

Dobre funguje kompaktný formát:

| Komponent | Stav | Popredie | Pozadie | Pomer | Cieľ | Výsledok | Navrhovaná oprava | |---|---:|---:|---:|---:|---:|---|---| | Metadáta karty | Default | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Nevyhovuje | Použiť --color-text-muted-strong | | Primárne tlačidlo | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Vyhovuje | Ponechať | | Okraj inputu | Default | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Nevyhovuje | Stmaviť border token |

Ak web používa dizajnové tokeny, viažte opravy na ne. Neopravujte dvadsať jednotlivých komponentov, ak je skutočný problém jeden slabý token.

Robte opravy o niečo silnejšie než minimum

Zlyhania kontrastu sa často dajú opraviť zle veľmi ľahko. Tímy posunú farbu, kým kontrola neukáže 4.51:1, a pokračujú ďalej. To nenecháva žiadnu rezervu na vykresľovanie písma, priehľadnosť, rozdiely medzi prehliadačmi, témy, variabilitu obrázkov alebo budúce úpravy brandu.

Uprednostnite pohodlné ciele:

• Základný text: bližšie k 7:1, keď je to praktické.
• Tlmený text: stále nad 4.5:1, ak ide o skutočný obsah.
• UI okraje a ikony: pohodlne nad 3:1.
• Text nad obrázkami: používajte kontrolované prekrytie namiesto odhadovania pre každý obrázok.

Web sa zobrazuje na lacných laptopoch, tlmených telefónoch, jasných chodníkoch, tónovaných monitoroch a starnúcich displejoch. Minimálne splnenie pravidiel nie je to isté ako pohodlné čítanie.

<!-- tool-cta:start -->

💡 Vyskúšajte toto: Pri kontrole kontrastných dvojíc, ktoré ste získali z DevTools, Color Converter pomáha prevádzať medzi hex, RGB a HSL, aby hodnoty zodpovedali vašim poznámkam z auditu.

<!-- tool-cta:end -->

Checklist auditu kontrastu bez inštalácie

Použite túto postupnosť, keď potrebujete rýchly, ale dôveryhodný audit:

1. Otvorte produkčnú stránku v modernom prehliadači.
2. Spíšte hlavné vzory textu, UI a stavov.
3. Skontrolujte vypočítané farby popredia a pozadia v DevTools.
4. Pomocou vstavaného výberu farby alebo panela prístupnosti odčítajte kontrast.
5. Vynúťte stavy hover, focus, active, visited a invalid.
6. Skontrolujte text nad obrázkami a gradientmi voči najhoršiemu realistickému pozadiu.
7. Skontrolujte netextové časti UI voči požiadavke 3:1.
8. Spustite vstavaný automatizovaný audit ako bezpečnostnú sieť, nie ako celý audit.
9. Zaznamenajte zlyhania podľa komponentu a tokenu.
10. Opravujte s rezervou, nie len tesným prekročením prahu.

To stačí na zachytenie väčšiny problémov s kontrastom bez pridania ďalšieho nástroja do vášho stacku. Pokročilejšie audity stále majú svoje miesto, najmä pri veľkých dizajnových systémoch, regulovaných produktoch alebo komplexnej vizualizácii dát. Pri mnohých weboch vám však prehliadač už poskytuje dôkazy, ktoré potrebujete. Ťažká časť je byť dostatočne systematický, aby ste ich využili.