Instrumentul foloseste formula WCAG de luminanta relativa, asa ca rezultatele coincid cu cele ale verificatorului WebAIM si ale auditurilor de accesibilitate. Totul ruleaza in browser - culorile nu sunt incarcate nicaieri si nu exista limite de utilizare.
Verificator contrast culori
Rulează integral în browserul tău - fără încărcare, fără cont.
Raport de contrast
Trecenecesita 4.5:1
Trecenecesita 3:1
Picanecesita 7:1
Trecenecesita 4.5:1
Mare = 18pt (24px) sau 14pt (18,66px) bold.
Ce este un verificator de contrast culori?
Un verificator de contrast culori masoara raportul de contrast dintre culoarea textului si fundalul sau si indica daca acesta respecta standardele de accesibilitate WCAG. Returneaza un raport cuprins intre 1:1 si 21:1, apoi arata daca trece sau nu testele AA si AAA pentru text normal si text mare.
Cum se folosește
- 1Introdu culorile. Scrie un cod hex, o valoare rgb() sau un nume de culoare CSS pentru text si fundal, sau alege-le din paleta de culori.
- 2Citeste raportul. Raportul de contrast se actualizeaza in timp real, impreuna cu o previzualizare a textului pe fundalul ales.
- 3Verifica insignele. Fiecare insigna arata daca textul trece sau pica testele WCAG AA si AAA pentru text normal si text mare.
Pentru cine este
- Designerii care testeaza culorile brandului inainte ca acestea sa ajunga in cod.
- Dezvoltatorii front-end care verifica daca butoanele, link-urile si etichetele respecta WCAG AA.
- Auditorii de accesibilitate care documenteaza problemele de contrast cu rapoarte exacte.
- Echipele de continut si email care se asigura ca textul ramane lizibil pe fundal colorat.
Întrebări frecvente
Este verificatorul de contrast gratuit?
Da - este 100% gratuit, fara cont si fara limite. Ruleaza integral in browser.
Ce raport de contrast trebuie sa am pentru WCAG AA?
WCAG 2.1 Nivel AA cere un raport de contrast de cel putin 4,5:1 pentru text normal si 3:1 pentru text mare. Nivelul AAA ridica pragul la 7:1 pentru text normal si 4,5:1 pentru text mare.
Ce inseamna text mare?
Textul mare are cel putin 18pt (circa 24px) la grosime normala sau 14pt (circa 18,66px) daca este bold. Textul mare poate avea un raport de contrast mai mic, fiindca literele mai mari sunt mai usor de citit.
Cum se calculeaza raportul de contrast?
Formula este (L1 + 0,05) / (L2 + 0,05), unde L1 si L2 sunt luminantele relative ale culorii mai deschise si mai inchise. Luminanta se calculeaza din canalele rosu, verde si albastru sRGB conform definitiei WCAG 2.x.
Accepta hex, RGB si nume de culori?
Da. Poti introduce coduri hex de 3, 4, 6 sau 8 cifre, valori rgb() si rgba(), sau orice nume de culoare CSS, cum ar fi „teal". Poti alege culorile si din paleta nativa a browserului.
De ce acelasi raport trece uneori si alteori nu?
Pragul depinde de marimea textului si de nivelul tintit. Un raport de 3,5:1 pica AA pentru text normal, dar trece AA pentru text mare - verifica intotdeauna marimea si nivelul pe care le folosesti efectiv.