Verificator de Contrast Culori
Verificați rapoartele de contrast ale culorilor pentru conformitatea WCAG 2.1. Verificați instantaneu standardele AA și AAA.
Ce este raportul de contrast WCAG?
Raportul de contrast WCAG măsoară diferența de luminanță între culorile de prim-plan și fundal. De la 1:1 la 21:1.
Care sunt cerințele WCAG AA și AAA?
WCAG AA necesită minimum 4.5:1 pentru text normal și 3:1 pentru text mare. AAA necesită 7:1 și 4.5:1.
Ce contează ca text mare?
Textul mare este definit ca 18pt (24px) sau mai mare, sau 14pt (18.66px) bold sau mai mare.
De ce este important contrastul culorilor?
Contrastul adecvat asigură lizibilitatea textului pentru persoanele cu deficiențe de vedere și îmbunătățește lizibilitatea pentru toți.
Cum calculez raportul de contrast?
Se calculează folosind valorile de luminanță relativă. Formula este (L1 + 0.05) / (L2 + 0.05).
Care este contrastul minim pentru elementele UI?
WCAG necesită minimum 3:1 pentru componente UI și obiecte grafice.
Pot folosi orice combinație de culori?
Nu toate combinațiile respectă standardele de accesibilitate. Utilizați acest verificator pentru validare.
Ce este luminanța relativă?
Este luminozitatea percepută a unei culori, de la 0 (negru) la 1 (alb). Se calculează cu spațiul de culoare sRGB.
Trebuie să verific contrastul imaginilor?
Textul din imagini trebuie să îndeplinească aceleași cerințe. Pentru imagini decorative nu se aplică.
Ce instrumente ajută cu contrastul?
Utilizați instrumentele de dezvoltator ale browserului, plugin-uri de design sau verificatoare online ca acesta.
Cum se folosește Verificator de Contrast Culori
Verifică instantaneu dacă contrastul textului și al interfeței atinge pragurile AA și AAA din WCAG 2.1, integral în browser. Introdu două culori și raportul se calculează local — nimic nu părăsește dispozitivul.
- Scrie sau lipește culoarea textului în câmpul Foreground Color, în orice format acceptat, precum HEX sau RGB.
- Completează câmpul Background Color cu culoarea din spatele textului pentru a calcula raportul de contrast.
- Citește raportul obținut și ecusoanele de trecere AA și AAA pentru text normal și text mare.
- Ajustează oricare dintre culori până când raportul depășește 4,5:1 pentru textul de bază sau 3:1 pentru text mare și componente UI.
- Schimbă între ele valorile Foreground Color și Background Color pentru a testa combinația inversă, precum text deschis pe temă închisă.
AAA (7:1) e o țintă lăudabilă pentru lecturi lungi, dar 4,5:1 (AA) este minimul cerut de majoritatea ghidurilor de accesibilitate.
Instrumente conexe
- Selector de culori Selectați orice culoare de pe ecran cu pipeta. Copiați codurile HEX, RGB, HSL instant. Instrument online gratuit.
- Generator paletă culori Creați palete de culori frumoase și armonioase instantaneu cu generatorul nostru online gratuit. Suportă moduri monocromatice, analoge, complementare, triadice, split-complementare și tetradice. Reglați culorile cu glisoare HSL, blocați favoritele și exportați ca CSS, Tailwind, JSON sau SVG. 100% bazat pe browser, datele dvs. nu părăsesc niciodată dispozitivul.
- Simulator Daltonism Simulator gratuit de daltonism online. Testați designuri pentru Protanopie, Deuteranopie, Tritanopie și alte tipuri. 100% privat, funcționează în browser.
- GIF Extragere Cadre Extrageți și descărcați cadre individuale din animații GIF ca PNG sau sprite sheet. Instrument online gratuit cu previzualizare și export ZIP.
- GIF Inversat Inversați ordinea de redare a animațiilor GIF online gratuit. Încărcați, previzualizați și descărcați instant.
- Schimbător de Viteză GIF Schimbați viteza animației GIF online. Accelerați sau încetiniți fișierele GIF instantaneu.
- Video în GIF Convertiți video în GIF animat online. Ajustați calitatea, rata de cadre și rezoluția direct în browser fără a încărca fișiere.
- Generator de Meme Generator de meme gratuit online. Adaugă texte clasice sus și jos pe orice imagine, trage-le liber și descarcă memeul tău instantaneu în PNG sau JPEG.