Verificator de contrast al culorilor

Toate instrumentele

Verifică raportul de contrast WCAG dintre o culoare de text și una de fundal — vizualizează notele AA/AAA pentru text normal, text mare și componente UI, cu previzualizare live și sugestii de culori accesibile.

Culoarea textului
Tentă
Culoarea fundalului
Tentă
Raport de contrast
--:1
Text normal
Text de corp sub 18px (sau sub 14px bold)
AA AAA
Text mare
18px+ normal, sau 14px+ bold
AA AAA
Componente UI
Pictograme, borduri, controale de formular și grafice
AA AAA
Previzualizare live

The quick brown fox

Textul mare se citește confortabil când contrastul este suficient.

Acesta este un paragraf exemplu de text normal. Contrastul bun al culorilor menține conținutul lizibil pentru toată lumea, inclusiv pentru persoanele cu vedere slabă sau daltonism. un link exemplu.

Textul mic și legendele sunt cele mai greu de citit — au nevoie de cel mai mare contrast.
Buton exemplu Buton exemplu
Sugestie

Totul este calculat live în browserul tău folosind formula de luminanță relativă WCAG 2.x — fără încărcări, fără înregistrare, complet gratuit.

Despre Verificator de contrast al culorilor

Verificatorul de Contrast al Culorilor măsoară raportul de contrast WCAG dintre o culoare de text și o culoare de fundal, apoi evaluează perechea în raport cu nivelurile de accesibilitate AA și AAA pentru text normal, text mare și componente UI. Raportul și fiecare verdict de trecut/eșuat se actualizează live pe măsură ce ajustezi oricare culoare.

Un panou de previzualizare realistă randează titluri, text de corp, text mic, un buton și un link în combinația ta aleasă, astfel încât să poți evalua lizibilitatea cu conținut real, nu nuanțe abstracte. Când o pereche eșuează, instrumentul sugerează cea mai apropiată culoare de text accesibilă care atinge pragul AA de 4,5:1, gata de aplicat cu un clic.

Matematica urmează formula de luminanță relativă WCAG 2.x și rulează în întregime în browser — nimic nu este încărcat, iar verificările sunt gratuite. Poți de asemenea copia un raport text compact al raportului și al notelor pentru a-l lipi într-o revizuire de accesibilitate sau un pull request.

Cum să utilizați Verificator de contrast al culorilor

  1. Setează culoarea textului și culoarea de fundal cu selectoarele sau introducând valori.
  2. Citește raportul de contrast și rezultatele AA/AAA pentru text normal, text mare și componente UI.
  3. Inspectează previzualizarea live pentru a vedea titluri, paragrafe, butoane și linkuri reale în culorile tale.
  4. Dacă perechea eșuează, aplică culoarea de text accesibilă sugerată sau schimbă între ele cele două culori.
  5. Dă clic pe „Copiază raportul” pentru a distribui raportul și rezultatele conformității.

Întrebări frecvente

WCAG AA cere 4,5:1 pentru text normal și 3:1 pentru text mare și componente UI precum pictograme și borduri de formulare. Nivelul mai strict AAA cere 7:1 pentru text normal și 4,5:1 pentru text mare.

Text de 18px sau mai mare cu grosime normală, sau 14px și mai mare când este bold. Deoarece caracterele mari sunt mai ușor de distins, WCAG le permite un raport de contrast mai mic, de 3:1, la nivelul AA.

Da. Fiecare verificare este calculată instant în browser folosind formula de luminanță relativă WCAG, fără înregistrare, fără limită de utilizare și fără cost.

Folosește sugestia integrată: instrumentul găsește cea mai apropiată variantă a culorii tale de text care trece AA în raport cu fundalul curent și îți permite să o aplici direct. Dacă nicio variantă a culorii de text nu poate trece, ajustează în schimb fundalul.

Acoperă criteriile de contrast al culorilor, care se numără printre cele mai comune eșecuri de accesibilitate, dar nu totul. Ar trebui să verifici în continuare stările de focalizare, independența informației de culoare, dimensiunile fontului și cum rezistă paleta la simularea daltonismului.

Nu. Cele două culori, raportul și sugestiile sunt toate calculate local în browser — pagina nu face nicio cerere către server în timp ce lucrezi.
Distribuiți
Instrumente conexe
Simulator de daltonism Vede imaginea sau paleta ta cum o văd persoanele cu protanopie, deuteranopie, tritanopie sau acromatopsie — rulează complet în browserul tău, nimic nu este încărcat. Gratuit
Exportator de palete Lipește sau importă un set de culori și exportă-le instant ca variabile CSS, SCSS, configurație Tailwind, JSON sau mostre SVG — pasul final pentru orice paletă. Gratuit
Potrivire de Culori Pantone Caută orice cod Pantone solid-coated pentru a-i citi valorile HEX, RGB și CMYK, sau introdu o culoare HEX/RGB și găsește instantaneu cea mai apropiată potrivire Pantone — totul în browserul tău. Gratuit
Ecran complet alb Umple întregul ecran cu alb pur — perfect pentru a depista pixeli morți, a curăța monitorul, ca lightbox sau ca lumină de umplere blândă. Gratuit și rulează în browserul tău. Gratuit
Asocieri de fonturi și director Google Fonts Răsfoiește un director curatoriat de fonturi Google Fonts populare cu previzualizări live, filtrează după categorie și caută după nume, apoi copiază cod CSS gata de utilizat și explorează asocieri de fonturi sugerate — totul în browserul tău. Gratuit
Ecran complet negru Umple întregul ecran cu negru pur — perfect pentru a depista pixeli blocați pe luminos, a verifica scurgerile de retroiluminare sau ca fundal întunecat fără distrageri. Gratuit. Gratuit
Căutări populare
verificator de contrast al culorilor raport de contrast wcag verificator de contrast accesibilitate verificator de contrast text test de contrast aa aaa verifică contrastul culorilor online
Ai nevoie de ajutor?
Ai întâmpinat o problemă cu acest instrument? Spune-ne.
Raportează o problemă

Adăugați acest instrument gratuit pe propriul site — copiați și lipiți codul de mai jos.