Verificator de contrast WCAG pentru texte AA și AAA
Acest verificator de contrast WCAG calculează raportul de contrast dintre o culoare de prim-plan și una de fundal, apoi îl compară cu cerințele AA sau AAA pentru text normal sau mare. O previzualizare live arată textul pe fundalul său pentru a te ajuta să evaluezi lizibilitatea. Pragurile sunt 4.5:1 și 3:1 pentru AA, respectiv 7:1 și 4.5:1 pentru AAA.
Acest verificator de contrast WCAG calculează raportul de contrast dintre o culoare de prim-plan și o culoare de fundal. Notează rezultatul în raport cu pragurile WCAG AA și AAA pentru text normal și mare și oferă o previzualizare live ca să vezi textul pe fundalul său. Folosește-l pentru a verifica contrastul culorilor și a obține un rezultat clar în timp ce evaluezi lizibilitatea.
Alege dacă evaluezi culorile în raport cu criteriile AA sau AAA și dacă textul este normal sau mare. Pentru AA, raportul de contrast necesar este 4.5:1 pentru text normal și 3:1 pentru text mare. Pentru AAA, pragurile sunt 7:1 pentru text normal și 4.5:1 pentru text mare. Verificatorul raportează cum se compară raportul cu cerința selectată.
Culorile de prim-plan și de fundal au roluri diferite în previzualizare: prim-planul este culoarea textului, iar fundalul este culoarea din spatele lui. Verificarea perechii te ajută să evaluezi contrastul lor împreună, în loc să apreciezi fiecare culoare izolat. Previzualizarea live oferă o verificare vizuală rapidă alături de raport și notă.
Verificatorul rulează complet în browserul tău, iar intrarea este procesată pe propriul dispozitiv; nicio dată nu este trimisă către un server. Funcționează offline odată ce pagina s-a încărcat și este gratuit. Dezvoltatorii, designerii și inginerii DevOps îl pot folosi pentru a verifica combinațiile de culori în raport cu criteriile WCAG și pentru a detecta probleme de contrast înainte de a partaja sau livra o interfață.
Pasul 1: Introdu culorile de prim-plan și de fundal pe care vrei să le verifici. Acestea sunt cele două culori pe care le compară verificatorul.
Pasul 2: Alege criteriile de evaluat. Verificatorul notează contrastul în raport cu pragurile AA sau AAA pentru text normal sau mare.
Pasul 3: Verifică raportul de contrast și nota. Rezultatul arată dacă culorile selectate îndeplinesc criteriile alese.
Pasul 4: Verifică previzualizarea live. Vederea textului pe fundalul său te ajută să apreciezi lizibilitatea dintr-o privire.
Caz de utilizare: Verifică dacă o combinație de culori de prim-plan și fundal îndeplinește un prag WCAG de contrast necesar înainte de a o folosi într-o interfață.
Caz de utilizare: Detectează o combinație de culori nereușită înainte să ajungă la un recenzent sau la un utilizator, pentru a o evalua mai devreme.
Caz de utilizare: Obține un rezultat de tip trecut sau eșuat împreună cu motivul, în loc să te bazezi doar pe raportul de contrast.
Caz de utilizare: Folosește previzualizarea live pentru a aprecia cum arată textul pe fundalul său în timp ce îi verifici contrastul.
Caz de utilizare: Verifică textul normal și cel mare în raport cu criteriile AA sau AAA atunci când trebuie să evaluezi cerințe diferite pentru text.
Caz de utilizare: Verifică o combinație de culori propusă în raport cu pragurile pe care proiectul tău trebuie să le respecte.