Cum verific dacă textul și culorile de fundal respectă WCAG?

Introdu coduri hex în Culoare text și Culoare fundal sau folosește selectoarele de culoare. Raportul de contrast apare cu Succes sau Eșuat pentru textul normal și mare AA și AAA, plus componentele UI.

Ce raport de contrast necesită WCAG AA?

AA necesită 4,5:1 pentru textul normal și 3:1 pentru textul mare. AAA necesită 7:1 pentru textul normal și 4,5:1 pentru textul mare. Componentele UI și obiectele grafice necesită 3:1.

Ce se consideră text mare?

Unealta tratează textul normal de 18pt (24px) sau textul bold de 14pt (18,66px) ca fiind mare. Textul mai mic trebuie să îndeplinească pragurile mai ridicate pentru textul normal.

Culorile mele nu trec de AA. Cum le remediez?

Folosește sugestiile rapide Remediază culoarea textului sau Remediază fundalul. Acestea ajustează luminozitatea păstrând aceeași nuanță până când perechea atinge 4,5:1.

Ce formate de culoare acceptă și pot alege o culoare de pe ecran?

Acceptă valori hex din 3 și 6 cifre, cum ar fi #abc sau #1e293b. Un buton Selectare culoare de pe ecran apare în browserele care acceptă API-ul EyeDropper, cum ar fi Chromium.

Da. Fiecare unealtă este gratuită, fără cont și fără card de credit. Procesarea se face pe dispozitivul tău, nu pe serverele noastre, ceea ce ne permite să le oferim gratuit.

Funcționează pe mobil?

Da. Funcționează în browserele mobile actuale de pe iOS și Android, fără nimic de instalat.

🌓

Verificator Contrast Culori WCAG — gratuit

Verifică dacă două culori îndeplinesc standardele de contrast WCAG AA și AAA pentru accesibilitate. Previzualizare live la mai multe dimensiuni de text cu sugestii automate când contrastul este prea mic.

Rulează în browserFără înregistrare, fără ferestre pop-upFără autentificare necesarăGratuit pentru totdeauna

Funcționează offline odată încărcat

Culoare text

Culoare fundal

Text titlu mare

Text corp mediu (18px) pentru citire și conținut.

Text corp normal (16px) pentru paragrafe.

Text corp mic (14px) pentru legende și metadate.

14,63:1

Raport de contrast

✓WCAG AA — Text normal

Necesită 4.5:1 · Ai 14,63:1

✓WCAG AA — Text mare

Necesită 3.0:1 · Ai 14,63:1

✓WCAG AAA — Text normal

Necesită 7.0:1 · Ai 14,63:1

✓WCAG AAA — Text mare

Necesită 4.5:1 · Ai 14,63:1

✓Componente UI / obiecte grafice

Necesită 3.0:1 · Ai 14,63:1

Presetări rapide

Bazat pe ghidurile de contrast WCAG 2.1. Text mare = 18pt (24px) normal sau 14pt (18,66px) aldin. Codurile HEX se actualizează în ambele direcții: tastează un HEX sau alege o culoare, ambele câmpuri rămân sincronizate.

Utilizări frecvente

Auditați paginile web pentru conformitatea WCAGVerificați că culorile textului site-ului dvs. îndeplinesc standardul de contrast WCAG AA sau AAA pentru accesibilitate.
Verificați combinațiile de culori ale mărciiTestați combinațiile de culori ale mărcii dvs. pentru a vă asigura că funcționează pentru design UI accesibil.
Testați paleta de culori a modului întunecatTextul ușor pe fundal închis poate în continuare să eșueze contraste — verificați perechile de culori ale modului întunecat aici.
Perechi de culori pentru materiale tipăritePosterele, semnalele și materialele tipărite au nevoie de contrast lizibil — în special pentru spectatorii mai vârstnici.
Proiectare culori butoane accesibileAsigurați-vă că apelurile la acțiune, butoanele de acțiune și legăturile trec WCAG împotriva fundalurilor lor.

Cum funcționează

Verificarea contrastului rulează în întregime în browser-ul tău folosind algoritmul de luminanță relativă WCAG 2.1 — fără bibliotecă, fără server, doar matematică scrisă manual care urmează specificația exact. Fiecare rezultat se actualizează în timp real pe măsură ce scrii sau alegi o culoare.

1
Intrare hex și normalizare
Atât valorile hex de 3 cifre (#abc) cât și de 6 cifre (#aabbcc) sunt acceptate și normalizate la tripleți RGB compleți. Intrarea invalidă este respinsă imediat în loc să revină silențios la negru, astfel încât apare o margine roșie în loc de un rezultat de succes înșelător.
2
Calculul luminanței WCAG
Fiecare culoare este convertită la luminanță relativă folosind formula WCAG 2.1: valorile canalelor sRGB sunt liniarizate cu o corecție gamma pe bucăți (împărțind la 12,92 sub 0,03928, ridicând la puterea 2,4 deasupra), apoi ponderate ca 0,2126R + 0,7152G + 0,0722B.
3
Raportul de contrast și verificări de conformitate
Raportul de contrast este calculat ca (mai deschis + 0,05) / (mai închis + 0,05) și verificat față de toate cele cinci praguri WCAG: AA text normal (4,5:1), AA text mare (3:1), AAA text normal (7:1), AAA text mare (4,5:1), și componente UI (3:1). Rezultatele se actualizează la fiecare apăsare de tastă.
4
Sugestii de remediere care păstrează nuanța
Când perechea eșuează WCAG AA, unealta caută în spațiul de luminozitate HSL — pășind în afară de la luminozitatea originală în ambele direcții — pentru a găsi cea mai apropiată variantă a fiecărei culori care trece de 4,5:1 păstrând aceeași nuanță și saturație. API-ul EyeDropper (Chromium) este de asemenea disponibil pentru a eșantiona orice culoare direct de pe ecranul tău.

Instrumente similare

👁️

Simulator Daltonism

Vizualizează cum arată designul tău pentru persoanele cu deficiențe de vedere a culorilor. Simulează protanopia, deuteranopia, tritanopia, acromatopsia și anomalii mai ușoare.

ÎncearcăFișierele rămân locale

📐

Care este rezoluția ecranului meu

Vezi rezoluția ecranului tău în pixeli CSS și reali, dimensiunea ferestrei, raportul de pixeli, adâncimea culorii, HDR, suportul tactil și rata de reîmprospătare și copiază totul.

Încearcă

🖥️

Test pixeli morți

Verifică-ți ecranul pentru pixeli morți sau blocați cu culori pe tot ecranul: negru, alb, roșu, verde, albastru și gri, plus un reparator opțional pentru pixeli blocați.