Măsoară contrastul WCAG dintre două culori

Cu Contrast de culori, designerii și dezvoltatorii front-end pot să evalueze culorile înainte de aprobarea accesibilității. Măsoară contrastul WCAG dintre două culori.

Măsoară contrastul WCAG dintre două culori. Instrumentul este gratuit în browser și afișează rezultatul fără să solicite un cont.

Cum se folosește

Introdu culoarea de fundal, de exemplu ca un cod hexazecimal.
Adaugă culoarea textului sau a elementului pe care vrei să o compari cu acel fundal.
Rulează verificarea pentru a obține raportul de contrast dintre cele două culori.
Citește pragurile WCAG afișate pentru text normal, text mare și elemente de interfață.
Testează o altă pereche de culori dacă primul rezultat nu îndeplinește nevoile tale.

Exemplu

Exemplul compară o culoare închisă cu una deschisă. Instrumentul calculează raportul de contrast și afișează pragurile WCAG relevante. Verifică dacă raportul este suficient pentru text normal, text mare sau elemente de interfață, apoi testează o altă pereche dacă sistemul tău de design permite. Rezultatul te ajută să decizi înainte de publicare.

Date de intrare

#0F172A
#FFFFFF

Limite și formate

Instrumentul compară două culori, nu lizibilitatea reală a unei imagini sau fotografii.
Transparența, gradienturile și suprapunerile nu sunt întotdeauna reprezentate.
Un raport bun singur nu validează toate aspectele de accesibilitate ale unei pagini.
Verifică separat culorile stărilor hover, active și disabled.
Valorile afișate trebuie interpretate în funcție de dimensiunea și scopul textului.

Unde are loc procesarea

Tot calculul contrastului rulează în browserul tău. Codurile de culoare pe care le introduci rămân pe dispozitivul tău și nu sunt trimise nicăieri. Rezultatul apare imediat după verificare. Poți goli câmpurile sau închide fila fără a păstra acele valori.

Întrebări frecvente

Ce raport ar trebui să urmăresc pentru textul de corp?

Pragurile WCAG depind de dimensiunea și scopul textului. Pentru textul normal, nivelul AA necesită de obicei un contrast mai mare decât pentru textul mare. Citește îndrumările afișate de instrument pentru cazul tău specific și verifică separat fiecare stil de text.

Pot folosi nume de culori precum roșu sau albastru?

Câmpul așteaptă valori pe care instrumentul le poate citi, în special coduri hexazecimale de culoare. Dacă un nume nu este recunoscut, înlocuiește-l cu codul hexazecimal echivalent și rulează din nou verificarea.

Instrumentul verifică contrastul pe o captură de ecran?

Nu, calculează contrastul dintre două culori introduse. Nu citește o imagine sau o pagină întreagă. Pentru o machetă, notează codurile de culoare folosite și testează separat fiecare pereche importantă.