Verificator Contrast Culoare WCAG

Evaluați raportul de contrast al culorilor textului și fundalului conform ghidurilor WCAG 2.1. Generați ajustări de culoare accesibile instantaneu.

HEX/RGB/HSL
HEX/RGB/HSL
Totul rulează local în browserul tău.

Previzualizare Text în Timp Real

Titlu Mare (18pt Bold / 24pt Normal)

Aceasta este o preview a stilului text de titlu mare.

Text Normal (Sub 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Raport de Contrast

18.6:1

Stare de Conformitate WCAG 2.1

Cerințe WCAG AA
Text Normal (4.5:1) PASS
Text Mare (3.0:1) PASS
Cerințe WCAG AAA
Text Normal (7.0:1) PASS
Text Mare (4.5:1) PASS

Ghiduri WCAG 2.1

Verificați cu ușurință standardele de contrast pentru a construi interfețe accesibile care respectă ghidurile Secțiunii 508, ADA și WCAG AA sau AAA.

Motor de sugestii

Automat ajustăm culorile în mod incremental pe coordonatele HSL pentru a găsi cele mai apropiate alternative care îndeplinesc criteriile de raport de contrast.

Complet pe partea de client

Calculele sunt executate local în contextul browserului dumneavoastră. Niciun fel de culori, fișiere sau coordonate de telemetrie nu sunt transmise serverelor noastre.

Instrumente de culoare înrudite

Convertor de culori HEX RGB HSL
Convertește culorile și ajustează coordonatele de luminozitate.
Imagini cu pictor de culoare
Extrage palete de culori din machetele de design.
Convertor de culori CSS
Convertați între formate CMYK, HSV, RGB, HSL și HEX.

Verificator Contrast Culoare

Calculați ratele de contrast WCAG pentru culorile din spate și din spatele frontului și afișați rezultatele comune în dimensiunea textului.

Intrare
Două culori valabile CSS și textul de preview opțional.
Ieșire
O raport de contrast cu indicatorii WCAG AA și AAA care trec sau nu.
Limitări reale
Calcularea acoperă numai contrastul luminozității; nu certifică o interfață sau un cont pentru renderizarea fontului, mișcarea, focalizarea sau cuștile non-color.
Privacitatea și prelucrarea datelor
două culori valabile CSS și textul de preview opțional sunt prelucrate în această pagină de browser. Converter nu primește sau stocă; închiderea sau reîncărcarea paginii clarifică starea de lucru, cu excepția cazului în care instrumentul oferă explicit o descărcare locală.

Cum să utilizați acest instrument

  1. Oferă două culori valabile CSS și textul de preview opțional în controlurile de instrumente.
  2. Alegeți setările care afectează o raportă de contrast cu WCAG AA și AAA trec sau indicatorii eșuează, apoi rulați instrumentul.
  3. Revizuiți o raportă de contrast cu WCAG AA și AAA trece sau eșuează indicatorii înainte de a copia sau descărca.

Moduri comune de eșec

Culorile invalidate nu pot fi măsurate, iar transparența fără un fundal rezoluți poate face o proporție lipsită de sens.

Exemplu util

Compara textul #f2937 pe #ffffff pentru a-si analiza raportul dintre text normal si text mare.