WCAG 1.4.11 Contrast non-text

Criteriul de succes 1.4.11 asigură că persoanele cu vedere slabă pot vedea părțile unei pagini de care au nevoie pentru a o folosi și a o înțelege: unde se află un câmp de formular, ce arată o pictogramă, ce opțiune este selectată, unde se află focusul tastaturii. A fost adăugat în WCAG 2.1, este de nivelul AA și face parte din EN 301 549 (clauza 9.1.4.11).

Ce cere criteriul

Prezentarea vizuală a următoarelor elemente trebuie să aibă un raport de contrast de cel puțin 3:1 față de culoarea (culorile) alăturată(e):

• Componentele interfeței cu utilizatorul: informațiile vizuale necesare pentru a identifica o componentă și stările ei — chenarul unui câmp de text, conturul unei casete de bifare, bifa însăși, indicatorul filei selectate, indicatorul de focus;
• Obiectele grafice: părțile graficelor necesare pentru a înțelege conținutul — liniile și barele unei diagrame, părțile unei pictograme care au sens.

Excepții:

• componentele inactive (de exemplu un buton dezactivat);
• componentele al căror aspect este determinat de browser și nu este modificat de autor;
• graficele în care o anumită prezentare este esențială (de exemplu o fotografie sau o hartă termică, unde schimbarea culorilor ar schimba informația).

Textul nu este vizat aici — el intră sub 1.4.3.

Greșeli tipice într-un magazin online

• chenare gri deschis la câmpurile de introducere (#ddd pe alb este mult sub 3:1), fără alt indiciu;
• casete de bifare, butoane radio și selectoare de mărime personalizate, a căror stare selectată este doar o nuanță palidă;
• butoane doar cu pictogramă (căutare, coș, listă de dorințe) într-o culoare de brand deschisă;
• un inel de focus personalizat într-o culoare deschisă sau outline: none cu un înlocuitor abia vizibil;
• evaluări cu stele în care stelele goale sunt palide, iar cele pline doar puțin mai închise;
• liniile graficelor din panoul contului clientului, prea deschise față de fundal.

Cum se verifică

Automat: nicio regulă automată din verificatorul nostru nu corespunde acestui criteriu. axe-core măsoară contrastul textului, dar nu poate identifica ce chenare, pictograme sau stări sunt necesare pentru a înțelege o componentă. Este nevoie de o verificare manuală.

Manual: pentru fiecare câmp de formular, buton, pictogramă și stare (implicită, hover, focus, selectată, eroare), luați culoarea părții esențiale și culoarea de lângă ea și măsurați-le cu un verificator de contrast. Raportul trebuie să fie de cel puțin 3:1. Parcurgeți pagina cu tasta Tab pentru a verifica fiecare indicator de focus.

Cum se remediază

• Închideți la culoare chenarele câmpurilor și culorile pictogramelor în temă până când ating 3:1 față de fundal.
• Arătați stările selectate cu un chenar clar, o bifă sau o umplere, nu doar cu o nuanță palidă.
• Folosiți un indicator de focus cu un contrast de cel puțin 3:1 față de culorile alăturate, de exemplu un contur închis de 2 px cu decalaj.
• Adăugați etichete directe sau modele (hașuri) în grafice, dacă nu toate culorile pot atinge 3:1.

Criterii conexe

• 1.4.3 Contrast (minim) — 4,5:1 pentru text.
• 1.4.1 Utilizarea culorii — culoarea nu trebuie să fie singurul indiciu.
• Verificator de contrast — măsurați două culori.

Întrebări frecvente

Au nevoie chenarele câmpurilor de formular de un contrast de 3:1?

Dacă chenarul este singurul indiciu vizual care arată unde se află câmpul, da: are nevoie de 3:1 față de culoarea alăturată. Un câmp cu o culoare de fundal care contrastează clar se poate baza pe aceasta.

Au nevoie butoanele dezactivate de un contrast de 3:1?

Nu. Componentele de interfață inactive (dezactivate) sunt exceptate, la fel ca și controalele al căror aspect provine din browser și nu a fost modificat de autor.

Se aplică 1.4.11 pictogramelor?

Da, dacă pictograma este necesară pentru a înțelege conținutul sau pentru a identifica un control — de exemplu o pictogramă de coș, de căutare sau de închidere fără etichetă text. Pictogramele pur decorative nu sunt vizate.

Poate un instrument automat să verifice contrastul non-text?

Nu în mod fiabil. Verificatorul nostru măsoară contrastul textului, dar chenarele, pictogramele, inelele de focus și elementele graficelor trebuie verificate manual cu un verificator de contrast.