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
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.
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 ←