Cerință WCAG A/AA Prioritate: Grav
Textul este greu de citit din cauza contrastului scăzut
Unele texte sunt prea deschise la culoare față de fundal, de exemplu text gri pe alb sau text alb pe un buton pal.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Cumpărătorii cu vedere slabă, clienții mai în vârstă și oricine folosește telefonul afară pot rata prețuri, condiții de livrare sau etichetele butoanelor. Textul greu de citit duce la ezitare și la coșuri abandonate.
Pe cine afectează
- persoanele cu vedere slabă
- clienții mai în vârstă
- persoanele cu deficiențe de percepție a culorilor
- persoanele care folosesc telefonul în lumină puternică
Cum se remediază
Asigurați un raport de contrast de cel puțin 4.5:1 pentru textul normal și 3:1 pentru textul mare (24px sau 18.66px bold). Verificați placeholder-ele, stările care par dezactivate, textul pe imagini și etichetele de reducere. Corectați culorile în design tokens sau în CSS, nu element cu element.
În Shopify
De obicei, provine din schema de culori a temei. Ajustați mai întâi culorile textului și ale fundalului în setările de culoare din editorul temei; dacă tema are culori fixate în cod, modificați-le în CSS-ul sau în secțiunile Liquid ale temei.
În Shoptet (CZ)
De obicei, provine din șablonul ales și din setările lui de culoare. Ajustați culorile în setările șablonului sau adăugați CSS personalizat prin opțiunile de cod personalizat oferite de Shoptet.
În PrestaShop
De obicei, este definit în CSS-ul temei. Suprascrieți culorile în fișierul CSS personalizat al temei sau într-o temă copil; unele teme oferă opțiuni de culoare în modulul lor de configurare.
În WooCommerce
De obicei, este setat de tema activă sau de page builder. Modificați culorile în customizer-ul temei sau în stilurile globale ori suprascrieți-le în CSS-ul unei teme copil, ca actualizările să nu anuleze corectura.
Standarde
| Standard | Punct |
|---|---|
| WCAG 2.2 | 1.4.3 (AA) Contrast (Minimum) |
| WCAG 2.1 | 1.4.3 (AA) Contrast (Minimum) |
| WCAG 2.0 | 1.4.3 (AA) Contrast (Minimum) |
| EN 301 549 4.1.1 | 9.1.4.3 |
| EN 301 549 3.2.1 | 9.1.4.3 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.4.3 |
Verificare automată: regula axe-core color-contrast.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Elemente pe care se poate da clic sunt incluse unele în altele
WCAG 4.1.2 A
-
Titlul unui tabel este scris într-o celulă a tabelului
WCAG 1.3.1 A
-
O imagine pe care se poate da clic funcționează doar cu mouse-ul
WCAG 2.1.1 A
-
Un buton-imagine nu are descriere text
WCAG 1.1.1 A