1. Introduceți culoarea textului
Tastați un cod de culoare (ex. #333333) în format HEX, RGB sau HSL – sau alegeți o culoare din selectorul de culori.
Verifică contrastul culorilor și lizibilitatea conform WCAG
Introduceți o culoare de text și una de fundal, iar instrumentul va arăta dacă contrastul este suficient. Calculele se bazează pe standardul internațional de accesibilitate WCAG 2.1, care definește valori minime de contrast pentru diferite tipuri de conținut.
Loading tool editor...
De ce contează lizibilitatea culorilor?
Lizibilitatea este diferența de luminanță dintre culoarea textului și culoarea fundalului. Cu cât diferența este mai mare, cu atât textul este mai ușor de citit. Un contrast prea scăzut face conținutul greu de citit – în special pentru persoanele cu deficiențe de vedere, persoanele în vârstă sau în condiții dificile de iluminare (ex. pe telefon în lumina directă a soarelui).
Conform Organizației Mondiale a Sănătății (OMS), aproximativ 2,2 miliarde de persoane din întreaga lume au o formă de deficiență de vedere. În plus, milioane au daltonism (aproximativ 8% dintre bărbați și 0,5% dintre femei), iar mulți alții experimentează scăderea vederii legată de vârstă.
Instrumentul calculează raportul de contrast folosind formula specificată în WCAG 2.1 (Ghidul de accesibilitate a conținutului web) – ghidul internațional de accesibilitate digitală. Rezultatul permite o evaluare obiectivă a lizibilității culorilor, indiferent de setările monitorului sau percepția individuală a culorilor.
Cum să folosiți verificatorul de contrast
Verificarea lizibilității durează doar câteva secunde:
2. Introduceți culoarea fundalului
Introduceți culoarea fundalului pe care va fi afișat textul – poate fi o secțiune, un bloc sau fundalul întregii pagini.3. Citiți rezultatul
Instrumentul va calcula raportul de contrast și va arăta dacă culorile îndeplinesc cerințele WCAG pentru text normal, text mare și pictograme.4. Ajustați culorile
Dacă contrastul este prea scăzut, funcția Potrivire sugerează automat o variantă de culoare care îndeplinește pragul selectat.
Ce formate de culori sunt acceptate?
HEX
Format hexazecimal – cel mai comun în web design. Începe cu # și conține 3 sau 6 caractere (cifre 0-9 și litere A-F).
#fff– alb (formă prescurtată)#ffffff– alb (formă completă)#1a73e8– albastru
Raport de contrast
8.59:1
Text normal
AA (min. 4.5:1)AAA (min. 7:1)
Exemplu de text normal
Text mare
AA (min. 3:1)AAA (min. 4.5:1)
Cum să interpretați rezultatele testului de lizibilitate
După introducerea culorilor, instrumentul afișează rezultatele în trei secțiuni:
- Text normal – necesită contrast de 4,5:1 (AA) sau 7:1 (AAA). Se aplică textului sub 18pt (24px) sau sub 14pt bold.
- Text mare / bold – necesită contrast de 3:1 (AA) sau 4,5:1 (AAA). Se aplică titlurilor, butoanelor și evidențierilor.
- Pictograme – necesită contrast de 3:1 (AA). Se aplică pictogramelor și elementelor grafice UI care transmit informații.
Indicatorul verde înseamnă că cerința este îndeplinită. Indicatorul roșu înseamnă că contrastul este prea scăzut și trebuie îmbunătățit.
Ce înseamnă rezultatele testului de lizibilitate?
Instrumentul arată raportul de contrast pe o scară de la 1:1 (niciun contrast) la 21:1 (contrast maxim – negru pe alb). Rezultatul este comparat cu pragurile definite în standardul WCAG:
- Text normal – necesită cel puțin 4,5:1 pentru Nivelul AA (standard minim) sau 7:1 pentru Nivelul AAA (standard avansat). Se aplică textului sub 18pt (24px) sau sub 14pt (18,5px) bold.
- Text mare / bold – necesită cel puțin 3:1 pentru Nivelul AA sau 4,5:1 pentru Nivelul AAA. Se aplică textului de la 18pt (24px) sau de la 14pt (18,5px) bold – titluri, butoane, evidențieri.
- Pictograme și elemente UI – necesită cel puțin 3:1 pentru Nivelul AA. Se aplică pictogramelor, butoanelor, câmpurilor de formular și altor elemente de interfață care transmit informații.
Nivelul AA este minimul cerut de reglementările de accesibilitate digitală din multe țări, inclusiv Directiva UE privind accesibilitatea web. Nivelul AAA oferă o lizibilitate mai bună, dar nu este întotdeauna practic de atins pentru toate elementele.
Potrivirea automată a culorilor la cerințele WCAG
Dacă contrastul este prea scăzut, nu trebuie să căutați culoarea potrivită prin încercări. Funcția Potrivire găsește automat o variantă de culoare a textului care îndeplinește pragul de contrast selectat.
Cum funcționează potrivirea:
- Selectați obiectivul de potrivire din listă – ex. AA pentru text normal sau AAA pentru text mare.
- Faceți clic pe butonul Potrivire.
- Instrumentul va căuta prin variantele de luminozitate ale culorii textului și va sugera cea mai apropiată care îndeplinește cerințele.
- Culoarea sugerată poate fi copiată în clipboard sau setată imediat ca noua culoare a textului.
Algoritmul păstrează nuanța și saturația culorii originale, modificând doar luminozitatea. Culoarea sugerată rămâne consecventă cu identitatea vizuală respectând standardul de accesibilitate.
Ce înseamnă nivelurile AA și AAA în standardul WCAG?
| Feature | Nivelul AA (minim) | Nivelul AAA (avansat) |
|---|---|---|
| Text normal – min. 4,5:1 | ||
| Text normal – min. 7:1 | ||
| Text mare / bold – min. 3:1 | ||
| Text mare / bold – min. 4,5:1 | ||
| Pictograme și elemente UI – min. 3:1 | ||
| Obligatoriu legal (directiva UE) | ||
| Cerut de ADA / Secțiunea 508 SUA | ||
| Cerut de UK Equality Act 2010 | ||
| Recomandat pentru conținut esențial |
Nivelul AA (minim)
- Text normal – min. 4,5:1
- Text normal – min. 7:1
- Text mare / bold – min. 3:1
- Text mare / bold – min. 4,5:1
- Pictograme și elemente UI – min. 3:1
- Obligatoriu legal (directiva UE)
- Cerut de ADA / Secțiunea 508 SUA
- Cerut de UK Equality Act 2010
- Recomandat pentru conținut esențial
Nivelul AAA (avansat)
- Text normal – min. 4,5:1
- Text normal – min. 7:1
- Text mare / bold – min. 3:1
- Text mare / bold – min. 4,5:1
- Pictograme și elemente UI – min. 3:1
- Obligatoriu legal (directiva UE)
- Cerut de ADA / Secțiunea 508 SUA
- Cerut de UK Equality Act 2010
- Recomandat pentru conținut esențial
Rezolvarea problemelor cu verificatorul de contrast
Văd un mesaj de eroare privind formatul culorii
Verificați formatul culorii. Codul HEX trebuie să înceapă cu # și să conțină 3 sau 6 caractere (de ex. #fff sau #ffffff). Pentru formatul RGB, verificați dacă valorile sunt separate prin virgule și se încadrează în intervalul 0-255.
Funcția Potrivește nu găsește o culoare potrivită
Când fundalul și textul au o luminozitate similară în aceeași nuanță, algoritmul poate să nu găsească o variantă care să îndeplinească cerințele fără a schimba nuanța. În acest caz, luați în considerare schimbarea culorii de fundal sau alegerea unei culori de text complet diferite.
Culoarea din selectorul de culori nu corespunde codului introdus
Selectorul de culori din browser acceptă doar formatul HEX fără transparență. Dacă introduceți o culoare în format RGBA sau HSLA cu transparență, selectorul va afișa doar componenta de culoare (fără alpha). Calculele de contrast țin cont în continuare de transparență.
Unde ar trebui să verificați lizibilitatea culorilor?
Lizibilitatea contează oriunde cineva trebuie să citească text sau să recunoască un element UI:
Site-uri web
Text pe pagini, butoane, linkuri, formulare. Deosebit de important pentru site-urile de afaceri unde vizitatorii au vârste și abilități vizuale diferite.Magazine online
Prețuri, butoane Cumpără, informații despre produse. O lizibilitate scăzută poate însemna comenzi pierdute.Prezentări
Slide-urile afișate prin proiector au adesea un contrast mai slab decât pe monitor. Verificați culorile înainte de prezentare.Postere și pliante
Materialele tipărite vizualizate în condiții variate de iluminare necesită un contrast ridicat.Aplicații mobile
Telefoanele sunt folosite la soare, noaptea și de persoane de toate vârstele.Meniuri de restaurante
Adesea tipărite pe hârtie colorată sau cu fonturi decorative – ușor de ajuns la un contrast prea scăzut.
Lizibilitatea culorilor pentru utilizatorii daltonieni
Daltonismul afectează aproximativ 8% dintre bărbați și 0,5% dintre femei. Persoanele cu daltonism pot avea dificultăți în a distinge anumite perechi de culori, chiar dacă contrastul de luminanță este suficient.
Cele mai comune tipuri de daltonism:
- Deuteranopie – dificultate în a distinge verdele de roșu (cea mai comună formă)
- Protanopie – dificultate în a vedea roșul
- Tritanopie – dificultate în a vedea albastrul și galbenul (rară)
Acest instrument verifică contrastul de luminanță, care este important pentru toți utilizatorii. Totuși, la proiectare, este bine să evitați combinații problematice de culori (ex. text roșu pe fundal verde) și să nu vă bazați exclusiv pe culoare pentru a transmite informații – folosiți și forme, pictograme și text.
Cerințe de accesibilitate în România
România a transpus directiva europeană privind accesibilitatea web prin OUG 112/2018, ulterior modificată prin Legea 198/2019.
- Sectorul public - site-urile instituțiilor publice, autorităților locale și entităților finanțate din fonduri publice trebuie să respecte EN 301 549, care face referire la WCAG 2.1 nivel AA.
- ANCOM - Autoritatea Națională pentru Administrare și Reglementare în Comunicații monitorizează conformitatea.
- Actul European de Accesibilitate (EAA) - din iunie 2025, obligațiile se extind la sectorul privat: magazine online, servicii bancare, transport și platforme media.
- Piața digitală emergentă - România are una dintre cele mai rapide creșteri de digitalizare din UE, ceea ce face accesibilitatea deosebit de importantă pe măsură ce tot mai multe servicii se mută online.
Raportul de contrast de 4,5:1 pentru text normal și 3:1 pentru text mare este cerut de toate reglementările menționate.
Ce face special acest verificator de contrast?
Evaluare obiectivă bazată pe formulă matematică
Raportul de contrast este calculat folosind formula WCAG – rezultatul nu depinde de setările monitorului sau de percepția individuală a culorilor.Conformitate cu standardul internațional WCAG
Rezultatele corespund cerințelor WCAG 2.1, care stau la baza reglementărilor de accesibilitate digitală în UE și multe alte țări.Potrivire automată a culorii la prag
Funcția Potrivire găsește o variantă de culoare a textului care îndeplinește pragul de contrast selectat – păstrează nuanța, modifică doar luminozitatea.Cinci formate de culori
Formate acceptate: HEX, RGB, RGBA, HSL și HSLA. Codul de culoare poate fi lipit direct din Figma, Photoshop sau un fișier CSS.Trei tipuri de conținut într-un singur test
O singură verificare arată rezultatul pentru text normal, text mare (titluri, butoane) și pictograme – nu este nevoie să testați fiecare tip separat.
Întrebări frecvente despre verificatorul de contrast
Ce este raportul de contrast al culorilor?
Raportul de contrast este o măsură a diferenței de luminanță dintre două culori. Scala variază de la 1:1 (nicio diferență – ex. text alb pe fundal alb) la 21:1 (diferență maximă – text negru pe fundal alb). Cu cât raportul este mai mare, cu atât textul este mai ușor de distins de fundal.
Ce contrast este suficient conform WCAG?
Pentru text normal, minimul este 4,5:1 (Nivelul AA). Pentru text mare – titluri de la 18pt sau text bold de la 14pt – 3:1 este suficient. Pentru pictograme și componente UI, 3:1 este de asemenea necesar. Aceste praguri asigură lizibilitatea pentru majoritatea utilizatorilor, inclusiv cei cu deficiențe de vedere.
Este contrastul culorilor important pentru utilizatorii daltonieni?
Verificatorul testează contrastul de luminanță, care contează pentru toți utilizatorii, inclusiv cei cu daltonism. Totuși, daltonismul este o problemă de percepție a culorilor, nu de luminanță – așa că, pe lângă contrast, evitați perechile problematice de culori (ex. text roșu pe fundal verde) și nu vă bazați exclusiv pe culoare pentru a transmite informații.
De ce culoarea mea nu îndeplinește cerințele, deși o văd bine?
Percepția personală a culorilor depinde de setările monitorului, iluminarea camerei și abilitățile vizuale individuale. WCAG se bazează pe o formulă matematică obiectivă care ține cont de diverse deficiențe de vedere. O culoare lizibilă pe un ecran poate fi ilizibilă pe altul sau pentru o altă persoană.
Trebuie să îndeplinesc nivelul de contrast AAA?
Nu întotdeauna. Nivelul AA (4,5:1 pentru text normal) este minimul cerut de reglementările de accesibilitate în Uniunea Europeană. Nivelul AAA (7:1) oferă o lizibilitate mai bună, dar este mai greu de atins. Pentru conținut critic – avertismente, instrucțiuni de siguranță – luați în considerare țintirea AAA.
Ce este standardul WCAG?
WCAG (Web Content Accessibility Guidelines) este un set internațional de ghiduri de accesibilitate web dezvoltat de organizația W3C. Definește, printre altele, valori minime de contrast al culorilor, structura titlurilor, suportul pentru tastatură și alte cerințe care fac site-urile accesibile persoanelor cu diverse dizabilități.
Unde pot găsi codurile de culori de pe site-ul meu?
Într-un browser (Chrome, Firefox, Edge) puteți deschide instrumentele pentru dezvoltatori (clic dreapta > Inspectează). În tab-ul Stiluri puteți vedea culorile folosite pe pagină. Alternativ, extensii de browser precum ColorZilla vă permit să preluați culoarea oricărui element fără a accesa codul.
Ce perechi de culori de pe site-ul meu ar trebui să verific mai întâi?
Cele mai importante: textul pe fundalul principal, textul pe bannere și secțiuni colorate, butoanele (culoarea textului și fundalul butonului în raport cu fundalul paginii), linkurile și pictogramele. Acordați atenție specială elementelor care apar pe fundaluri diferite în funcție de secțiune.
Legislația română cere contrast de culori pe site-uri?
Da. OUG 112/2018 obligă site-urile instituțiilor publice să respecte EN 301 549, care face referire la WCAG 2.1 nivel AA. Aceasta include un raport de contrast de 4,5:1 pentru text normal și 3:1 pentru text mare. Din iunie 2025, EAA extinde obligația la sectorul privat.
Cum găsesc codurile de culoare de pe site-ul meu?
În browser (Chrome, Firefox, Edge) deschideți instrumentele de dezvoltare (clic dreapta > Inspectare). În fila Stiluri puteți vedea culorile paginii. Alternativ, extensii precum ColorZilla permit selectarea culorii oricărui element.
Funcționează acest instrument pentru design în mod întunecat?
Da. Instrumentul verifică raportul de contrast între oricare două culori, indiferent care este mai deschisă. Pentru modul întunecat, introduceți o culoare de text deschisă și un fundal întunecat. Aceleași praguri WCAG se aplică.
Ajutați-ne să îmbunătățim instrumentele noastre
Aveți o idee pentru o nouă funcție, ați găsit o eroare sau doriți să sugerați un alt instrument care v-ar ușura munca? Scrieți-ne – răspundem în 24 de ore.