Text s nedostatečným kontrastem vůči pozadí

Stránka se načte ve skutečném prohlížeči a projdou se viditelné texty (nejvýš 400 uzlů na stránku, texty kratší než 2 znaky se přeskakují). U každého se spočítá kontrastní poměr mezi barvou textu a barvou pozadí a porovná se s požadavkem WCAG: 4,5 : 1 pro běžný text, 3 : 1 pro velký.

Za „velký text“ se považuje 24 px a víc, nebo 18,66 px a víc při tučném řezu; to je definice z normy, ne naše. Report uvede počet dvojic pod hranicí, celkový počet a podíl.

Závažnost je dynamická: když je pod hranicí víc než 30 % posuzovaných dvojic (config/colors.json#severity.color01_critical_ratio), nález se zvedne na kritický. Jinak je to varování.

Co kontrola nedělá: neposuzuje text na obrázku, nepočítá kontrast proti přechodu ani proti fotografii pod textem (bere barvu pozadí, jak ji hlásí prohlížeč), a nevidí stavy jako najetí myší nebo fokus. Nález je na úrovni stránky.

Na viditelnost v odpovědích AI to vliv nemá žádný: barva textu je vlastnost vykreslení, text v HTML je stejný. Proto „efekt nedoložený“, a je to jediná poctivá klasifikace vzhledem k tomu, co tenhle produkt měří.

Zároveň je to ale kód s nejtvrdší oporou mezi kódy placených modulů, jen ta opora je jinde, než kam se zbytek auditu dívá. 4,5 : 1 je normativní požadavek WCAG 1.4.3, úroveň AA, a v Evropě je součástí legislativy o přístupnosti. Není to doporučení a není to konvence.

Koho se to týká: lidí se sníženým zrakem, s šedým zákalem, starších uživatelů, a všech ostatních, kdykoli čtou telefon na slunci. Nízký kontrast není estetická volba, je to bariéra.

Kde je naše měření slabší, než vypadá, a je fér to vědět: bereme barvu pozadí tak, jak ji hlásí prohlížeč. Text položený na fotografii nebo na přechodu tedy posoudíme podle barvy pod ním v tom bodě, ne podle nejhoršího místa. U takových prvků se spolehněte na vlastní oči, ne na naše číslo.

Praktický závěr: tenhle nález opravujte, i když vám audit koupil někdo kvůli AI. Je to jediná položka z kódů placených modulů, kterou dlužíte konkrétním lidem.

Nejdřív zjistěte, jestli jde o jednu barvu použitou na mnoha místech, nebo o mnoho různých problémů. Skoro vždycky je to to první: jeden odstín šedé v návrhu, který se nedotáhl.

Typické případy, seřazené podle četnosti:

1. Světle šedý text pro „méně důležité“ informace: popisky, poznámky pod formulářem, datum u článku. Vypadá to jemně a je to nejčastější příčina vůbec.
2. Text na barevném tlačítku: bílá na světlé oranžové nebo žluté projde zřídka.
3. Odkazy v barvě značky na bílém pozadí, když je ta barva světlá.
4. Text na obrázku bez podkladu.

Oprava je ztmavení textu nebo zesvětlení pozadí, dokud poměr nevyjde. Rozdíl bývá menší, než se čeká: z #999999 na #767676 je na bílém pozadí rozdíl mezi 2,8 : 1 a 4,5 : 1, a okem je to skoro nepoznat.

• Nezvyšujte kontrast tím, že text ztučníte. Tučný řez sníží požadavek jen u písma nad 18,66 px; u drobného textu nepomůže.
• U textu na obrázku dejte pod text podklad: poloprůhlednou vrstvu nebo plnou plochu. Stín textu je nespolehlivý.
• Stavy kontrolujte zvlášť. Odkaz po najetí často mění barvu na světlejší a norma platí i pro něj; naše kontrola to nevidí.
• Opravujte v proměnných, ne po místech. Když máte barvy v CSS proměnných, je to jedna změna; když jsou roztroušené, je to padesát.