1.4.3 Tlačidlá a odkazy majú pri umiestnení kurzora myši nedostatočný kontrast

Porušenie sa týka celého webového sídla.

Popis problému:

Primárne tlačidlá (napríklad „Začať“, „Začať podpisovať dokumenty“, „Nahrať a pokračovať“) majú v bežnom stave biely text na pozadí #155DFC (5,25 : 1), pri umiestnení kurzora myši sa však pozadie zmení triedou hover:bg-blue-500 na #2B7FFF a kontrast klesne na 3,76 : 1. Odkazy („Prihlásiť sa“, „Registrovať sa“, „Nedostali ste potvrdzovací e-mail?“, „Dozvedieť sa viac“) sa pri umiestnení kurzora prefarbia triedou hover:text-blue-500 na #2B7FFF s kontrastom 3,76 : 1 voči bielemu pozadiu. Požadované minimum pre bežný text je 4,5 : 1 a platí aj pre stavy pri umiestnení kurzora. Meranie bolo vykonané vynútením stavu :hover na všetkých odkazoch a tlačidlách 38 stavov stránok.

Dopad:

Používatelia so slabým zrakom, ktorí ovládajú stránku myšou, pri presune kurzora na tlačidlo alebo odkaz stratia čitateľnosť textu presne vo chvíli, keď sa rozhodujú, či ho aktivovať. Postihnutí sú aj používatelia zväčšenia obrazovky, ktorí kurzorom sledujú čítaný text.

Závažnosť: stredná — stav je dočasný, týka sa však všetkých primárnych akcií portálu.

Efektívne riešenie:

Pre splnenie kritéria úspešnosti je potrebné pre stav :hover použiť tmavší odtieň namiesto svetlejšieho, napríklad hover:bg-blue-700 (#1447E6) pre tlačidlá a hover:text-blue-800 pre odkazy. Zmenu stavu je možné zvýrazniť aj podčiarknutím alebo tieňom bez straty kontrastu.