Jak auditovat barevný kontrast bez instalace čehokoli

Audity barevného kontrastu se často berou jako specializovaný úkol přístupnosti: otevřít designový soubor, nainstalovat plugin, exportovat screenshoty, spustit report, dohadovat se o brandových barvách. To může být užitečné, ale pro většinu týmů to není místo, kde začít.

U produkčního webu se nejrychlejší spolehlivý audit obvykle dělá v prohlížeči, který už máte otevřený. Moderní browser DevTools umí kontrolovat computed colors, zobrazit kontrastní poměry, odhalit styly stavů a pomoci otestovat nepříjemné případy, které automatizované reporty přehlédnou.

Tento průvodce předpokládá, že neinstalujete nic. Žádná browser extensions. Žádné design plugins. Žádný placený auditní balík. Jen stránka, prohlížeč a jednoduchá metoda.

Pravidla kontrastu, která skutečně potřebujete

Pro většinu webové práce se WCAG kontrast redukuje na několik prahů:

• Běžný text: kontrast vůči pozadí alespoň 4.5:1.
• Velký text: alespoň 3:1. WCAG to definuje přibližně jako 24 CSS pixelů, nebo asi 18.66 CSS pixelů, pokud je text tučný.
• UI komponenty a grafické objekty: alespoň 3:1 pro významové hranice, ikony, stavy a části grafů potřebné k pochopení rozhraní.
• Zvýšený kontrast: 7:1 pro běžný text a 4.5:1 pro velký text, pokud míříte nad základní úroveň.

Existují výjimky, například neaktivní ovládací prvky, dekorativní prvky a loga. Používejte je střídmě. „Je to součást brandu“ není výjimka; je to designové omezení.

Pamatujte také, že kontrast je jen jedna část přístupného používání barev. Pokud má červený chybový stav dostatečný kontrast, ale nemá text, popisek ikony nebo programatickou indikaci, pořád může selhat pro uživatele, kteří nedokážou odlišit červenou od blízkých barev.

Začněte vykreslenou stránkou, ne designovým souborem

Designové soubory jsou užitečné, ale nezahrnují všechny reálné proměnné: CSS overrides, opacity, hover states, vykreslování písem v prohlížeči, uživatelský zoom, dark mode, zděděné styly, obsah z CMS a marketingové embeds.

Auditujte stránku tak, jak ji dostávají uživatelé.

Otevřete stránku v aktuálním desktopovém prohlížeči. Chrome, Edge, Firefox i Safari mají užitečné inspekční nástroje. Přesné popisky se liší, ale postup je stejný:

1. Klikněte pravým tlačítkem na text nebo UI prvek.
2. Zvolte Inspect.
3. Najděte computed color a background-color.
4. Pomocí barevného vzorníku prohlížeče nebo panelu přístupnosti přečtěte kontrastní poměr.
5. Zaznamenejte pass, fail a nejistotu.

V prohlížečích založených na Chromium barevný picker často ukazuje kontrastní poměr a WCAG vodítka pass/fail pro text. Firefox DevTools také zpřístupňuje informace o přístupnosti a barevné nástroje. Safari Web Inspector umí zobrazit computed styles a informace o přístupnosti, i když postup je mírně odlišný.

Klíčový není konkrétní prohlížeč. Klíčové je číst computed result, ne hodnotu, o které si někdo myslí, že ji komponenta používá.

Nejprve si vytvořte krátký auditní seznam

Nekontrolujte náhodné texty, dokud vás to neunaví. Udělejte si krátký inventář vzorů:

• Body text na hlavním pozadí stránky.
• Muted text, popisky, metadata a placeholdery.
• Odkazy ve stavech normal, hover, visited a focus.
• Primary, secondary a destructive buttons.
• Popisky formulářů, nápověda, chyby a success messages.
• Navigační položky, breadcrumbs a tabs.
• Cards, badges, pills a tags.
• Ikony, které komunikují význam.
• Grafy, mapy, progress bars a status colors.
• Text přes obrázky, video, gradients nebo průsvitné overlays.

To stačí k nalezení většiny selhání na typickém webu. Audit tím zároveň zůstane navázaný na komponenty, ne na jednorázové pixely.

Pokud audit zahrnuje tlačítka, spojte kontrolu kontrastu se základy v našem checklistu pro přístupná webová tlačítka. Problémy s kontrastem tlačítek často leží vedle chybějících stavů focus, nejasných popisků nebo rozbitého ovládání klávesnicí.

Kontrolujte kontrast textu v DevTools

U prostého textu na jednolitém pozadí prohlížeč obvykle dokáže kontrast spočítat za vás.

Inspect element a vyhledejte vlastnost color. Otevřete color picker ze vzorníku. Pokud prohlížeč dokáže určit pozadí, ukáže kontrastní poměr. Některé nástroje v color pickeru také vykreslí čáru ukazující, kde by barva splnila 3:1, 4.5:1 nebo 7:1.

Když prohlížeč hlásí selhání, věřte mu, dokud neprokážete opak. Když hlásí úspěch, pořád používejte úsudek. Malé tenké písmo, nekvalitní displeje, výrazné anti-aliasing a rušná pozadí mohou způsobit, že technicky vyhovující text působí slabě.

Praktické pravidlo: pokud body text prochází jen těsně na 4.55:1, neoslavujte. Dejte mu větší rezervu. Požadavky na kontrast jsou minima, ne ideální cíle.

Záleží také na typografii. Větší a čitelnější typografický systém snižuje námahu ještě dřív, než začnete ladit barvy. Pokud se stránka i přes vyhovující kontrast čte obtížně, vraťte se k délce řádku, velikosti, váze a rozestupům širší optikou čitelnosti, například podle tohoto praktického průvodce čitelnou typografií.

Zkontrolujte skutečné pozadí, včetně opacity

Mnoho chyb kontrastu vzniká proto, že viditelné pozadí není deklarované pozadí.

Běžné pasti zahrnují:

• Text uvnitř poloprůhledné card.
• Text na rodiči s aplikovanou opacity.
• Overlays používající rgba() nebo color-mix().
• Gradients za nadpisy.
• Background images, které se v oblasti textu mění.
• Theme variables, které se mění v dark mode.

Pokud DevTools nedokážou kontrast spolehlivě spočítat, určete vykreslené barvy popředí a pozadí ručně. Použijte panel computed styles, dočasně vypněte vrstvy nebo nasamplujte viditelnou barvu vestavěným color pickerem, pokud to váš prohlížeč podporuje.

U textu přes obrázky nesamplujte nejhezčí část obrázku. Samplujte nejhorší pravděpodobnou oblast za textem. Pokud se obrázek mění přes CMS uploads, carousels nebo responsive crops, není to stabilní kontrastní systém. Přidejte spolehlivý overlay, text shadow, jednolitý kontejner nebo gradient treatment, který text ochrání bez ohledu na obrázek.

Dobrý systém překryvu obrázků je nudný: stejná síla overlay, předvídatelná oblast ořezu, dostatečný kontrast i se světlými fotografiemi. Nuda je v pořádku. Uživatelé se snaží číst.

Nezapomeňte na stavy

Statické screenshoty minou mnoho selhání kontrastu. Auditujte interakční stavy přímo v prohlížeči.

V DevTools vynuťte pseudo-classes, například:

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

Poté znovu zkontrolujte computed colors.

Focus indicators si zaslouží zvláštní pozornost. WCAG 2.2 zpřísnilo očekávání kolem vzhledu focus a bledě modrý outline na světle šedé card je stále běžné selhání. Focus indicator potřebuje dostatečný kontrast vůči sousedním barvám a dostatečnou plochu, aby byl postřehnutelný.

U disabled controls mají pravidla WCAG pro kontrast výjimku pro neaktivní komponenty. To neznamená, že disabled controls mají být ve výchozím stavu nečitelné. Pokud disabled state nese užitečnou informaci, udělejte ho čitelný. Pokud ji nenese, zvažte, zda má být vůbec přítomen.

Použijte Lighthouse, ale nepřenášejte na něj úsudek

Browser audits, jako je Lighthouse, dokážou rychle zachytit některá selhání kontrastu. Spusťte vestavěný audit, pokud ho váš prohlížeč nabízí, a výsledky berte jako výchozí bod.

Automatizované kontroly dobře nacházejí textové uzly se zjevnými computed contrast failures. Slabší jsou u:

• Textu vloženého v obrázcích.
• Popisků vykreslených v canvas.
• Okrajových případů SVG.
• Selhání pouze při hover.
• Kvality focus indicator.
• Grafů, kde barevné vztahy nesou význam.
• Komponent skrytých za autentizací, menu nebo kroky formuláře.

Pokud se report vrátí zelený, stále musíte zkontrolovat reprezentativní komponenty. Pokud se report vrátí červený, nepanikařte a roztřiďte selhání podle dopadu na uživatele. Stejný princip platí obecně pro reporty výkonu a přístupnosti: čtěte výstup nástroje jako důkaz, ne jako verdikt. Tento způsob uvažování používáme v našem průvodci čtením Lighthouse reportu bez paniky a tady sedí stejně dobře.

Auditujte také netextový kontrast

Text získává většinu pozornosti, ale WCAG pokrývá i netextový obsah potřebný k pochopení nebo ovládání rozhraní.

Zkontrolujte alespoň tyto případy:

• Input borders vůči pozadí stránky.
• Obrysy checkbox a radio.
• Toggle states.
• Icon-only buttons.
• Error icons a warning symbols.
• Chart lines, bars a labels.
• Progress indicators.
• Selected tab nebo active navigation indicators.

Cíl je obvykle 3:1 vůči sousedním barvám. Například světle šedý input border na bílém pozadí může být téměř neviditelný. Graf s pěti pastelovými liniemi může vypadat elegantně a přesto být nepoužitelný.

U grafů kontrast sám o sobě nestačí. Používejte popisky, vzory, styly čar, přímé anotace nebo rozestupy, aby informace nezávisela pouze na barvě. Pomáhá to barvoslepým uživatelům, slabozrakým uživatelům, lidem sledujícím obrazovku v odlescích i komukoli, kdo čte screenshot v dokumentu.

Zaznamenávejte zjištění ve formátu použitelném pro vývojáře

Užitečný audit kontrastu neříká „některé šedé selhávají“. Identifikuje komponentu, stav, aktuální hodnoty, očekávaný práh a navrženou opravu.

Dobře funguje kompaktní formát:

| Component | State | Foreground | Background | Ratio | Target | Result | Suggested fix | |---|---:|---:|---:|---:|---:|---|---| | Card metadata | Default | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Fail | Use --color-text-muted-strong | | Primary button | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Pass | Keep | | Input border | Default | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Fail | Darken border token |

Pokud web používá design tokens, navazujte opravy na ně. Neopravujte dvacet jednotlivých komponent, pokud je skutečným problémem jeden slabý token.

Dělejte opravy o něco silnější než minimum

Selhání kontrastu se často snadno opravují špatně. Týmy posunou barvu, dokud kontrola neukáže 4.51:1, a jdou dál. To nenechává žádnou rezervu pro vykreslování písem, průhlednost, rozdíly mezi prohlížeči, theming, proměnlivost obrázků ani budoucí úpravy brandu.

Preferujte pohodlné cíle:

• Body text: blíže k 7:1, když je to praktické.
• Muted text: stále nad 4.5:1, pokud jde o skutečný obsah.
• UI borders a icons: pohodlně nad 3:1.
• Text přes obrázky: použijte kontrolovaný overlay místo odhadování po jednotlivých obrázcích.

Web se prohlíží na levných noteboocích, ztlumených telefonech, jasných chodnících, tónovaných monitorech a stárnoucích displejích. Minimální soulad není totéž co pohodlné čtení.

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

💡 Vyzkoušejte: Při kontrole kontrastních dvojic, které jste získali z DevTools, Color Converter pomáhá převádět mezi hex, RGB a HSL, aby hodnoty odpovídaly vašim poznámkám z auditu.

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

Checklist auditu kontrastu bez instalace

Použijte tuto posloupnost, když potřebujete rychlý, ale věrohodný audit:

1. Otevřete produkční stránku v moderním prohlížeči.
2. Sepište hlavní textové, UI a stavové vzory.
3. Zkontrolujte computed foreground a background colors v DevTools.
4. Pomocí vestavěného color pickeru nebo panelu přístupnosti přečtěte kontrast.
5. Vynuťte hover, focus, active, visited a invalid states.
6. Zkontrolujte text přes obrázky a gradients vůči nejhoršímu pravděpodobnému pozadí.
7. Zkontrolujte netextové části UI vůči požadavku 3:1.
8. Spusťte vestavěný automatizovaný audit jako záchrannou síť, ne jako celý audit.
9. Zaznamenejte selhání podle komponent a tokenů.
10. Opravujte s rezervou, ne tak, abyste sotva překročili práh.

To stačí k zachycení většiny problémů s kontrastem bez přidávání dalšího nástroje do stacku. Pokročilejší audity mají stále své místo, zejména u velkých design systems, regulovaných produktů nebo komplexní vizualizace dat. Pro mnoho webů vám ale už prohlížeč dává důkazy, které potřebujete. Nejtěžší je být dost systematický na to, abyste je využili.