Share
Unul dintre cele mai importante aspecte ale creării de site-uri web accesibile este să vă asigurați că aveți text lizibil. Și la rândul său, crearea de text lizibil înseamnă asigurarea unui contrast de culoare adecvat între culorile textului și culorile de fundal.
De exemplu, aruncați o privire asupra textului violet pe fundal alb din pagina de pornire a Tuts +. Acest nivel de contrast este bun:
Exemplu de raport bun de contrast text Dar dacă facem textul mai ușor, putem ajunge rapid la un punct în care contrastul este prea mic și devine prea greu de citit:
Același text ajustat are acum un raport de contrast rău Acesta ar putea fi un concept relativ simplu, dar asigurarea unui contrast suficient în practică poate fi de fapt un pic dificil. Uneori, contrastul cu culoarea ar putea să arate bine ochiului, dar în realitate poate să nu fie până la par. Deci, cum putem fi siguri că nivelele de contrast ale culorii noastre sunt accesibile? Aici pot ajuta Chrome Dev Tools.
Acest tutorial face parte din Accesibilitatea Web: Ghidul complet de învățare, unde am colectat o serie de tutoriale, articole, cursuri și cărți electronice, pentru a vă ajuta să înțelegeți accesibilitatea web de la început.
Veți observa că în capturile de ecran de mai sus vedem selectorul de culori Chrome Dev Tools. Dacă vă uitați atent, puteți vedea că există și informații suplimentare în acel selector de culori, cum ar fi afișarea unui scor pentru raportul de contrast, care vă ajută să oferiți feedback cu privire la opțiunile de culoare. Aceasta este o parte din instrumentele de accesare recent adăugate din Chrome - să aruncăm o privire și să vedem cum funcționează toate acestea.
Notă: S-ar putea să vedeți câteva instrucțiuni în jurul rețelei web spunând că trebuie să activați "Experimentele pentru dezvoltatori" pentru a utiliza aceste caracteristici de control al contrastului color, dar acest lucru nu mai este cazul. Funcționalitatea este acum construită atât în Chrome, cât și în Chrome.
Începeți prin a deschide instrumentele Chrome / Chromium Dev și selectați orice element de text din codul HTML. Apoi, în stiluri filă, localizați culoare proprietate, iar în partea dreaptă faceți clic pe specimenul de culoare mic pentru a deschide instrumentul de selectare.
Selectați un element de text și faceți clic pe pătrat colorat pentru a începe În zona pe care am evidențiat-o cu un pătrat roșu de mai jos, veți vedea scorul raportului de contrast de 5.00 acest element de text a fost dat. Acest scor vine prin detectarea culorii elementului de fundal și compararea acestuia cu culoarea textului.
De asemenea, veți observa că există două căpușe verzi lângă punctaj, ceea ce înseamnă că acest raport de contrast se încadrează în parametrii acceptați pentru accesibilitate.
Obținerea biletului de aprobare pe raportul de contrast Acest scor de bază al raportului este util, dar pentru a obține acces la toate instrumentele de contrast de culoare, faceți clic pe săgeata indicând în jos spre dreapta punctului de contrast. Acesta va afișa o pictogramă etichetate Afișați mai multe când o mușcați peste el.
Extinderea instrumentelor pentru a obține mai multe informații despre contrastul culorilor Cu această secțiune extinsă primim câteva informații suplimentare. Aici veți vedea scorurile de contrast ideale pe care ar trebui să le încercați să le atingeți, cu numere mai mari reprezentând un contrast mai puternic. Un scor cuprins între 3,0 și 4,5 este reprezentat ca "AA" și este considerat minim, în timp ce 4,5 sau mai mare este reprezentat ca "AAA" și este ideal.
Acum vedem scorurile de contrast pe care trebuie să le urmăriți și o linie "sigură" pe selectorul de culori De asemenea, veți observa că, odată ce instrumentele de contrast plin de culoare sunt extinse, în partea de sus a selectorului de culori apare o linie. Aceasta este linia de separare dintre culorile textului care sunt cel puțin "AA" și cele care nu respectă standardele.
Notă: puteți ajunge destul de aproape de linie și să treceți de la un rating "AAA" la "AA", rămânând deasupra unui scor de 3,0, dar va trece sub 4,5:
Apropierea de linie este încă în regulă, deși nu este ideală Totuși, orice element deasupra liniei va fi marcat cu simboluri de avertizare roșii pentru a vă spune că combinația de culori reprezintă o problemă pentru accesibilitate:
Traversați linia și pierdeți gradul de contrast AA / AAA De asemenea, puteți deplasa cursorul alfa, situat sub culisa nuanței, iar linia "sigură" se va schimba pentru a ține cont de transparența mărită:
Deplasarea cursorului alfa deplasează linia "sigură" Un alt lucru pe care trebuie să-l cunoașteți este faptul că partea din linia pe care doriți să o atingeți, poate să inverseze în funcție de culoarea fundalului. Dacă textul dvs. este pe un fundal închis, veți dori să apară culoarea textului de mai sus linia. Dacă textul dvs. este pe un fond deschis, culoarea acestuia ar trebui să cadă de mai jos linia.
Mai jos vom vedea un exemplu de această inversiune, cu un fundal întunecat în imaginea din stânga și un fundal ușor în imaginea corectă. Observați că există și o previzualizare a culorilor de text și de fundal împreună - căutați Aa în interiorul unui cerc, sub Afișați mai multe intrerupator:
În stânga, textul colorat pe fond închis ar trebui să aibă culoarea deasupra liniei. În dreapta, textul colorat în culori închise pe un fond deschis trebuie să aibă culoarea sub linia. Aceste instrumente de control al contrastului de culoare din Chrome și Chromium vor face mult mai ușor să asigure citirea în timpul procesului de proiectare. Tot ce trebuie să faceți este să verificați rapid fiecare dintre culorile textului nostru, să folosiți selectorul de culori pentru a modifica dacă este necesar, apoi să reintroduceți culorile noi în codul nostru.
Acesta este un pas mai aproape de a face webul un loc minunat pentru toată lumea!
Accentsconagua