WCAG 1.4.1 Utilizarea culorii

Criteriul de succes 1.4.1 asigură că informațiile nu se pierd pentru persoanele care văd culorile diferit sau nu le văd deloc — persoane cu deficiențe de vedere a culorilor, persoane cu vedere slabă și oricine folosește un ecran monocrom sau cu contrast ridicat. Este de nivelul A și face parte din EN 301 549 (clauza 9.1.4.1).

Ce cere criteriul

Culoarea nu trebuie să fie singurul mijloc vizual de a:

• transmite informații („prețurile reduse sunt cu roșu”);
• indica o acțiune;
• solicita un răspuns;
• distinge un element vizual (de exemplu un link în interiorul unui paragraf).

Culoarea poate fi folosită în continuare — are nevoie doar de un al doilea indiciu vizual: text, o pictogramă, o subliniere, un model sau o formă.

Pentru linkurile din text, documentul W3C Understanding acceptă o diferență de luminozitate ca indiciu suplimentar: dacă culoarea linkului are un contrast de cel puțin 3:1 față de textul din jur (tehnica G183), linkul este considerat distinctibil. Linkurile care nu se disting vizual deloc nu intră sub 1.4.1, deși sunt greu de folosit.

Greșeli tipice într-un magazin online

• linkuri în descrierile produselor, în politici sau în subsolul paginii, afișate doar într-o culoare ușor diferită, fără subliniere;
• câmpuri de formular invalide marcate doar printr-un chenar roșu;
• starea stocului afișată ca un punct verde sau roșu, fără text („În stoc”, „Stoc epuizat”);
• mostre de culoare fără denumire, astfel încât cumpărătorul nu poate deosebi „bleumarin” de „negru”;
• grafice sau ghiduri de mărimi în care categoriile diferă doar prin culoare;
• mărimea selectată sau pasul curent indicat doar printr-o schimbare de culoare.

Cum se verifică

Automat: verificatorul nostru semnalează linkurile dintr-un bloc de text care pot fi deosebite de textul din jur doar prin culoare (regula link în bloc de text). Alte utilizări ale culorii — puncte de stare, stări de eroare, grafice — nu pot fi evaluate automat și necesită o verificare manuală.

Manual: vizualizați pagina în tonuri de gri (cu o extensie de browser sau cu filtrul de culori al sistemului de operare). Tot ce nu mai puteți înțelege — care link este link, ce câmp are o eroare, ce opțiune este selectată — nu trece criteriul. Verificați stările hover, focus, eroare și selectat.

Cum se remediază

• Subliniați linkurile din text, cel puțin în textul principal și la hover și focus.
• Adăugați text și o pictogramă la erori și la starea stocului.
• Afișați denumirea fiecărei mostre de culoare, cel puțin ca nume accesibil și la selectare.
• Folosiți în grafice modele, etichete sau adnotări directe pe lângă culoare.
• Marcați opțiunea selectată cu un chenar, o bifă sau text îngroșat, nu doar cu o culoare nouă.

Criterii conexe

• 1.4.3 Contrast (minim) — 4,5:1 pentru text.
• 1.4.11 Contrast non-text — 3:1 pentru pictograme și controale.
• 1.3.3 Caracteristici senzoriale — instrucțiuni care se bazează pe culoare.

Întrebări frecvente

Trebuie linkurile din text să fie subliniate?

Nu întotdeauna, dar doar culoarea nu este suficientă, decât dacă oferă o diferență de luminozitate de cel puțin 3:1 față de textul din jur (tehnica W3C G183). Cea mai simplă și mai sigură variantă este sublinierea.

Este suficient un chenar roșu la un câmp invalid?

Nu. Adăugați un al doilea indiciu care nu depinde de culoare, cum ar fi o pictogramă și un mesaj de eroare în text. Criteriul 3.3.1 Identificarea erorilor cere, de asemenea, ca eroarea să fie descrisă în text.

Interzice 1.4.1 codificarea prin culori?

Nu. Culoarea este permisă și utilă; doar că nu trebuie să fie singurul mijloc vizual. Adăugați lângă ea text, un model, o pictogramă sau o formă.

Este 1.4.1 despre contrast?

Nu. Contrastul textului ține de 1.4.3, iar cel al pictogramelor și controalelor de 1.4.11. 1.4.1 se referă la culoare ca singur semnal, indiferent de contrast.