Kako provjeriti kontrast boja bez instaliranja ičega

Provjere kontrasta boja često se tretiraju kao specijalistički zadatak pristupačnosti: otvorite dizajnersku datoteku, instalirate dodatak, izvezete snimke zaslona, pokrenete izvješće, raspravljate o bojama brenda. To može biti korisno, ali nije mjesto odakle bi većina timova trebala krenuti.

Za produkcijsku web-stranicu najbrža pouzdana provjera obično se radi u pregledniku koji već imate otvoren. Moderni browser DevTools alati mogu pregledati izračunate boje, prikazati omjere kontrasta, otkriti stilove stanja i pomoći vam testirati nezgodne slučajeve koje automatizirana izvješća propuštaju.

Ovaj vodič pretpostavlja da ne instalirate ništa. Bez proširenja preglednika. Bez dizajnerskih dodataka. Bez plaćenog paketa za audit. Samo stranica, preglednik i jednostavna metoda.

Pravila kontrasta koja vam stvarno trebaju

Za većinu web rada, WCAG kontrast svodi se na nekoliko pragova:

• Običan tekst: najmanje 4.5:1 kontrasta u odnosu na pozadinu.
• Veliki tekst: najmanje 3:1. WCAG to definira kao otprilike 24 CSS piksela, ili oko 18.66 CSS piksela ako je tekst podebljan.
• UI komponente i grafički objekti: najmanje 3:1 za važne rubove, ikone, stanja i dijelove grafikona potrebne za razumijevanje sučelja.
• Poboljšani kontrast: 7:1 za običan tekst i 4.5:1 za veliki tekst ako ciljate iznad osnovne razine.

Postoje iznimke, poput neaktivnih kontrola, dekorativnih elemenata i logotipa. Koristite te iznimke štedljivo. „To je dio brenda” nije iznimka; to je dizajnersko ograničenje.

Također zapamtite da je kontrast samo jedan dio pristupačne upotrebe boje. Ako crveno stanje pogreške ima dovoljno kontrasta, ali nema tekst, oznaku ikone ili programatsku naznaku, i dalje može zakazati za korisnike koji ne mogu razlikovati crvenu od okolnih boja.

Počnite s prikazanom stranicom, a ne s dizajnerskom datotekom

Dizajnerske datoteke su korisne, ali ne uključuju svaku varijablu iz stvarnog svijeta: CSS nadjačavanja, prozirnost, hover stanja, renderiranje fontova u pregledniku, korisnički zoom, tamni način rada, naslijeđene stilove, CMS sadržaj i marketinške embedove.

Provjeravajte stranicu onako kako je korisnici dobivaju.

Otvorite stranicu u aktualnom desktop pregledniku. Chrome, Edge, Firefox i Safari imaju korisne alate za inspekciju. Točne oznake se razlikuju, ali workflow je isti:

1. Desnom tipkom kliknite tekst ili UI element.
2. Odaberite Inspect.
3. Pronađite izračunate vrijednosti color i background-color.
4. Upotrijebite preglednikov uzorak boje ili panel za pristupačnost kako biste očitali omjer kontrasta.
5. Zabilježite prolaz, pad i nesigurnost.

U preglednicima temeljenima na Chromiumu, birač boje često prikazuje omjer kontrasta i WCAG smjernice prolazi/ne prolazi za tekst. Firefox DevTools također izlaže informacije o pristupačnosti i alate za boje. Safari Web Inspector može prikazati izračunate stilove i informacije o pristupačnosti, iako je workflow nešto drukčiji.

Ključ nije konkretan preglednik. Ključ je čitanje izračunatog rezultata, a ne vrijednosti za koju netko misli da je komponenta koristi.

Prvo napravite kratak popis za provjeru

Nemojte pregledavati nasumični tekst dok se ne umorite. Napravite kratak inventar obrazaca:

• Tekst tijela na glavnoj pozadini stranice.
• Prigušeni tekst, opisi, metapodaci i placeholderi.
• Linkovi u normalnom, hover, visited i focus stanju.
• Primarni, sekundarni i destruktivni gumbi.
• Oznake obrazaca, pomoćni tekst, pogreške i poruke uspjeha.
• Navigacijske stavke, breadcrumbs i tabovi.
• Kartice, značke, pill elementi i tagovi.
• Ikone koje prenose značenje.
• Grafikoni, karte, trake napretka i statusne boje.
• Tekst preko slika, videa, gradijenata ili prozirnih slojeva.

To je dovoljno za pronalazak većine pogrešaka na tipičnoj stranici. Također drži audit vezan uz komponente, a ne uz jednokratne piksele.

Ako vaš audit uključuje gumbe, uparite provjeru kontrasta s osnovama iz našeg popisa provjera za pristupačne web gumbe. Problemi s kontrastom gumba često stoje uz nedostajuća stanja fokusa, nejasne oznake ili pokvareno ponašanje tipkovnice.

Provjerite kontrast teksta u DevTools alatima

Za običan tekst na jednobojnoj pozadini preglednik obično može izračunati kontrast za vas.

Pregledajte element i potražite svojstvo color. Otvorite birač boje iz uzorka. Ako preglednik može odrediti pozadinu, prikazat će omjer kontrasta. Neki alati također iscrtavaju liniju u biraču boje koja pokazuje gdje bi boja prošla 3:1, 4.5:1 ili 7:1.

Kad preglednik prijavi pad, vjerujte mu dok ne možete dokazati suprotno. Kad prijavi prolaz, i dalje koristite prosudbu. Sitna tanka slova, zasloni niže kvalitete, snažan anti-aliasing i zauzete pozadine mogu učiniti da tekst koji tehnički prolazi djeluje slabije.

Praktično pravilo: ako tekst tijela jedva prolazi na 4.55:1, nemojte slaviti. Dajte mu više prostora. Zahtjevi za kontrast su minimumi, a ne idealni ciljevi.

Tipografija je također važna. Veći i jasniji tipografski sustav smanjuje napor i prije nego posegnete za podešavanjem boja. Ako se stranica čini teškom za čitanje unatoč prolaznom kontrastu, ponovno razmotrite duljinu redaka, veličinu, debljinu i razmak kroz širu prizmu čitljivosti, poput ovog praktičnog vodiča za čitljivu tipografiju.

Provjerite stvarnu pozadinu, uključujući prozirnost

Mnoge pogreške kontrasta događaju se zato što vidljiva pozadina nije deklarirana pozadina.

Česte zamke uključuju:

• Tekst unutar poluprozirne kartice.
• Tekst na roditelju na koji je primijenjen opacity.
• Slojeve koji koriste rgba() ili color-mix().
• Gradijente iza naslova.
• Pozadinske slike koje se mijenjaju preko područja teksta.
• Varijable teme koje se mijenjaju u tamnom načinu rada.

Ako DevTools ne može pouzdano izračunati kontrast, ručno odredite renderirane boje prednjeg plana i pozadine. Upotrijebite panel s izračunatim stilovima, privremeno isključite slojeve ili uzorkujte vidljivu boju ugrađenim biračem boje ako ga vaš preglednik podržava.

Za tekst preko slika nemojte uzorkovati najljepši dio slike. Uzorkujte najgore vjerojatno područje iza teksta. Ako se slika mijenja kroz CMS prijenose, vrtuljke ili responzivne izreze, to nije stabilan sustav kontrasta. Dodajte pouzdan overlay, sjenu teksta, čvrsti spremnik ili gradijentni tretman koji štiti tekst bez obzira na sliku.

Dobar sustav overlayja za slike je dosadan: ista jačina overlayja, predvidljivo područje izreza, dovoljno kontrasta čak i sa svijetlim fotografijama. Dosadno je u redu. Korisnici pokušavaju čitati.

Ne zaboravite stanja

Statične snimke zaslona propuštaju mnoge pogreške kontrasta. Provjeravajte interakcijska stanja izravno u pregledniku.

U DevTools alatima prisilite pseudo-klase kao što su:

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

Zatim ponovno pregledajte izračunate boje.

Indikatori fokusa zaslužuju posebnu pozornost. WCAG 2.2 pojačao je očekivanja oko izgleda fokusa, a blijedoplavi obrub na svijetlosivoj kartici i dalje je čest problem. Indikator fokusa treba imati dovoljno kontrasta u odnosu na susjedne boje i dovoljno površine da bude uočljiv.

Za onemogućene kontrole WCAG pravila kontrasta imaju iznimku za neaktivne komponente. To ne znači da onemogućene kontrole prema zadanim postavkama trebaju biti nečitljive. Ako onemogućeno stanje prenosi korisnu informaciju, učinite ga čitljivim. Ako ne prenosi, razmislite treba li uopće biti prisutno.

Koristite Lighthouse, ali ne prepuštajte mu prosudbu

Auditi u pregledniku, poput Lighthousea, mogu brzo uhvatiti neke pogreške kontrasta. Pokrenite ugrađeni audit ako ga vaš preglednik nudi, zatim rezultate tretirajte kao početnu točku.

Automatizirane provjere dobre su u pronalaženju tekstualnih čvorova s očitim pogreškama izračunatog kontrasta. Slabije su u:

• Tekstu ugrađenom u slike.
• Oznakama renderiranima na canvasu.
• Rubnim slučajevima SVG-a.
• Pogreškama koje se pojavljuju samo na hoveru.
• Kvaliteti indikatora fokusa.
• Grafikonima u kojima odnosi boja nose značenje.
• Komponentama skrivenima iza autentikacije, izbornika ili koraka obrasca.

Ako se izvješće vrati zeleno, i dalje trebate pregledati reprezentativne komponente. Ako se izvješće vrati crveno, izbjegnite paniku i prioritizirajte probleme prema utjecaju na korisnika. Isti se princip općenito primjenjuje na izvješća o performansama i pristupačnosti: čitajte izlaz alata kao dokaz, a ne kao presudu. Taj način razmišljanja koristimo u našem vodiču za čitanje Lighthouse izvješća bez panike, i ovdje se primjenjuje vrlo jasno.

Provjerite i kontrast netekstualnih elemenata

Tekst dobiva najviše pozornosti, ali WCAG pokriva i netekstualni sadržaj potreban za razumijevanje ili upravljanje sučeljem.

Provjerite barem ove slučajeve:

• Rubovi input polja u odnosu na pozadinu stranice.
• Obrubi checkbox i radio kontrola.
• Stanja prekidača.
• Gumbi samo s ikonom.
• Ikone pogreške i simboli upozorenja.
• Linije, stupci i oznake grafikona.
• Indikatori napretka.
• Indikatori odabranog taba ili aktivne navigacije.

Cilj je obično 3:1 u odnosu na susjedne boje. Primjerice, svijetlosivi rub input polja na bijeloj pozadini može biti gotovo nevidljiv. Grafikon s pet pastelnih linija može izgledati elegantno i svejedno biti neupotrebljiv.

Za grafikone sam kontrast nije dovoljan. Koristite oznake, uzorke, stilove linija, izravne anotacije ili razmake kako informacija ne bi ovisila samo o boji. To pomaže daltonistima, slabovidnim korisnicima, ljudima koji gledaju u odsjaju i svima koji čitaju snimku zaslona u dokumentu.

Zabilježite nalaze u formatu koji developeri mogu koristiti

Korisna provjera kontrasta ne kaže „neke sive ne prolaze”. Ona identificira komponentu, stanje, trenutačne vrijednosti, očekivani prag i predloženi popravak.

Kompaktan format dobro funkcionira:

| Komponenta | Stanje | Prednji plan | Pozadina | Omjer | Cilj | Rezultat | Predloženi popravak | |---|---:|---:|---:|---:|---:|---|---| | Metapodaci kartice | Zadano | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Ne prolazi | Koristiti --color-text-muted-strong | | Primarni gumb | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Prolazi | Zadržati | | Rub input polja | Zadano | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Ne prolazi | Zatamniti token ruba |

Povežite popravke s dizajnerskim tokenima ako ih stranica ima. Nemojte krpati dvadeset pojedinačnih komponenti ako je jedan slab token pravi problem.

Popravke učinite malo jačima od minimuma

Pogreške kontrasta često je lako popraviti loše. Timovi pomaknu boju dok provjera ne kaže 4.51:1, zatim nastave dalje. To ne ostavlja marginu za renderiranje fontova, prozirnost, razlike među preglednicima, temiranje, varijacije slika ili buduće izmjene brenda.

Preferirajte ugodne ciljeve:

• Tekst tijela: bliže 7:1 kad je praktično.
• Prigušeni tekst: i dalje iznad 4.5:1 ako je stvarni sadržaj.
• UI rubovi i ikone: ugodno iznad 3:1.
• Tekst preko slika: koristite kontrolirani overlay umjesto pogađanja za svaku sliku.

Web se gleda na jeftinim laptopima, zatamnjenim telefonima, svijetlim pločnicima, toniranim monitorima i zastarjelim zaslonima. Minimalna usklađenost nije isto što i ugodno čitanje.

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

💡 Isprobajte ovo: Kada provjeravate parove kontrasta koje ste preuzeli iz DevToolsa, Color Converter pomaže pretvarati između hex, RGB i HSL vrijednosti kako bi se vrijednosti poklapale s vašim bilješkama revizije.

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

Popis provjera kontrasta bez instalacije

Koristite ovaj slijed kada vam treba brza, ali vjerodostojna provjera:

1. Otvorite produkcijsku stranicu u modernom pregledniku.
2. Popišite glavne obrasce teksta, UI-ja i stanja.
3. Pregledajte izračunate boje prednjeg plana i pozadine u DevTools alatima.
4. Upotrijebite ugrađeni birač boje ili panel za pristupačnost kako biste očitali kontrast.
5. Prisilite hover, focus, active, visited i invalid stanja.
6. Provjerite tekst preko slika i gradijenata u odnosu na najgoru vjerojatnu pozadinu.
7. Provjerite netekstualne dijelove UI-ja u odnosu na zahtjev 3:1.
8. Pokrenite ugrađeni automatizirani audit kao sigurnosnu mrežu, ne kao cijeli audit.
9. Zabilježite pogreške po komponenti i tokenu.
10. Popravljajte s marginom, a ne tako da jedva prijeđete prag.

To je dovoljno da uhvatite većinu problema s kontrastom bez dodavanja još jednog alata u svoj stack. Napredniji auditi i dalje imaju svoje mjesto, osobito za velike dizajnerske sustave, regulirane proizvode ili složenu vizualizaciju podataka. Ali za mnoge web-stranice preglednik vam već daje dokaze koji su vam potrebni. Teži dio je biti dovoljno sustavan da ih iskoristite.