Textul gri deschis pe un fundal alb poate arăta elegant și minimalist dintr-o privire - și poate fi complet ilizibil pentru utilizatorii cu deficiențe de vedere, lumina puternică a soarelui pe ecran sau doar oboseala obișnuită a ochilor la sfârșitul unei zile de lucru. Contrastul de culoare este unul dintre cele mai „tehnice” criterii de accesibilitate – există numere exacte de îndeplinit – dar este și unul dintre cele mai ușor de testat și de reparat în avans.

Pe scurt, ce acoperă acest ghid

  1. Ce rapoarte necesită WCAG
  2. De ce este permis textul mare, mai puțin contrast
  3. Cum se verifică un raport de contrast în practică
  4. Cum să alegeți în avans o paletă de culori accesibilă

Ce rapoarte necesită WCAG

WCAG definește un raport de contrast ca un număr între 1:1 (fără contrast deloc - culoare identică) și 21:1 (contrastul maxim posibil - negru pur pe alb pur). La nivelul AA (nivelul obligatoriu în majoritatea locurilor, inclusiv în Israel), cerința este un raport de cel puțin 4,5:1 între textul obișnuit și fundalul din spatele acestuia. La nivelul AAA mai strict, cerința crește la 7:1.

De ce este permis textul mare Mai puțin contrast

Textul mare rămâne lizibil chiar și cu un contrast mai mic, așa că WCAG îi stabilește un prag mai ușor: 3:1 la nivelul AA (în loc de 4,5:1) și 4,5:1 la nivelul AAA (în loc de 7:1). „Text mare” este definit ca text de 18 puncte sau mai mare (aproximativ 24 px) sau 14 puncte sau mai mare (aproximativ 18,7 px) dacă este aldine. Titlurile mari, de exemplu, își pot „permite” un contrast ușor mai mic decât un paragraf obișnuit și îndeplinesc totuși cerințele.

Diagrama ilustrativă Compararea raporturilor de contrast Trei exemple de text pe fundal cu diferite rapoarte de contrast Raportul de contrast între text și fundal Exemplu de text 1.8:1 — ✕ eșuează Exemplu de text 7.1:1 — ✓ îndeplinește și AAA Exemplu de text 5.4:1 — ✓ îndeplinește nivelul AA Text obișnuit: cel puțin 4,5:1 · Text mare (24 px+, sau 18,7 px bold): cel puțin 3:1 Instrumente precum Verificatorul de contrast WebAIM vă oferă raportul exact înainte de a finaliza o paletă de culori
Trei exemple de text pe fundal: un raport prea mic (1,8:1) eșuează chiar și la nivelul de bază; celelalte două rapoarte îndeplinesc cerințele AA și, respectiv, AAA.

Cum să verificați un raport de contrast în practică

Nu este nevoie să-l calculați manual - instrumente gratuite, cum ar fi WebAIM Contrast Checker, vă permit să introduceți textul și codurile de culoare de fundal și să obțineți imediat raportul exact și un scor de promovare/reșes pentru fiecare nivel. Merită să verificați nu doar textul pe un fundal solid, ci și textul peste imagini de fundal sau degrade - unde contrastul poate varia între diferite zone ale aceleiași imagini, așa că cel mai bine este să testați cel mai „problematic” loc.

💡 Sfat practic

Nu doar text: aceeași cerință de contrast (la un prag mai ușor, 3:1) se aplică și componentelor grafice ale interfeței de utilizare, cum ar fi contururile câmpurilor de formular, pictogramele funcționale și chenarele butoanelor - nu numai literelor.

Cum să alegeți în avans o paletă de culori accesibilă

Cea mai eficientă abordare este verificarea contrastului în etapa de proiectare a șablonului, nu în fiecare document separat. Atunci când alegeți culorile mărcii pentru titluri, textul corpului și link-uri, merită să confirmați în prealabil că fiecare combinație de text-fond pe care o utilizați îndeplinește cel puțin 4,5:1. În acest fel, fiecare document nou creat din șablon „moștenește” automat contrastul corespunzător, în loc să verifice fiecare document separat după ce a fost deja scris.

Doriți să știți dacă documentele dvs. îndeplinesc cerințele de contrast?

Instrumentul nostru verifică contrastul culorilor ca parte a scanării automate a fiecărui fișier PDF de pe site-ul dvs.

Scanează-ți site-ul gratuit ←