Värvikontrast: WCAG suhtarvud, kontrollimine ja parandused

Helehall tekst valgel taustal näeb kujundusfailis puhas välja. Telefonis eredas päikesevalguses või vaegnägijale on seda raske lugeda. See on ka kõige levinum ligipääsetavusviga üldse: WebAIM Million 2026 (avaneb uuel vahelehel) leidis madala kontrastiga teksti 83,9%-lt miljonist populaarseimast avalehest, keskmiselt 34 eri juhtu lehe kohta.

Hea uudis on see, et kontrasti saab mõõta, lävendid on selged ja parandused enamasti odavad. See juhend annab teile numbrid, tasuta tööriistad ja viisi parandada brändivärve ilma kõike otsast alustamata.

Mis on värvide kontrastisuhe?

Kontrastisuhe on arv, mis võrdleb kahe värvi, tavaliselt teksti ja selle tausta, suhtelist heledust ehk luminantsi. WCAG arvutab selle kindla valemiga ja tulemus jääb vahemikku 1:1 (erinevust pole, valge valgel) kuni 21:1 (must valgel). Mida suurem arv, seda lihtsam on kahte värvi eristada.

Valem on (L1 + 0,05) / (L2 + 0,05), kus L1 on heledama värvi ja L2 tumedama värvi suhteline luminants. Käsitsi ei pea te seda kunagi arvutama, kuid üks detail on oluline: arvesse läheb ainult luminants, mitte värvitoon. Seepärast võib punane tekst rohelisel taustal näida erk ja saada siiski kehva tulemuse.

Teine detail, mis jääb sageli märkamata, on ümardamine. W3C selgitusdokument kriteeriumi 1.4.3 kohta (avaneb uuel vahelehel) ütleb, et arvutatud väärtusi „ei tohiks ümardada (nt 4,499:1 ei vasta lävendile 4,5:1)“. Nii läbib hall #767676 valgel (4,54:1), kuid #777777 valgel (4,48:1) mitte, kuigi silmaga ei suudaks neid keegi eristada.

Millist kontrastisuhet WCAG nõuab?

Tasemel AA, millele viitab enamik seadusi ja lepinguid, peab tavalise teksti kontrast taustaga olema vähemalt 4,5:1 ja suure teksti oma 3:1 (edukriteerium 1.4.3). Kasutajaliidese komponendid ja tähendust kandev graafika vajavad kõrvalasuvate värvide suhtes 3:1 (1.4.11). Rangem tase AAA nõuab tavalise teksti puhul 7:1 ja suure teksti puhul 4,5:1 (1.4.6).

Miks just 4,5:1? W3C selgitab, et see „kompenseerib kontrastitundlikkuse kadu, mida kogevad tavaliselt kasutajad, kelle nägemiskaotus vastab ligikaudu nägemisteravusele 20/40“ (Euroopas tavapärases kümnendsüsteemis umbes 0,5). Teisisõnu on see seatud mõõdukalt nõrgenenud nägemisega inimestele, sealhulgas paljudele eakamatele klientidele, kes ei nimetaks end kunagi puudega inimeseks.

Osale tekstile kehtib erand: logod ja kaubamärgid, puhtalt dekoratiivne tekst, tekst, mis pole kellelegi nähtav, tekst pildil, millel on palju muud olulist visuaalset sisu, ning tekst passiivsetel (keelatud) juhtelementidel. Teie logo võib jääda selliseks, nagu see on. Lõik, mis on kirjutatud teie logo kahvatus värvis, mitte.

Mida loetakse suureks tekstiks?

WCAG-s tähendab suur tekst vähemalt 18 punkti või paksus kirjas vähemalt 14 punkti. W3C teisendab need ligikaudu 24 CSS-piksliks ja paksus kirjas 18,5 piksliks. Kõik väiksem vajab täit 4,5:1 suhet. Põhitekst, pildiallkirjad, vormisildid, hinnad ja jaluse lingid ei ole peaaegu kunagi suur tekst, nii et need vajavad kõrgemat suhet.

Nii see praktikas välja näeb. Hall #949494 valgel annab tulemuseks 3,03:1. See sobib 28-pikslisele pealkirjale, kuid samas värvis 16-piksline lõik ei vasta nõudele. Paljud saidid läbivad kontrolli pealkirjade osas ja kukuvad läbi kõige selle osas, mis jääb nende alla.

Õhukesed ja dekoratiivsed fondid vajavad lisatähelepanu. W3C märgib, et silumise (anti-aliasing) tõttu võivad „eriti õhukesi või ebatavalisi fonte kasutajaagendid kuvada palju kahvatuma värviga“, kui te valisite. Kui teie brändifont on kerge kaaluga, jätke endale 4,5:1 kohal varu, selle asemel et sihtida täpselt 4,51-le.

Kas kontrastinõue kehtib ka nuppudele, ikoonidele, fookuse indikaatoritele ja diagrammidele?

Jah. Edukriteeriumi 1.4.11 (tase AA) järgi vajab kõik, mida inimesed peavad nägema juhtelemendi, selle oleku või graafika tuvastamiseks, kõrvalasuvate värvide suhtes kontrasti 3:1. See hõlmab vormiväljade ääriseid, tekstisildita ikoone, fookuse piirjooni, märkeruutude ja lülitite olekuid ning diagrammide jooni ja sektoreid. Nupu sees olev tekst vajab ikkagi 4,5:1.

• Vormiväljad: helehall #CCCCCC ääris valgel annab 1,61:1. Kui see nõrk joon on ainus asi, mis näitab, kuhu kirjutada, ei vasta see nõudele.
• Nupud: WCAG ei nõua igale nupule nähtavat äärist. W3C selgitusdokument kriteeriumi 1.4.11 kohta (avaneb uuel vahelehel) ütleb, et piirjoont on vaja ainult siis, kui juhtelementi ei saa muul visuaalsel viisil tuvastada. Kui nupp on äratuntav ainult värvilise kujundi järgi, vajab see kujund lehe suhtes kontrasti 3:1.
• Ikoonid: otsingu luup, soovinimekirja süda või ostukorvi ikoon ilma kõrvalasuva tekstita vajab 3:1.
• Fookuse indikaatorid: piirjoon, mis näitab klaviatuurifookust, peab olema kontrastne ümbritseva taustaga. Meie WCAG 2.2 juhend käsitleb uuemaid fookusekriteeriume.
• Diagrammid: joondiagrammi jooned ja sektordiagrammi sektorid vajavad 3:1, kui samu väärtusi ei näidata ka tekstina.
• Keelatud juhtelementidele kehtib erand, kuigi inimesed peavad ikkagi aru saama, kas nuppu saab vajutada.

Jooksva teksti sees olevad lingid on erijuhtum. Kui neid eristab ainult värv ja allajoonimist pole, nõuab W3C tehnika G183 (avaneb uuel vahelehel) lingi värvi ja ümbritseva teksti vahel suhet 3:1, kusjuures mõlemal peab tausta suhtes olema ikkagi 4,5:1. Kolme värvi leidmine, mis kõik need tingimused täidavad, on keeruline. Allajoonimine on palju lihtsam.

Kuidas värvikontrasti kontrollida?

Kasutage konkreetsete värvipaaride jaoks tasuta kontrastikontrollijat, töötavate lehtede jaoks brauseri arendajatööriistu ja kogu saidi probleemkohtade leidmiseks automaatset skannimist. Seejärel kontrollige silmaga seda, mis tööriistadel kahe silma vahele jääb: tekst fotode ja üleminekute peal, kursori ja fookuse olekud, kohatäitetekst ja veateated. Enamik sellest võtab lehemalli kohta mõne minuti.

• WebAIM Contrast Checker (avaneb uuel vahelehel): sisestage kaks kuueteistkümnendkoodi ja saate suhte koos hinnanguga tavalise teksti, suure teksti ja graafiliste objektide kohta. Selle heleduse liugur on kasulik lähima nõuetele vastava tooni leidmiseks.
• Colour Contrast Analyser (avaneb uuel vahelehel): Vispero tasuta lauarakendus Windowsile ja macOS-ile. Selle pipett võtab proovi ükskõik millisest ekraanipikslist, mis on kasulik piltide peal oleva teksti, PDF-ide ja rakenduste puhul, ning sellel on ka värvipimeduse simulaator.
• Chrome DevTools: uurige tekstilõiku ja avage värvivalija. Selle kontrastisuhte jaotis (avaneb uuel vahelehel) näitab AA- ja AAA-taseme jooni ning oskab soovitada nõuetele vastavat värvi. Paneel CSS Overview loetleb kõik lehe kontrastiprobleemid.
• Automaatkontrollijad: brauserilaiendused ja Lighthouse märgivad madala kontrastiga teksti kogu lehel, kuid piltide või üleminekute peal oleva teksti märgivad nad sageli käsitsi ülevaatamist vajavaks, selle asemel et seda hinnata.

Kus tööriistadest ei piisa, võtke proove käsitsi. Põhifoto peal oleva teksti puhul kontrollige pildi kõige heledamat kohta kõige heledamate tähtede taga; W3C loetleb ebapiisava kontrastiga taustapildid teadaoleva veana (F83). Viige kursor nuppudele, liikuge nendeni tabulaatoriga, tekitage vormiviga, lülituge tumedasse režiimi, kui seda pakute. Ka tume teema võib nõuetele mitte vastata: hall #757575 taustal #121212 annab 4,07:1. Meie juhend kuidas testida veebisaidi ligipääsetavust paigutab kontrasti teiste kiirete käsitsi kontrollide kõrvale.

Kuidas parandada madalat kontrasti ilma brändi muutmata?

Tavaliselt lisades oma brändivärvist tumedama tooni teksti ja väikeste elementide jaoks ning jättes originaali suurtele pealkirjadele, taustadele ja illustratsioonidele. Paljud brändivärvid ei vasta nõuetele ainult väikestes suurustes. Heledal brändivärvil valge teksti vahetamine tumeda vastu on sageli piisav ja enamik külastajaid märkab ainult seda, et lehte on lihtsam lugeda.

1. Looge igast brändivärvist tekstis kasutatav versioon, mille kontrast põhitaustadega on vähemalt 4,5:1, ja kasutage seda põhiteksti, linkide ja väikeste ikoonide jaoks.
2. Kasutage algset eredat värvi suurte pealkirjade (seal piisab 3:1-st), taustade, illustratsioonide ja kaunistuste jaoks.
3. Heledatel brändivärvidel vahetage nupu tekst valgest tumedaks.
4. Pange fotode peal oleva teksti taha ühtlane või poolläbipaistev paneel.
5. Kontrollige kõiki olekuid: kursori all, fookuses, külastatud, valitud, viga ja kohatäide.
6. Salvestage nõuetele vastavad paarid disainimuutujate (design tokens) või kujundusteema seadetena, et uued lehed need päriksid, mitte ei leiutaks neid uuesti.

Kujundus värvipimedatele: miks värvist üksi ei piisa

Kontrast ja värv on eri probleemid. Colour Blind Awareness (avaneb uuel vahelehel) andmetel on umbes igal 12. mehel ja igal 200. naisel värvinägemise häire, kõige sagedamini puna-rohelise eristamisel. WCAG 1.4.1 (avaneb uuel vahelehel) (tase A) ütleb, et värv ei tohi olla ainus visuaalne viis teavet edastada, nii et siduge see teksti, ikoonide, mustrite või allajoonimisega.

• Vormivead: ainult punane ääris ei vasta nõudele. Lisage välja kõrvale teade, näiteks „Sisestage postiindeks“, ideaalis koos ikooniga.
• Laoseis ja olek: roheline või punane täpp toote kõrval ei ütle paljudele ostjatele midagi. Kirjutage „Laos“ või „Välja müüdud“.
• Diagrammid: legendi, mis tugineb värvide sobitamisele, on raske lugeda. Märgistage jooned otse või kasutage mustreid ja eri joonestiile.
• Lingid: põhitekstis joonige need alla, eespool toodud põhjustel.

Et probleemi ise näha, saab Chrome'i DevTools jäljendada nägemishäireid ja ka Colour Contrast Analyseril on simulaator. Kontrast aitab ka siin: suhe mõõdab heledust, mitte värvitooni, nii et kaks tugeva suhtega värvi jäävad eristatavaks ka siis, kui nende toonid näivad sarnased. Lisateavet selle kohta, kuidas vaegnägijad ja teiste kahjustustega inimesed oma seadmeid seadistavad, leiate artiklist kuidas puuetega inimesed veebi kasutavad.

Kas kõrge kontrasti režiimidest ja kontrastilülititest piisab?

Ei. Operatsioonisüsteemi kontrastiteemad ja lehel olevad kontrastilülitid aitavad inimesi, kes teavad, et vajavad rohkem kontrasti, ja lülitavad selle sisse. WCAG hindab aga teie lehte vaikeolekus, nii et värvid, mida iga külastaja esimesena näeb, peavad ikkagi nõuetele vastama. Lüliti on lisavõimalus neile, kes tahavad rohkem, mitte parandus nõuetele mittevastavatele värvidele.

Osa puuetega inimesi kasutab Windowsi kontrastiteemasid, mis asendavad teie värvid nende omadega. Tasub testida oma saiti, kui selline teema on sisse lülitatud: taustapiltidest tehtud ikoonid võivad kaduda, nagu ka ainult varjuga (box-shadow) joonistatud fookuse stiilid. CSS-i meediapäring prefers-contrast laseb teil pakkuda kõrgema kontrastiga versiooni ka neile, kes on seda oma süsteemi seadetes palunud.

Meie enda vidinal on kontrasti kohandus ja värvipimeduse profiil ning mõni külastaja peab neid kasulikuks. Ütleksime teile siiski sama asja: kui teie põhitekst on #999999 valgel, muutke CSS-i. Vidin annab külastajale, kes tahab rohkem kontrasti, võimaluse seda saada. See ei muuda nõuetele mittevastavaid vaikeväärtusi vastavaks ja seda ütleb ka meie dokumentatsiooni WCAG teatmik.