1.4.11 Nevybrané prepínače vo voľbách typu karta majú nedostatočný kontrast

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

Popis problému:

Voľby v procese podpisovania („Vyberte akciu“, „Typ podpisu“, výber občianskeho preukazu, výber podpisovej aplikácie, pravidlo podpisovania balíka) sú vytvorené spoločnou komponentou shared/_radio_button_card. Natívny prepínač je skrytý triedou sr-only a vizuálne ho nahrádza krúžok <div class="w-4 h-4 border border-gray-300 rounded-full">. Farba orámovania krúžku #D1D5DC dosahuje na bielom pozadí kontrastný pomer 1,47 : 1; orámovanie celej karty #E5E7EB dosahuje 1,24 : 1. Požadované minimum pre grafické prvky ovládacích prvkov je 3 : 1.

Dopad:

Krúžok je jediným vizuálnym znakom, že ide o voľbu prepínača, a v nevybranom stave ho používatelia so slabým zrakom a so zníženou citlivosťou na kontrast prakticky nevidia. Nevedia tak rozpoznať, že kartu je možné zvoliť, ani koľko možností majú k dispozícii, pretože zreteľne viditeľná je iba práve vybraná karta. Problém sa zhoršuje na displejoch s vysokým jasom alebo pri slnečnom svetle.

Závažnosť: vysoká — týka sa všetkých rozhodovacích krokov podpisovania.

Efektívne riešenie:

Pre splnenie kritéria úspešnosti je potrebné orámovanie krúžku (a odporúčane aj orámovanie karty) zobraziť farbou s kontrastným pomerom minimálne 3 : 1 voči pozadiu, napríklad triedou border-gray-500 (#6A7282, 4,84 : 1):

<div class="w-4 h-4 border border-gray-500 rounded-full …">