Värvikontrast tekstile, nuppudele ja ikoonidele

Miks kontrast on oluline

Kahvatu tekst läheb lugejatele maksma. Nõrga nägemisega inimesed, eakamad lugejad ja kõik, kes vaatavad telefoni eredas valguses, vajavad selget erinevust teksti ja tausta vahel. Seepärast seavad W3C veebisisu ligipääsetavuse suunised (WCAG) miinimumväärtused tekstile, juhtelementidele nagu nupud ja sisestusväljad ning ikoonidele ja graafikale. Neid saab mõõta ja kontrollida enne avaldamist.

Kuidas kontrastsuhe toimib

Kontrastsuhe võrdleb, kui heledad kaks värvi on. WCAG ei vaata värvitooni, vaid suhtelist heledust: väärtust 0 kõige tumedama musta ja 1 kõige heledama valge vahel. Kolm kanalit – punane, roheline ja sinine – teisendatakse ja kaalutakse: roheline loeb kõige rohkem, punane vähem ja sinine kõige vähem. Suhe on (L1 + 0,05) / (L2 + 0,05), kus L1 on heledama värvi heledus. Tulemus jääb vahemikku 1 : 1 kahe võrdse värvi puhul kuni 21 : 1 musta puhul valgel.

Praktikas on olulised kaks W3C reeglit. Esiteks väärtusi ei ümardata: suhe 4,499 : 1 ei täida piiri 4,5 : 1. Teiseks mõõdetakse kontrasti tausta suhtes, mis on tekstile määratud. Kui leht määrab ainult tekstivärvi ja mitte taustavärvi, loeb W3C seda veaks, sest külastaja vaiketaust ei ole teada. Määra alati mõlemad värvid koos.

Kolm edukriteeriumi

• 1.4.3 Kontrast (miinimum), tase AA: tekst ja tekstipildid vajavad vähemalt 4,5 : 1, suur tekst vähemalt 3 : 1.
• 1.4.6 Kontrast (täiustatud), tase AAA: tekst vajab vähemalt 7 : 1, suur tekst vähemalt 4,5 : 1. See on rangem tase ja aitab kõige rohkem pikkade tekstide puhul.
• 1.4.11 Mittetekstiline kontrast, tase AA: vähemalt 3 : 1 kõrvalolevate värvide suhtes kõige puhul, mida on vaja näha juhtelemendi ja selle oleku äratundmiseks (näiteks sisestusvälja ääris või fookuse tähis), ning graafika osade puhul, mida on vaja sisu mõistmiseks, näiteks ikoonid või joonised diagrammis.

Mis loeb suureks tekstiks

Suur tekst on vähemalt 18 punkti või paksus kirjas vähemalt 14 punkti. W3C teisendab selle umbes 24 piksliks ja paksus kirjas umbes 18,5 piksliks. Suurel tekstil võib olla väiksem kontrast, sest tähed on suuremad ja nende jooned laiemad. Ole õhukeste kirjatüüpidega ettevaatlik: W3C järgi võib silumine (anti-aliasing) muuta õhukesed või ebatavalised kirjatüübid kahvatumaks, kui nende määratud värv on. W3C soovitab paksemaid kirjatüüpe või värvipaari, mis on miinimumist selgelt kõrgem.

Mis ei pea nõudeid täitma

• Mitteaktiivsed komponendid, näiteks keelatud nupp.
• Puhas kaunistus ja tekst, mida keegi ei näe.
• Tekst, mis on logo või brändinime osa.
• Juhuslik tekst pildil, millel on muu oluline sisu, näiteks tänavasilt fotol.

Levinud vead

• Helehall valgel. Hall kuupäevade, pildiallkirjade või teisese teksti jaoks on sageli liiga kahvatu: #999999 valgel jõuab ainult 2,84 : 1-ni. Kõige heledam puhas hall, mis täidab valgel tavalise teksti puhul AA, on #767676 suhtega 4,54 : 1.
• Tekst piltidel. Kontrast muutub foto igas osas. W3C loetleb ebapiisava kontrastiga taustapildid veana (F83). Pane tekst ühtlasele pinnale, tumenda pilti teksti taga või paiguta tekst pildi kõrvale. Kontrolli kõige heledamat kohta teksti taga.
• Kohatäite tekst. Hall vihje tühjas sisestusväljas on tekst ja sellele kehtib 1.4.3. Helehall nagu #9ca3af valgel jõuab ainult 2,53 : 1-ni. Kohatäide ei asenda ka nähtavat silti.
• Hiirega üleliikumise ja fookuse olekud. Tekst, mis ilmub või muutub hiirega üleliikumisel või klaviatuurifookuses, peab täitma samu väärtusi. Üleliikumise efekt ei tohi vähendada juhtelemendi kontrasti ega nõrgendada fookuse tähist. Ise kujundatud fookuse tähis vajab kõrvaloleva tausta suhtes 3 : 1.
• Valge tekst erksatel brändivärvidel. Oranžid, kollased, helerohelised või türkiissinised valge tekstiga nupud kukuvad sageli läbi: valge #ff6600 peal jõuab 2,93 : 1-ni.
• Kahvatud äärised ja ikoonid. Kui ääris on ainus, mis näitab, kus sisestusväli on, vajab see 3 : 1: #cccccc valgel on 1,60 : 1. Ka ikoonid, mis kannavad tähendust ilma tekstita, näiteks rippmenüü nool või sulgemisikoon, vajavad 3 : 1.
• Ainult ühe teema kontrollimine. Kui sinu saidil on tume režiim, kontrolli selle värvipaare eraldi. Värv, mis töötab valgel, võib tumedal taustal läbi kukkuda.

Paranda brändipaletti brändi kaotamata

1. 1Pane kirja iga värv koos selle rolliga: tekst, taust, rõhuvärv või nupp, ääris. Paljud probleemid algavad siis, kui üks värv teeb kõiki töid.
2. 2Hoia brändivärvi seal, kus reegleid on lihtsam täita või need ei kehti: logos, suurtel pindadel, kaunistuseks ja suurte pealkirjade jaoks.
3. 3Teksti ja väikeste elementide jaoks kasuta sama tooni tumedamat või heledamat varianti. Kui muutub ainult heledus, jääb värv äratuntavaks: valge tekst #c74f00 peal, mis on tumedam oranž, jõuab 4,61 : 1-ni.
4. 4Või muuda hoopis tekstivärvi. Tume tekst erksal brändivärvil töötab sageli paremini kui valge: #1a1a1a #ff6600 peal jõuab 5,92 : 1-ni.
5. 5Määra teisese teksti jaoks üks hall, mis nõuded täidab, näiteks #767676 valgel, ja kasuta seda kõikjal mitme kahvatu halli asemel.
6. 6Kontrolli iga olekut: tavaline, üleliikumine, fookus, viga ja tume režiim. Salvesta lõplikud värvid oma stiililehes muutujatena, et keegi ei valiks enam käsitsi kahvatut värvi.

Kontrolli oma värve Do4U-ga

Värvikontrasti kontroll arvutab need väärtused sinu enda värvide jaoks. Sisesta oma värvid, üks rea kohta, ja anna igaühele roll: tekst, taust, rõhuvärv (näiteks nupp) või ääris. Kood kontrollib iga mõistlikku paari AA ja AAA järgi tavalise ja suure teksti jaoks ning 3 : 1 järgi äriste, ikoonide ja nupupindade jaoks, ilma üles ümardamata. Iga läbikukkunud paari jaoks saad lähima värvi, mis nõuded täidab, korra tumedama ja korra heledama, samas toonis. Do4U koostab ka kohandatud paleti, kontrollib selle tervikuna uuesti ja ekspordib selle CSS-i kohandatud omadustena, SCSS-ina või JSON-ina. Kõik töötab koodis, ilma TI-ta, ja kontroll on tasuta.

Kontroll teab ainult värvipaare, mille sisestad. See ei näe kirja suurusi, pilte teksti taga, läbipaistvust ega üleliikumise ja fookuse olekuid, seega testi ka valmis lehti. Do4U koostab mustandi, sina kontrollid ja otsustad.