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 previzualizare a stilului de text pentru titlul 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 tău. Nicio culoare, fișier sau coordonată de telemetrie nu este transmisă serverelor noastre.

Instrumente de culoare înrudite

Convertor de culori HEX RGB HSL
Convertește culorile și ajustează coordonatele de luminozitate.
Selector de culori din imagine
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 rapoartele de contrast WCAG pentru culorile de prim-plan și de fundal și afișați rezultatele comune pentru dimensiunea textului.

Intrare
Două culori CSS valide și text de previzualizare opțional.
Ieșire
Un raport de contrast cu indicatori de trecere sau eșec WCAG AA și AAA.
Limitări reale
Calculul acoperă doar contrastul de luminozitate; nu certifică o interfață sau nu ține cont de redarea fonturilor, mișcare, focalizare sau indicii non-color.
Confidențialitatea și gestionarea datelor
două culori CSS valide și text opțional de previzualizare sunt procesate în această filă de browser. Convertr nu le primește sau stochează; închiderea sau reîncărcarea paginii șterge 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ă un raport de contrast cu indicatori de trecere sau eșec WCAG AA și AAA, apoi rulați instrumentul.
  3. Revizuiește un raport de contrast cu indicatori de trecere sau eșec WCAG AA și AAA înainte de a copia sau descărca.

Moduri comune de eșec

Culorile invalide nu pot fi măsurate, iar transparența fără un fundal rezolvat poate face un raport lipsit de sens.

Exemplu util

Compară textul #1f2937 pe #ffffff pentru a-i analiza raportul pentru text normal și mare.