Verificator de Contrast calculează raportul de contrast WCAG 2.1 dintre două culori și le notează în raport cu pragurile AA/AAA, atât pentru text normal, cât și pentru text mare. Previzualizarea live arată text redat în culorile alese, iar un buton „pick page background” preia culoarea de fundal a paginii curente.
Accesibilitatea este din ce în ce mai des o cerință — conformitatea WCAG este o obligație legală în multe jurisdicții, iar chiar și acolo unde nu este, un contrast slab îndepărtează utilizatorii. Verificator de Contrast vă spune instant dacă oricare două culori îndeplinesc standardele WCAG. Alegeți o culoare de prim-plan și una de fundal prin selector de culoare sau lipiți valori hex; instrumentul calculează raportul de contrast folosind formula oficială WCAG de luminanță și îl notează în raport cu patru praguri: AA normal (≥4,5:1), AA mare (≥3:1), AAA normal (≥7:1) și AAA mare (≥4,5:1). Fiecare prag arată un ecuson clar Pass/Fail. O previzualizare live redă text mare și normal în culorile alese, astfel încât să vedeți impactul vizual real. Un buton de conveniență preia culoarea de fundal a body-ului paginii curente — util pentru a verifica dacă o combinație de culori de pe un site real trece testul. Totul rulează local, în browser, fără încărcări de date.
Folosește formula oficială WCAG de luminanță pentru a calcula raportul de contrast. Rezultatul este exact și se potrivește cu orice verificator de accesibilitate conform.
Pass/fail pentru AA normal (≥4,5:1), AA mare (≥3:1), AAA normal (≥7:1), AAA mare (≥4,5:1) — toate afișate sub formă de grilă.
Redă text mare și normal real în culorile alese, astfel încât să vedeți impactul vizual alături de raportul numeric.
Un singur clic preia culoarea de fundal calculată a body-ului paginii curente — util pentru testarea combinațiilor din lumea reală.
Tastați o valoare hex sau folosiți selectorul nativ de culoare. Valorile se sincronizează bidirecțional pe măsură ce editați oricare dintre ele.
Un singur clic inversează culorile de prim-plan și fundal — util la verificarea temelor inversate sau a stărilor de hover.
Înainte de a finaliza o paletă de culori, verificați fiecare culoare de text față de fundalul său pentru a asigura conformitatea WCAG AA — evitați refacerea lucrului ulterior.
Folosiți „pick page background” pe un site live, apoi lipiți culoarea reală a textului — găsiți probleme de accesibilitate în câteva minute, fără să deschideți Lighthouse.
Când brandul alege o culoare care ar putea eșua testele de accesibilitate, folosiți verificatorul pentru a găsi cea mai apropiată variantă conformă (nuanță mai închisă/deschisă).
Verificați că și culorile stărilor hover/active/disabled îndeplinesc cerințele de contrast, nu doar culoarea implicită.
Temele întunecate eșuează adesea contrastul pentru text gri pe gri. Verificați cele mai închise nuanțe de gri față de cele mai închise fundaluri pentru a depista aceste cazuri.
Faceți clic pe iconița Contrast din dock-ul DevSuite Pro. Se deschide un panou cu câmpuri pentru culoarea de prim-plan și de fundal.
Folosiți selectorul de culoare sau lipiți o valoare hex pentru fiecare. Previzualizarea live se actualizează pe măsură ce schimbați culorile.
Numărul mare (de ex. 4,8:1) este raportul de contrast. Cu cât mai mare, cu atât mai bine. 3 este minimul absolut; 4,5 este ținta pentru text normal.
Ecusoanele Pass/fail pentru AA și AAA, text normal și mare, arată dintr-o privire pentru ce se califică combinația dvs.
Dacă nu treceți, modificați culorile. Întunecați prim-planul sau deschideți fundalul (sau invers) până când nivelul țintă arată Pass.
Instalează DevSuite Pro gratuit și deblochează peste 64 de instrumente pentru dezvoltatori în browserul tău.
