Lizibil pentru toți

Un subtitlu mare

Textul de corp suferă cel mai mult de contrastul scăzut, pentru că este citit mai mult timp și la dimensiune mică. Un link text

Buton

Culoarea textului

Opacitatea textului

Culoarea fundalului

Simulare daltonism

Temă

Mai multe informații despre contrastul culorilor

Verificator de contrast al culorilor

Verifică dacă textul se citește pe fundalul său înainte să publici un design. Alege sau scrie o culoare a textului și una a fundalului, iar verificatorul arată raportul de contrast WCAG 2.x cu trece sau nu trece pentru AA și AAA, pentru text normal, text mare și componente UI. Previzualizarea live, simularea daltonismului și corecțiile sugerate te ajută să găsești o pereche care funcționează. Alege o culoare a textului și un fundal în HEX, RGB sau HSL. Raportul de contrast WCAG, rezultatele AA și AAA și previzualizarea se actualizează pe măsură ce scrii, iar cele mai apropiate culori care trec sunt sugerate. Totul se salvează în acest browser.

Cum funcţionează

Alege o culoare a textului și una a fundalului sau scrie-le în HEX, RGB ori HSL. Setează opacitatea textului dacă este semitransparent.
Citește raportul de contrast și insignele AA și AAA pentru text normal, text mare și componente UI și urmărește previzualizarea live.
Aplică o culoare sugerată dacă perechea nu trece, salvează perechile bune în paletă și copiază CSS în proiectul tău.

Corecții, nu doar note

Când o pereche nu trece, verificatorul caută cea mai apropiată culoare a textului și a fundalului, cu aceeași nuanță și saturație, care atinge AA și AAA, iar un clic o aplică. Textul semitransparent este mai întâi amestecat cu fundalul, exact cum îl desenează browserul.

Privat și portabil

Culorile și paleta ta sunt păstrate doar în acest browser. Salvează totul ca JSON pentru copie de siguranță sau pentru alt dispozitiv, ori salvează rezultatul ca PDF sau imagine. Anularea și refacerea acoperă fiecare modificare.

Întrebări frecvente

Verificatorul de contrast este gratuit?

Da. Este gratuit, nu cere cont și funcționează în orice browser modern.

Ce raport îmi trebuie?

Nivelul AA din WCAG cere cel puțin 4,5:1 pentru text normal și 3:1 pentru text mare și pentru componente UI precum marginile câmpurilor și pictogramele. Nivelul AAA cere 7:1 pentru text normal și 4,5:1 pentru text mare.

De ce nu trece 4,48 dacă se rotunjește la 4,5?

Pragurile WCAG sunt exacte. Un raport de 4,48:1 este sub 4,5:1, deci nu trece AA pentru text normal. Verificatorul compară valoarea nerotunjită, așa că insignele sunt mereu stricte.