Cum să auditezi contrastul culorilor fără să instalezi nimic

Auditurile de contrast al culorilor sunt adesea tratate ca o sarcină specializată de accesibilitate: deschizi un fișier de design, instalezi un plugin, exporți capturi de ecran, rulezi un raport, discuți în contradictoriu despre culorile de brand. Poate fi util, dar nu de acolo ar trebui să înceapă majoritatea echipelor.

Pentru un site web în producție, cel mai rapid audit fiabil se face de obicei în browserul pe care îl ai deja deschis. Instrumentele moderne browser DevTools pot inspecta culorile calculate, pot afișa rapoarte de contrast, pot evidenția stilurile de stare și te pot ajuta să testezi cazurile incomode pe care rapoartele automate le ratează.

Acest ghid presupune că nu instalezi nimic. Fără extensii de browser. Fără pluginuri de design. Fără suite de audit plătite. Doar pagina, browserul și o metodă simplă.

Regulile de contrast de care ai nevoie cu adevărat

Pentru majoritatea lucrărilor web, contrastul WCAG se reduce la câteva praguri:

• Text normal: cel puțin 4.5:1 contrast față de fundal.
• Text mare: cel puțin 3:1. WCAG îl definește ca aproximativ 24 de pixeli CSS sau aproximativ 18,66 pixeli CSS dacă este bold.
• Componente UI și obiecte grafice: cel puțin 3:1 pentru contururi semnificative, iconuri, stări și părți ale graficelor necesare pentru înțelegerea interfeței.
• Contrast îmbunătățit: 7:1 pentru text normal și 4.5:1 pentru text mare dacă urmărești mai mult decât nivelul de bază.

Există excepții, precum controalele inactive, elementele decorative și logo-urile. Folosește aceste excepții cu reținere. „Face parte din brand” nu este o excepție; este o constrângere de design.

Ține minte și că contrastul este doar o parte a folosirii accesibile a culorii. Dacă o stare de eroare roșie are suficient contrast, dar nu are text, etichetă pentru icon sau indicație programatică, poate totuși să îi dezavantajeze pe utilizatorii care nu pot distinge roșul de culorile apropiate.

Începe cu pagina randată, nu cu fișierul de design

Fișierele de design sunt utile, dar nu includ toate variabilele din lumea reală: suprascrieri CSS, opacitate, stări hover, randarea fonturilor în browser, zoom-ul utilizatorului, dark mode, stiluri moștenite, conținut CMS și embed-uri de marketing.

Auditează pagina așa cum o primesc utilizatorii.

Deschide pagina într-un browser desktop actual. Chrome, Edge, Firefox și Safari au toate instrumente utile de inspectare. Etichetele exacte diferă, dar fluxul de lucru este același:

1. Fă clic dreapta pe text sau pe elementul UI.
2. Alege Inspect.
3. Găsește valorile calculate color și background-color.
4. Folosește mostra de culoare a browserului sau panoul de accesibilitate pentru a citi raportul de contrast.
5. Notează trecerea, eșecul și incertitudinea.

În browserele bazate pe Chromium, selectorul de culoare afișează adesea un raport de contrast și indicații WCAG de pass/fail pentru text. Firefox DevTools expune, de asemenea, informații de accesibilitate și instrumente pentru culoare. Safari Web Inspector poate afișa stiluri calculate și informații de accesibilitate, deși fluxul este ușor diferit.

Important nu este browserul anume. Important este să citești rezultatul calculat, nu valoarea pe care cineva crede că o folosește componenta.

Construiește mai întâi o listă scurtă de audit

Nu inspecta texte la întâmplare până obosești. Fă un inventar scurt al tiparelor:

• Textul de corp pe fundalul principal al paginii.
• Text discret, legende, metadate și placeholder-e.
• Linkuri în stările normală, hover, visited și focus.
• Butoane primare, secundare și distructive.
• Etichete de formular, texte de ajutor, erori și mesaje de succes.
• Elemente de navigație, breadcrumbs și taburi.
• Carduri, badge-uri, pills și taguri.
• Iconuri care comunică sens.
• Grafice, hărți, bare de progres și culori de status.
• Text peste imagini, video, gradiente sau suprapuneri translucide.

Este suficient pentru a găsi majoritatea problemelor pe un site tipic. În plus, auditul rămâne legat de componente, nu de pixeli izolați.

Dacă auditul include butoane, combină verificarea contrastului cu elementele de bază din lista noastră de verificare pentru butoane web accesibile. Problemele de contrast ale butoanelor apar adesea lângă stări de focus lipsă, etichete neclare sau comportament defectuos la tastatură.

Inspectează contrastul textului în DevTools

Pentru text simplu pe un fundal solid, browserul poate de obicei să calculeze contrastul pentru tine.

Inspectează elementul și caută proprietatea color. Deschide selectorul de culoare din mostră. Dacă browserul poate determina fundalul, va afișa un raport de contrast. Unele instrumente trasează și o linie în selectorul de culoare care arată unde ar trece culoarea pragurile 3:1, 4.5:1 sau 7:1.

Când browserul raportează un eșec, crede-l până poți demonstra contrariul. Când raportează o trecere, folosește totuși judecata. Textul mic și subțire, afișajele de calitate slabă, anti-aliasing-ul puternic și fundalurile încărcate pot face ca un text care trece tehnic să pară slab.

O regulă practică: dacă textul de corp abia trece la 4.55:1, nu sărbători. Oferă-i mai multă marjă. Cerințele de contrast sunt minime, nu ținte ideale.

Tipografia contează și ea. Un sistem tipografic mai mare și mai clar reduce efortul înainte să ajustezi culorile. Dacă pagina pare greu de citit deși trece testul de contrast, revizuiește lungimea rândului, dimensiunea, greutatea și spațierea printr-o lentilă mai largă a lizibilității, precum acest ghid practic pentru tipografie lizibilă.

Verifică fundalul real, inclusiv opacitatea

Multe greșeli de contrast apar fiindcă fundalul vizibil nu este fundalul declarat.

Capcane frecvente includ:

• Text în interiorul unui card semi-transparent.
• Text pe un părinte cu opacity aplicat.
• Suprapuneri care folosesc rgba() sau color-mix().
• Gradiente în spatele titlurilor.
• Imagini de fundal care variază pe zona textului.
• Variabile de temă care se schimbă în dark mode.

Dacă DevTools nu poate calcula contrastul cu încredere, identifică manual culorile randate de prim-plan și fundal. Folosește panoul de stiluri calculate, dezactivează temporar straturi sau eșantionează culoarea vizibilă cu selectorul de culoare integrat, dacă browserul îl acceptă.

Pentru text peste imagini, nu eșantiona cea mai plăcută parte a imaginii. Eșantionează cea mai defavorabilă zonă plauzibilă din spatele textului. Dacă imaginea se schimbă prin încărcări în CMS, carusele sau decupaje responsive, acesta nu este un sistem de contrast stabil. Adaugă o suprapunere fiabilă, umbră pentru text, container solid sau tratament cu gradient care protejează textul indiferent de imagine.

Un sistem bun de suprapunere peste imagini este banal: aceeași intensitate a suprapunerii, zonă de decupare previzibilă, contrast suficient chiar și cu fotografii luminoase. Banal este în regulă. Utilizatorii încearcă să citească.

Nu uita stările

Capturile de ecran statice ratează multe probleme de contrast. Auditează stările de interacțiune direct în browser.

În DevTools, forțează pseudo-clase precum:

• :hover
• :focus
• :focus-visible
• :active
• :visited
• :disabled
• :checked
• :invalid

Apoi inspectează din nou culorile calculate.

Indicatorii de focus merită atenție specială. WCAG 2.2 a întărit așteptările privind aspectul focusului, iar un contur albastru pal pe un card gri deschis rămâne o problemă frecventă. Indicatorul de focus are nevoie de suficient contrast față de culorile adiacente și de o suprafață suficientă pentru a fi observabil.

Pentru controalele dezactivate, regulile WCAG de contrast au o excepție pentru componente inactive. Asta nu înseamnă că, implicit, controalele dezactivate ar trebui să fie ilizibile. Dacă starea dezactivată transmite informații utile, fă-o lizibilă. Dacă nu, gândește-te dacă ar trebui să fie prezentă deloc.

Folosește Lighthouse, dar nu îi delega judecata

Auditurile din browser, precum Lighthouse, pot identifica rapid unele probleme de contrast. Rulează auditul integrat dacă browserul îl oferă, apoi tratează rezultatele ca punct de plecare.

Verificările automate sunt bune la găsirea nodurilor text cu eșecuri evidente de contrast calculat. Sunt mai slabe la:

• Text încorporat în imagini.
• Etichete randate în canvas.
• Cazuri-limită SVG.
• Eșecuri care apar doar la hover.
• Calitatea indicatorului de focus.
• Grafice în care relațiile de culoare poartă sens.
• Componente ascunse în spatele autentificării, meniurilor sau pașilor de formular.

Dacă un raport este verde, tot trebuie să inspectezi componente reprezentative. Dacă un raport este roșu, evită panica și prioritizează problemele după impactul asupra utilizatorului. Același principiu se aplică în general rapoartelor de performanță și accesibilitate: citește rezultatul instrumentului ca dovadă, nu ca verdict. Folosim această mentalitate în ghidul nostru despre citirea unui raport Lighthouse fără panică, iar ea se aplică perfect și aici.

Auditează și contrastul non-text

Textul primește cea mai mare parte a atenției, dar WCAG acoperă și conținutul non-text necesar pentru a înțelege sau opera interfața.

Verifică cel puțin aceste cazuri:

• Chenare de input față de fundalul paginii.
• Contururi de checkbox și radio.
• Stări de toggle.
• Butoane doar cu icon.
• Iconuri de eroare și simboluri de avertizare.
• Linii, bare și etichete în grafice.
• Indicatori de progres.
• Indicatori pentru tab selectat sau navigație activă.

Ținta este de obicei 3:1 față de culorile adiacente. De exemplu, un chenar gri deschis al unui input pe fundal alb poate fi aproape invizibil. Un grafic cu cinci linii pastel poate arăta elegant și totuși poate fi inutilizabil.

Pentru grafice, contrastul nu este suficient de unul singur. Folosește etichete, modele, stiluri de linie, adnotare directă sau spațiere, astfel încât informația să nu depindă doar de culoare. Acest lucru îi ajută pe utilizatorii daltoniști, pe cei cu vedere slabă, pe cei care privesc ecranul în lumină puternică și pe oricine citește o captură de ecran într-un document.

Notează constatările într-un format util pentru dezvoltatori

Un audit de contrast util nu spune „unele griuri nu trec”. Identifică componenta, starea, valorile curente, pragul așteptat și remedierea sugerată.

Un format compact funcționează bine:

| Componentă | Stare | Prim-plan | Fundal | Raport | Țintă | Rezultat | Remediere sugerată | |---|---:|---:|---:|---:|---:|---|---| | Metadate card | Implicit | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Eșec | Folosește --color-text-muted-strong | | Buton primar | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Trecere | Păstrează | | Chenar input | Implicit | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Eșec | Închide tokenul de chenar |

Leagă remedierile de design tokens dacă site-ul le folosește. Nu corecta douăzeci de componente individuale dacă problema reală este un singur token slab.

Fă remedierile puțin mai puternice decât minimul

Problemele de contrast sunt adesea ușor de rezolvat prost. Echipele ajustează o culoare până când verificatorul spune 4.51:1, apoi merg mai departe. Asta nu lasă marjă pentru randarea fonturilor, transparență, diferențe între browsere, tematică, variații ale imaginilor sau modificări viitoare de brand.

Preferă ținte confortabile:

• Text de corp: mai aproape de 7:1 când este practic.
• Text discret: tot peste 4.5:1 dacă este conținut real.
• Chenare UI și iconuri: confortabil peste 3:1.
• Text peste imagini: folosește o suprapunere controlată în locul estimărilor pentru fiecare imagine.

Webul este vizualizat pe laptopuri ieftine, telefoane cu luminozitate redusă, trotuare puternic luminate, monitoare cu tentă și ecrane îmbătrânite. Conformitatea minimă nu este același lucru cu citirea confortabilă.

<!-- tool-cta:start -->

💡 Încercați asta: Când verificați perechi de contrast preluate din DevTools, Color Converter ajută la conversia între hex, RGB și HSL, astfel încât valorile să se potrivească cu notițele dvs. de audit.

<!-- tool-cta:end -->

O listă de verificare pentru audit de contrast fără instalare

Folosește această secvență când ai nevoie de un audit rapid, dar credibil:

1. Deschide pagina de producție într-un browser modern.
2. Listează principalele tipare de text, UI și stări.
3. Inspectează culorile calculate de prim-plan și fundal în DevTools.
4. Folosește selectorul de culoare integrat sau panoul de accesibilitate pentru a citi contrastul.
5. Forțează stările hover, focus, active, visited și invalid.
6. Verifică textul peste imagini și gradiente față de cel mai defavorabil fundal plauzibil.
7. Verifică părțile UI non-text față de cerința 3:1.
8. Rulează un audit automat integrat ca plasă de siguranță, nu ca întreg auditul.
9. Notează problemele pe componentă și token.
10. Remediază cu marjă, nu abia trecând pragul.

Este suficient pentru a prinde majoritatea problemelor de contrast fără să adaugi încă un instrument în stack. Auditurile mai avansate își au în continuare locul, mai ales pentru sisteme de design mari, produse reglementate sau vizualizări de date complexe. Dar pentru multe site-uri, browserul îți oferă deja dovezile de care ai nevoie. Partea grea este să fii suficient de sistematic ca să le folosești.