ImageColorPicker.com

Verificator de contrast de culoare

Testează raportul de contrast între culorile de prim-plan și fundal pentru a asigura accesibilitatea.

Verifică-ți culorile

Testează combinațiile de culori pentru a te asigura că îndeplinesc standardele de accesibilitate WCAG pentru lizibilitatea textului.

5.72 la 1
Contrast
AA
Rezultat pentru text
Bun

Comparat: #FFFFFF pe #BB3344

Text

16px, Regular (400)

Se consideră text normal.

  • AA (WCAG 1.4.3): cel puțin 4.5:1

    Reușit

  • AAA (WCAG 1.4.6): cel puțin 7:1

    Mai sunt necesari 1.28

    Nereușit

Componente UI și grafică

Pictograme, margini de input, indicatori de focus și alte părți pe care trebuie să le vezi pentru a folosi interfața.

  • AA (WCAG 1.4.11): cel puțin 3:1

    Reușit
5.72 la 1. Text: respectă AA, nu respectă AAA. Componente UI: respectă.
Cum se verifică
Culori comparate (după amestecare)
Text #FFFFFF pe fundal #BB3344
Luminanță relativă
Text 1.0000, fundal 0.1334
Formulă
(L1 + 0.05) / (L2 + 0.05) unde L1 este luminanța culorii mai deschise și L2 a celei mai închise.
Raport exact
5.7221 la 1, afișat ca 5.72 la 1. Valoarea afișată este trunchiată, nu rotunjită, deci nu va părea niciodată mai bună decât este. Valoarea exactă este cea comparată cu cerința.

Dimensiune text: 16px, Regular (400)

Se consideră text normal. Textul mare are cel puțin 24px (18pt), sau cel puțin 18.67px (14pt) când e bold (grosime 700 sau mai mult). Mărimile sunt afișate trunchiat, nu rotunjit.

Se consideră text normal. Textul mare are cel puțin 24px (18pt), sau cel puțin 18.67px (14pt) când e bold (grosime 700 sau mai mult). Mărimile sunt afișate trunchiat, nu rotunjit.

Aa
Titlu de previzualizare

Vulpea maro rapidă sare peste câinele leneș

Exemplu de text mic (12px)

Text
#ffffff
Fundal
#bb3344

Standarde WCAG

Nivel AA

Raport minim de contrast de 4.5:1 pentru text normal și 3:1 pentru text de mari dimensiuni. Necesare pentru majoritatea site-urilor web.

Nivel AAA

Raport de contrast îmbunătățit de 7:1 pentru text normal și 4.5:1 pentru text de mari dimensiuni. Recomandat pentru accesibilitate optimă.

Verificator de contrast de culoare

Calculează raportul de contrast al culorilor textului și fundalului.

Alege o culoare folosind selectorul de culoare pentru text și fundal sau introdu o culoare în format hexazecimal RGB (ex: #259 sau #2596BE). Poți ajusta glisorul pentru a selecta culoarea. Ghidurile de Accesibilitate pentru Conținut Web (WCAG) oferă o linie directoare specifică pentru a determina dacă textul este lizibil pentru utilizatorii văzători. Aceste criterii folosesc un algoritm particular pentru a mapa combinațiile de culori în rapoarte comparabile. Folosind această formulă, WCAG precizează că un raport de contrast 4.5:1 între text și fundalul său este adecvat pentru textul normal, iar textul de mari dimensiuni (18+ pt normal, sau 14+ pt bold) ar trebui să aibă un raport de contrast de cel puțin 3:1.

Caracteristici cheie

  • Calcul în timp real al raportului de contrast
  • Verificare conformitate WCAG AA & AAA
  • Slidere HSL pentru ajustare fină
  • Formate multiple de previzualizare

Instrumente avansate

  • Corectare automată a culorilor
  • Mostre de text și fundal
  • Detectare nume culoare
  • Exportare rezultate

Întrebări frecvente

Pentru conformitatea WCAG AA, textul normal necesită un raport minim de contrast de 4,5:1, iar textul mare (18pt sau 14pt aldin) necesită 3:1.

WCAG AAA necesită rapoarte de contrast mai mari: 7:1 pentru textul normal și 4,5:1 pentru textul mare, față de 4,5:1 și 3:1 pentru AA.

Folosește funcția noastră de corecție automată pentru a ajusta textul sau fundalul, păstrând intenția designului, sau ajustează manual culorile cu glisoarele HSL, ale căror indicatori vizuali arată zonele optime pentru conformitatea AA/AAA.

Zonele verzi și marcajele AA/AAA arată intervalele optime pentru conformitatea WCAG. Indicațiile de direcție (Mai deschis/Mai închis) te ghidează spre un contrast mai bun, în funcție de combinația ta actuală de culori.

Da, poți introduce orice cod hex de culoare sau poți folosi selectorul de culori pentru a alege culori personalizate. URL-ul se actualizează automat, ca să poți partaja combinații specifice de culori.