Värvikontrastsus ja fontivalik — WCAG-kontroll ja tööriistad

🎧 Kuula kõiki artikleid järjest

Värvikontrastsus ja font ei ole pelgalt maitseasi. WCAG määrab mõõdetavad miinimumnõuded tekstile, kasutajaliidese elementidele ja nähtavale fookusele.

Miks värvikontrastsus on oluline?

Ligipääsetavusest rääkides mõeldakse sageli ekraanilugejaid või klaviatuuriga navigeerimist. Tegelikult puutub kontrastsusega seotud probleemidega kokku palju suurem osa kasutajatest.

Värvinägemishäired, vanusega seotud nägemise muutused, madala kvaliteediga ekraanid ja ere päikesevalgus mõjutavad kõik seda, kui hästi inimene teksti loeb.

Kui kontrastsus on liiga madal, muutub sisu raskesti loetavaks isegi siis, kui kõik tehniliselt töötab.

Seetõttu ei ole kontrastsus ainult WCAG-nõue. See on kasutatavuse ja loetavuse põhitingimus. Kui veeb peab vastama ligipääsetavuse nõuetele, tuleb kontrasti, fookust ja vormide loetavust kontrollida ligipääsetavuse auditi või laiema Drupali auditi käigus.

WCAG kontrastsusnõuded

WCAG määratleb minimaalsed kontrastsuse suhted teksti ja tausta vahel.

Allolevad suhtarvud pärinevad W3C WCAG 2.2 kontrastsusnõuete selgitusest↗ (avaneb uues aknas).

WCAG AA-tase

Normaalse suurusega tekst:

• vähemalt 4.5:1

Suur tekst:

• vähemalt 3:1

Suur tekst tähendab üldjuhul:

• 18 pt või suurem;
• või 14 pt paksus kirjas.

Komponendi või oleku tuvastamiseks vajalik visuaalne teave:

• vähemalt 3:1

See kehtib näiteks järgmiste nähtavate tunnuste kohta:

• nuppude piirjoontele, kui neid on vaja nupu tuvastamiseks;
• vormiväljade äärtele;
• ikoonidele;
• fookuse indikaatoritele.

WCAG AAA-tase

Normaalne tekst:

• vähemalt 7:1

Suur tekst:

• vähemalt 4.5:1

AAA ei ole enamasti seadusest tulenev nõue, kuid seda kasutatakse kõrgema ligipääsetavuse eesmärkide korral.

Mis on kontrastsuse suhe?

Kontrastsuse suhe näitab, kui suur on heleduse erinevus kahe värvi vahel.

Näiteks:

Suurem kontrastsussuhe muudab teksti üldjuhul paremini eristatavaks, kuid loetavust mõjutavad ka fondi kuju, suurus, reavahe ja kasutaja vajadused.

Maksimaalne võimalik kontrastsus on must tekst valgel taustal.

Kuidas kontrastsust kontrollida?

WebAIM Contrast Checker

Üks populaarsemaid tööriistu:

WebAIM Contrast Checker↗ (avaneb uues aknas)

Sisesta:

• teksti värv;
• taustavärv.

Tööriist näitab kohe:

• kontrastsuse suhte;
• AA vastavuse;
• AAA vastavuse.

Chrome DevTools

Chrome näitab kontrastsuse infot otse arendajatööriistades.

Kontrollimiseks:

1. Ava Inspect.
2. Vali tekstielement.
3. Ava värvivalija.
4. Vaata Contrast sektsiooni.

See võimaldab probleeme kiiresti leida ilma eraldi tööriistata.

Colour Contrast Analyser

Desktop-rakendus, mis võimaldab mõõta kontrastsust:

• veebilehtedel;
• PDF-idel;
• piltidel;
• disainifailides.

Kasulik siis, kui värvikoodid pole otse teada.

Figma pluginad

Levinud valikud:

• Contrast
• Stark

Need aitavad kontrastsusprobleeme märgata juba disainifaasis.

Levinud kontrastsusvead

Hall tekst helehallil taustal

See on üks sagedasemaid probleeme.

Näiteks:

color: #999999;
background: #ffffff;

Selline kombinatsioon ei vasta sageli WCAG AA-taseme nõuetele.

Visuaalselt võib see tunduda elegantne, kuid loetavus kannatab.

Valge tekst heledal nupul

Disainis kasutatakse sageli:

• helesiniseid;
• oranže;
• kollaseid;
• rohelisi nuppe.

Valge tekst nende peal ei pruugi olla piisavalt kontrastne.

Probleem ilmneb eriti mobiilis ja eredas valguses.

Kohatäitetekst vormides

Kohatäitetekst on sageli liiga hele.

Kasutajad võivad jätta välja täitmata lihtsalt seetõttu, et nad ei näe juhiseid piisavalt hästi.

Linkide eristamine

Link ei pea erinema ainult taustast.

See peab erinema ka tavalisest tekstist.

Kui ainus erinevus on värv, võib osa kasutajaid linke mitte märgata.

Fookuse indikaator

WCAG 2.2 tõi fookuse nähtavusele rangemad nõuded.

Kui kasutaja liigub klaviatuuriga:

• peab olema näha, kus fookus asub;
• fookuse indikaator peab olema kontrastne.

Fontivalik ja ligipääsetavus

Kontrastsust saab mõõta täpselt.

Fontide puhul on oluline loetavus.

Eelista selgeid fonte

Hea valik:

• Inter
• Roboto
• Source Sans
• Open Sans
• Noto Sans

Need fondid on loodud ekraanilt lugemiseks.

Väldi liigset dekoratiivsust

Dekoratiivsed fondid võivad sobida:

• kampaanialehtedele;
• pealkirjadele;
• visuaalsetele rõhuasetustele.

Pika teksti puhul vähendavad need sageli loetavust.

Tähtede eristatavus

Oluline on, et järgmised märgid oleksid selgelt eristatavad:

• I
• l
• 1

Kui need näevad välja peaaegu ühesugused, suureneb vigade ja segaduse oht.

Fondisuurus

Praktilised soovitused:

• põhitekst vähemalt 16 px;
• väiksemad tekstid ainult erijuhtudel;
• alla 12 px tekst on üldjuhul problemaatiline.

Reavahe

WCAG nõuab, et sisu ja funktsionaalsus säiliksid ka siis, kui kasutaja suurendab rea-, lõigu-, tähe- ja sõnavahet.

Põhiteksti lähtekohana töötab sageli hästi:

line-height: 1.5;

Liiga tihe tekst väsitab lugejat ja aeglustab lugemist.

Rea pikkus

Hea loetavuse jaoks:

• umbes 60–80 tähemärki rea kohta.

Liiga pikad read muudavad teksti jälgimise raskemaks.

Kuidas ühendada bränding ja ligipääsetavus?

Sageli tekib küsimus:

> "Aga meie brändivärv ei vasta kontrastsusnõuetele."

See ei tähenda, et bränd tuleb ümber teha.

Levinud lahendused:

Kasuta brändivärvi taustana

Brändivärv võib olla:

• taust;
• aktsent;
• illustratsioon.

Tekst võib olla must või väga tume.

Kasuta tumedamat varianti

Sageli piisab värvi väikesest tumendamisest, et saavutada vajalik kontrastsus.

Kasutaja ei märka erinevust, kuid loetavus paraneb oluliselt.

Kasuta värvi rõhutamiseks

Kõik tekst ei pea olema brändivärviga.

Brändivärv töötab hästi:

• nuppudel;
• ikoonidel;
• rõhutustel;
• linkidel.

Põhiteksti jaoks on enamasti parem kasutada neutraalseid toone.

Kontrollnimekiri

Enne veebilehe avaldamist kontrolli:

• kas põhitekst vastab vähemalt 4.5:1 nõudele;
• kas komponentide ja olekute tuvastamiseks vajalikud visuaalsed tunnused vastavad vähemalt 3 : 1 nõudele;
• kas fookuse indikaator on nähtav;
• kas kohatäitetekst on loetav;
• kas linke saab tavatekstist eristada;
• kas fondisuurus on piisav;
• kas reavahe on mugav;
• kas tekst on mobiili- ja töölauavaates sama hästi loetav.

Kokkuvõte

Värvikontrastsus ja fontivalik mõjutavad otseselt seda, kas kasutaja suudab veebis olevat sisu lugeda.

Erinevalt paljudest disainiotsustest on kontrastsuse puhul olemas konkreetsed mõõdikud ja nõuded, mida saab kontrollida juba disainifaasis.

Hea kontrastsus parandab:

• ligipääsetavust;
• kasutajakogemust;
• loetavust;
• mobiilikasutust;
• WCAG-vastavust.

Kui veeb vastab kontrastsusnõuetele, on see parem mitte ainult erivajadustega kasutajatele, vaid kõigile külastajatele.

Kui soovid kontrollida olemasoleva veebisaidi WCAG-vastavust, aitab meie auditi- ja testimisteenus kaardistada kontrastsuse, ligipääsetavuse ja kasutatavuse peamised riskid.

WebPro Company OÜ Tehniline juht: Kaido Toomingas

Vajad Drupal abi?

Kui artikkel puudutab sinu olukorda, ei pea kõike lõpuni lugema. Sinuga suhtleb päris inimene ja aitab järgmise sammuni jõuda.

Võta ühendust