Verificator de contrast al culorilor
Verifică dacă două culori au contrast suficient ca să rămână lizibile — măsurat după WCAG AA și AAA, pentru text normal și text mare. Totul rulează în browser.
Rulează în browserul tău. Ce introduci nu este încărcat pe PayloadIQ.
Acest tool calculează raportul de contrast dintre o culoare de text și una de fundal și îți spune dacă trece pragurile WCAG AA și AAA, totul în browserul tău. Introduci cele două culori în HEX sau le alegi cu pipeta și vezi instant raportul exact, plus un verdict reușit/eșuat pentru toate cele patru niveluri deodată. O previzualizare live aplică culorile pe text real, ca să judeci și cu ochiul, nu doar după cifră. Nimic nu se trimite către vreun server.
Cum se calculează raportul
Raportul pornește de la luminanța relativă a fiecărei culori, după formula oficială WCAG, și merge de la 1:1 (fără contrast) până la 21:1 (negru pe alb). Tool-ul compară rezultatul cu cele patru praguri dintr-o singură verificare: AA cere 4.5:1 pentru text normal și 3:1 pentru text mare (cam 18px bold sau 24px normal), iar AAA urcă ștacheta la 7:1 și 4.5:1. Calculul se face pe măsură ce scrii, așa că vezi fiecare verdict comutând imediat ce ajustezi o culoare, și poți inversa textul cu fundalul dintr-un clic ca să testezi ambele direcții.
Local și privat din start
Totul rulează local: nicio culoare și nicio valoare HEX nu pleacă de pe calculatorul tău, ceea ce înseamnă că poți folosi tool-ul și offline, fără să expui nimic din design-ul tău. Concret, iei o culoare dintr-un mockup, o lipești aici și verifici conformitatea înainte să fixezi o temă sau să predai un component — util ca să faci un design demonstrabil în fața unei cerințe de accesibilitate, nu doar să ghicești. Ca să pregătești culorile din timp, combină-l cu pipeta de culoare.