WCAG AAA: recomandare Prioritate: Minor
Textul nu atinge nivelul de contrast ridicat (AAA)
Unele texte îndeplinesc nivelul de bază al contrastului, dar nu pe cel mai strict: 7:1 pentru text normal și 4.5:1 pentru text mare. Este o practică recomandată dincolo de WCAG AA, nu o cerință obligatorie.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Un contrast mai mare îi ajută pe clienții cu vedere moderat slabă, pe persoanele în vârstă și pe oricine citește pe telefon în soare. Prețurile și butoanele devin mai ușor de citit pentru toți, dar lipsa lui nu înseamnă neîndeplinirea nivelului AA pe care se bazează legea.
Pe cine afectează
- persoane cu vedere slabă
- clienți în vârstă
- persoane cu deficiențe de vedere a culorilor
- persoane care folosesc telefonul în lumină puternică
Cum se remediază
Acolo unde este practic, ridicați contrastul la 7:1 pentru text normal și 4.5:1 pentru text mare (24px sau 18.66px îngroșat), începând cu textul principal, prețurile și finalizarea comenzii. Închideți culorile textului sau deschideți fundalurile în tokenurile de design sau în CSS. Rezolvați mai întâi problemele de bază de contrast 4.5:1 (regula color-contrast); această verificare este doar o sugestie suplimentară.
În Shopify
De obicei provine din schema de culori a temei. Alegeți culori mai închise pentru text în setările de culori ale editorului de teme; dacă tema are culorile fixate în cod, modificați-le în CSS-ul temei.
În Shoptet (CZ)
De obicei provine din șablonul ales și din setările lui de culori. Alegeți culori mai închise pentru text în setările șablonului sau adăugați CSS personalizat prin opțiunile de cod personalizat din Shoptet.
În PrestaShop
De obicei definite în CSS-ul temei. Suprascrieți culorile în fișierul CSS personalizat al temei sau într-o temă copil; unele teme au opțiuni de culoare în modulul lor de configurare.
În WooCommerce
De obicei stabilite de tema activă sau de page builder. Modificați culorile în Customizerul temei sau în stilurile globale ori suprascrieți-le în CSS-ul unei teme copil.
Standarde
| Standard | Punct |
|---|---|
| WCAG 2.2 | 1.4.6 (AAA) Contrast (Enhanced) |
| WCAG 2.1 | 1.4.6 (AAA) Contrast (Enhanced) |
| WCAG 2.0 | 1.4.6 (AAA) Contrast (Enhanced) |
Verificare automată: regula axe-core color-contrast-enhanced.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Textul nu atinge nivelul de contrast ridicat (AAA)
WCAG 1.4.6 AAA
-
Linkuri cu același text duc în locuri diferite
WCAG 2.4.9 AAA
-
Pagina se reîncarcă singură după un timp, chiar și lung
WCAG 2.2.4 AAA