Ghid practic · Design & utilizare

Cum verifici contrastul și lizibilitatea unui website

O paletă plăcută nu garantează că textul poate fi citit ușor. Culoarea literelor, fundalul, grosimea fontului și imaginea din spate trebuie verificate împreună, în paginile reale ale website-ului.

Începe cu informațiile care influențează alegerea: descrieri, prețuri, condiții și formulare. O notă importantă scrisă foarte pal poate fi trecută cu vederea chiar dacă restul paginii arată îngrijit.

Verifică perechile de culori folosite efectiv

Notează culoarea textului și fundalul pentru corpul articolului, butoane, câmpuri și mesaje. Un instrument de contrast poate calcula raportul dintre ele. Pentru textul peste fotografie, verifică zona din spatele literelor, inclusiv variantele de decupare pe telefon.

Ca reper tehnic, criteriul WCAG 2.2 AA pentru contrastul textului cere în general minimum 4,5:1, iar pentru textul mare definit de criteriu minimum 3:1. Excepțiile și definițiile sunt explicate în documentația W3C. O singură măsurătoare nu reprezintă un audit complet de accesibilitate.

Include stările secundare

Verifică textul butonului înainte și după interacțiune, linkurile vizitate, explicațiile câmpurilor și mesajele de eroare. Un design poate avea contrast bun în macheta principală, dar text greu de citit într-un formular deschis ulterior.

Etichetele și instrucțiunile merită aceeași atenție ca titlul mare. Clientul are nevoie de ele tocmai când trebuie să completeze ceva corect.

Privește lizibilitatea dincolo de raport

O familie de fonturi cu linii foarte subțiri poate fi dificilă la dimensiuni mici. Paragrafele foarte late și spațierea nepotrivită pot obosi citirea chiar dacă perechea de culori trece măsurarea.

Citește o pagină întreagă pe telefon și pe un ecran obișnuit. Verifică diacriticele, cifrele și simbolurile din prețuri. Nu evalua doar un titlu scurt pe un monitor luminos.

Exemplu de fișă pentru verificare

Elemente de notat pentru fiecare problemă
ElementObservație utilă
Text de paragrafPagina, culorile și dimensiunea folosită
Preț ori condițieDacă informația se citește în contextul cardului
ButonTextul în stările disponibile
Text peste imagineDecuparea și zona cea mai dificilă

Repară sistemul, apoi recitește paginile

Dacă aceeași culoare slabă apare în multe locuri, corectează stilul comun și verifică efectul în toate componentele. Uneori este suficient un fundal stabil pentru text; alteori trebuie schimbată nuanța sau grosimea.

Păstrează un registru cu problemele rezolvate și cele care necesită evaluare. Vezi claritatea primei pagini și cere prin ITroom o prezentare în care informațiile importante pot fi citite și folosite.

O probă pentru notele de preț

Alege cel mai mic text din comparația pachetelor și citește-l pe telefon fără să îl mărești. Verifică dacă precizarea despre perioadă, taxe ori servicii separate este suficient de apropiată de suma corespunzătoare. O notă vizibilă poate preveni o interpretare comercială greșită.

Dacă schimbi culoarea comună a notelor, verifică și subsolul, câmpurile și cardurile care folosesc același stil. Corecția trebuie să rămână coerentă în întregul website.

Despre acest material

Ghid editorial ITroom pentru pregătirea unui proiect digital. Exemplele demonstrative se adaptează informațiilor reale ale afacerii; nu reprezintă rezultate garantate sau recomandări profesionale individuale.

← Mai multe despre design & utilizare

Afacerea ta merită un loc bun online.

Hai să-i facem loc. Începem cu o idee, o estimare clară și o conversație simplă.

Calculează prețul
↑