Verificator de contrast și lizibilitate a 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.

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.

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:

1. Selectați obiectivul de potrivire din listă – ex. AA pentru text normal sau AAA pentru text mare.
2. Faceți clic pe butonul Potrivire.
3. Instrumentul va căuta prin variantele de luminozitate ale culorii textului și va sugera cea mai apropiată care îndeplinește cerințele.
4. 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.

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ță.

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.