Kuinka auditoida värikontrasti asentamatta mitään

Värikontrastin auditointeja käsitellään usein saavutettavuuden erityistehtävänä: avataan suunnittelutiedosto, asennetaan lisäosa, viedään kuvakaappauksia, ajetaan raportti ja väitellään brändiväreistä. Se voi olla hyödyllistä, mutta useimpien tiimien ei kannata aloittaa siitä.

Tuotantosivustolla nopein luotettava auditointi tehdään yleensä selaimessa, joka sinulla on jo auki. Nykyaikaiset selaimen DevTools-työkalut voivat tarkastaa laskettuja värejä, näyttää kontrastisuhteita, paljastaa tilatyylejä ja auttaa testaamaan hankalia tapauksia, joita automaattiset raportit eivät huomaa.

Tässä oppaassa oletetaan, ettet asenna mitään. Ei selainlaajennuksia. Ei suunnittelulisäosia. Ei maksullista auditointipakettia. Vain sivu, selain ja yksinkertainen menetelmä.

Kontrastisäännöt, joita todella tarvitset

Useimmissa verkkotöissä WCAG-kontrasti tiivistyy muutamaan kynnysarvoon:

• Normaali teksti: vähintään 4.5:1 kontrasti taustaa vasten.
• Suuri teksti: vähintään 3:1. WCAG määrittelee tämän karkeasti 24 CSS-pikseliksi tai noin 18,66 CSS-pikseliksi, jos teksti on lihavoitu.
• Käyttöliittymäkomponentit ja graafiset objektit: vähintään 3:1 merkityksellisille rajoille, kuvakkeille, tiloille ja kaavioiden osille, joita tarvitaan käyttöliittymän ymmärtämiseen.
• Parannettu kontrasti: 7:1 normaalille tekstille ja 4.5:1 suurelle tekstille, jos tavoittelet perustasoa pidemmälle.

Poikkeuksia on, kuten passiiviset kontrollit, koristeelliset elementit ja logot. Käytä näitä poikkeuksia säästeliäästi. “Se on osa brändiä” ei ole poikkeus; se on suunnittelurajoite.

Muista myös, että kontrasti on vain yksi osa saavutettavaa värien käyttöä. Jos punaisella virhetilalla on riittävä kontrasti mutta ei tekstiä, kuvaketunnistetta tai ohjelmallista ilmaisua, se voi silti epäonnistua käyttäjillä, jotka eivät erota punaista lähellä olevista väreistä.

Aloita renderöidystä sivusta, älä suunnittelutiedostosta

Suunnittelutiedostot ovat hyödyllisiä, mutta ne eivät sisällä kaikkia todellisen maailman muuttujia: CSS-ylikirjoituksia, läpinäkyvyyttä, hover-tiloja, selaimen fonttien renderöintiä, käyttäjän zoomausta, tummaa tilaa, perittyjä tyylejä, CMS-sisältöä ja markkinointiupotuksia.

Auditoi sivu sellaisena kuin käyttäjät sen saavat.

Avaa sivu ajantasaisessa työpöytäselaimessa. Chrome, Edge, Firefox ja Safari tarjoavat kaikki hyödyllisiä tarkastustyökaluja. Tarkat nimikkeet vaihtelevat, mutta työnkulku on sama:

1. Napsauta tekstiä tai käyttöliittymäelementtiä hiiren oikealla painikkeella.
2. Valitse Inspect.
3. Etsi lasketut color- ja background-color-arvot.
4. Lue kontrastisuhde selaimen värinäytteestä tai saavutettavuuspaneelista.
5. Kirjaa läpäisy, epäonnistuminen ja epävarmuus.

Chromium-pohjaisissa selaimissa värivalitsin näyttää usein kontrastisuhteen ja WCAG:n läpäisy-/hylkäysohjeistuksen tekstille. Firefox DevTools tuo myös esiin saavutettavuustietoja ja värityökaluja. Safarin Web Inspector voi näyttää lasketut tyylit ja saavutettavuustietoja, vaikka työnkulku on hieman erilainen.

Ratkaisevaa ei ole tietty selain. Ratkaisevaa on lukea laskettu lopputulos, ei arvoa, jota jonkun mielestä komponentti käyttää.

Rakenna ensin pieni auditointilista

Älä tarkasta satunnaisia tekstejä siihen asti, kunnes väsyt. Tee lyhyt inventaario malleista:

• Leipäteksti sivun päätaustalla.
• Hillitty teksti, kuvatekstit, metatiedot ja placeholder-tekstit.
• Linkit normaalissa, hover-, visited- ja focus-tilassa.
• Ensisijaiset, toissijaiset ja destruktiiviset painikkeet.
• Lomakkeiden otsikot, ohjetekstit, virheet ja onnistumisviestit.
• Navigaatiokohteet, murupolut ja välilehdet.
• Kortit, merkit, pillerit ja tagit.
• Kuvakkeet, jotka välittävät merkitystä.
• Kaaviot, kartat, edistymispalkit ja tilavärit.
• Teksti kuvien, videon, liukuvärien tai läpikuultavien peittojen päällä.

Tämä riittää löytämään useimmat tyypillisen sivuston puutteet. Se pitää auditoinnin myös sidottuna komponentteihin, ei yksittäisiin pikseleihin.

Jos auditointiisi kuuluu painikkeita, yhdistä kontrastitarkistus perusasioihin saavutettavien verkkopainikkeiden tarkistuslistassamme. Painikkeiden kontrastiongelmat esiintyvät usein puuttuvien fokus-tilojen, epäselvien nimilappujen tai rikkinäisen näppäimistökäytön vieressä.

Tarkasta tekstikontrasti DevTools-työkaluissa

Tavalliselle tekstille yhtenäisellä taustalla selain voi yleensä laskea kontrastin puolestasi.

Tarkasta elementti ja etsi color-ominaisuus. Avaa värivalitsin värinäytteestä. Jos selain pystyy määrittämään taustan, se näyttää kontrastisuhteen. Jotkin työkalut piirtävät värivalitsimeen myös viivan, joka näyttää, missä väri läpäisisi 3:1-, 4.5:1- tai 7:1-tason.

Kun selain raportoi epäonnistumisen, usko sitä, kunnes voit todistaa toisin. Kun se raportoi läpäisyn, käytä silti harkintaa. Pieni ohut kirjasin, heikkolaatuiset näytöt, voimakas anti-aliasointi ja levottomat taustat voivat saada teknisesti läpäisevän tekstin tuntumaan heikolta.

Käytännön sääntö: jos leipäteksti juuri ja juuri läpäisee arvolla 4.55:1, älä juhli. Anna sille enemmän liikkumavaraa. Kontrastivaatimukset ovat minimejä, eivät ihannetavoitteita.

Typografialla on myös merkitystä. Suurempi ja selkeämpi typografiajärjestelmä vähentää kuormitusta jo ennen kuin alat säätää värejä. Jos sivu tuntuu vaikealta lukea kontrastin läpäisystä huolimatta, tarkastele rivinpituutta, kokoa, painoa ja välistystä laajemmasta luettavuusnäkökulmasta, kuten tässä käytännön oppaassa luettavaan typografiaan.

Tarkista todellinen tausta, myös läpinäkyvyys

Monet kontrastivirheet tapahtuvat, koska näkyvä tausta ei ole ilmoitettu tausta.

Yleisiä ansoja ovat:

• Teksti puoliläpinäkyvän kortin sisällä.
• Teksti vanhemmassa elementissä, johon on käytetty opacity-arvoa.
• Peitot, jotka käyttävät rgba()- tai color-mix()-arvoja.
• Liukuvärit otsikoiden takana.
• Taustakuvat, jotka vaihtelevat tekstialueen poikki.
• Teemamuuttujat, jotka muuttuvat tummassa tilassa.

Jos DevTools ei pysty laskemaan kontrastia luotettavasti, tunnista renderöidyt etu- ja taustavärit käsin. Käytä laskettujen tyylien paneelia, poista tasoja väliaikaisesti käytöstä tai poimi näkyvä väri sisäänrakennetulla värivalitsimella, jos selaimesi tukee sitä.

Kuvien päällä olevan tekstin kohdalla älä poimi kuvan miellyttävintä kohtaa. Poimi pahin uskottava alue tekstin takaa. Jos kuva muuttuu CMS-latausten, karusellien tai responsiivisten rajauksien kautta, kyse ei ole vakaasta kontrastijärjestelmästä. Lisää luotettava peitto, tekstivarjo, yhtenäinen säiliö tai liukuvärikäsittely, joka suojaa tekstiä kuvasta riippumatta.

Hyvä kuvapeittojärjestelmä on tylsä: sama peiton voimakkuus, ennustettava rajausalue, riittävä kontrasti myös kirkkailla valokuvilla. Tylsyys on hyvä. Käyttäjät yrittävät lukea.

Älä unohda tiloja

Staattiset kuvakaappaukset ohittavat monia kontrastipuutteita. Auditoi vuorovaikutustilat suoraan selaimessa.

Pakota DevTools-työkaluissa pseudoluokkia, kuten:

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

Tarkasta sitten lasketut värit uudelleen.

Fokusindikaattorit ansaitsevat erityistä huomiota. WCAG 2.2 vahvisti odotuksia fokuksen ulkoasulle, ja vaaleansininen reunus vaaleanharmaalla kortilla on edelleen yleinen epäonnistuminen. Fokusindikaattorilla on oltava riittävä kontrasti viereisiä värejä vasten ja riittävä pinta-ala, jotta se huomataan.

Pois käytöstä oleville kontrolleille WCAG:n kontrastisäännöissä on poikkeus passiivisille komponenteille. Se ei tarkoita, että pois käytöstä olevien kontrollien pitäisi oletuksena olla lukukelvottomia. Jos disabled-tila välittää hyödyllistä tietoa, tee siitä luettava. Jos ei, harkitse, pitäisikö sen olla lainkaan näkyvissä.

Käytä Lighthousea, mutta älä ulkoista harkintaa sille

Selaimen auditoinnit, kuten Lighthouse, voivat löytää joitakin kontrastipuutteita nopeasti. Aja sisäänrakennettu auditointi, jos selaimesi tarjoaa sen, ja käsittele tuloksia lähtökohtana.

Automaattiset tarkistukset löytävät hyvin tekstisolmuja, joissa on ilmeisiä laskettuja kontrastipuutteita. Ne ovat heikompia seuraavissa:

• Kuviin upotettu teksti.
• Canvas-renderöidyt nimilaput.
• SVG:n reunatapaukset.
• Vain hover-tilassa ilmenevät puutteet.
• Fokusindikaattorin laatu.
• Kaaviot, joissa värisuhteet kantavat merkitystä.
• Komponentit, jotka ovat kirjautumisen, valikoiden tai lomakevaiheiden takana.

Jos raportti palaa vihreänä, sinun on silti tarkastettava edustavat komponentit. Jos raportti palaa punaisena, vältä paniikkia ja priorisoi puutteet käyttäjävaikutuksen mukaan. Sama periaate pätee suorituskyky- ja saavutettavuusraportteihin yleisesti: lue työkalun tulos todisteena, ei tuomiona. Käytämme tätä ajattelutapaa oppaassamme Lighthouse-raportin lukemiseen panikoimatta, ja se sopii tähänkin suoraan.

Auditoi myös ei-tekstimuotoinen kontrasti

Teksti saa suurimman huomion, mutta WCAG kattaa myös ei-tekstimuotoisen sisällön, jota tarvitaan käyttöliittymän ymmärtämiseen tai käyttämiseen.

Tarkista vähintään nämä tapaukset:

• Syötekenttien reunat sivun taustaa vasten.
• Valintaruutujen ja radiopainikkeiden ääriviivat.
• Kytkimien tilat.
• Pelkät kuvakepainikkeet.
• Virhekuvakkeet ja varoitussymbolit.
• Kaavioiden viivat, palkit ja nimilaput.
• Edistymisilmaisimet.
• Valitun välilehden tai aktiivisen navigaatiokohteen ilmaisimet.

Tavoite on yleensä 3:1 viereisiä värejä vasten. Esimerkiksi vaaleanharmaa syötekentän reuna valkoisella taustalla voi olla lähes näkymätön. Viidellä pastellisävyisellä viivalla tehty kaavio voi näyttää elegantilta ja olla silti käyttökelvoton.

Kaavioissa kontrasti ei yksin riitä. Käytä nimilappuja, kuvioita, viivatyylejä, suoria annotaatioita tai välistystä, jotta tieto ei riipu pelkästään väristä. Tämä auttaa värisokeita käyttäjiä, heikkonäköisiä käyttäjiä, häikäisyssä katsovia ihmisiä ja ketä tahansa, joka lukee kuvakaappausta dokumentissa.

Kirjaa löydökset muodossa, jota kehittäjät voivat käyttää

Hyödyllinen kontrastiauditointi ei sano “jotkin harmaat epäonnistuvat.” Se tunnistaa komponentin, tilan, nykyiset arvot, odotetun kynnysarvon ja ehdotetun korjauksen.

Tiivis formaatti toimii hyvin:

| Komponentti | Tila | Etuala | Tausta | Suhde | Tavoite | Tulos | Ehdotettu korjaus | |---|---:|---:|---:|---:|---:|---|---| | Kortin metatiedot | Oletus | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Hylätty | Käytä --color-text-muted-strong | | Ensisijainen painike | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Läpäisty | Säilytä | | Syötekentän reuna | Oletus | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Hylätty | Tummenna reunatokenia |

Sido korjaukset design tokeneihin, jos sivustolla on niitä. Älä paikkaa kahtakymmentä yksittäistä komponenttia, jos yksi heikko token on todellinen ongelma.

Tee korjauksista hieman minimiä vahvempia

Kontrastipuutteet on usein helppo korjata huonosti. Tiimit säätävät väriä, kunnes tarkistin sanoo 4.51:1, ja jatkavat eteenpäin. Se ei jätä marginaalia fonttien renderöinnille, läpinäkyvyydelle, selaineroille, teemoitukselle, kuvien vaihtelulle tai tuleville brändimuutoksille.

Suosi mukavia tavoitteita:

• Leipäteksti: lähemmäs 7:1, kun se on käytännöllistä.
• Hillitty teksti: edelleen yli 4.5:1, jos se on todellista sisältöä.
• Käyttöliittymän reunat ja kuvakkeet: selvästi yli 3:1.
• Teksti kuvien päällä: käytä hallittua peittoa kuvan mukaan arvailun sijaan.

Verkkoa katsotaan halvoilla kannettavilla, himmeillä puhelimilla, kirkkailla jalkakäytävillä, sävytetyillä näytöillä ja ikääntyvillä näytöillä. Minimitason noudattaminen ei ole sama asia kuin mukava lukeminen.

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

💡 Kokeile tätä: Kun tarkistat DevToolsista poimimiasi kontrastipareja, Color Converter auttaa muuntamaan hex-, RGB- ja HSL-arvojen välillä, jotta arvot täsmäävät auditointimuistiinpanoihisi.

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

Asennukseton kontrastiauditoinnin tarkistuslista

Käytä tätä järjestystä, kun tarvitset nopean mutta uskottavan auditoinnin:

1. Avaa tuotantosivu nykyaikaisessa selaimessa.
2. Listaa tärkeimmät teksti-, käyttöliittymä- ja tilamallit.
3. Tarkasta lasketut etu- ja taustavärit DevTools-työkaluissa.
4. Lue kontrasti sisäänrakennetulla värivalitsimella tai saavutettavuuspaneelilla.
5. Pakota hover-, focus-, active-, visited- ja invalid-tilat.
6. Tarkista kuvien ja liukuvärien päällä oleva teksti pahinta uskottavaa taustaa vasten.
7. Tarkista ei-tekstimuotoiset käyttöliittymän osat 3:1-vaatimusta vasten.
8. Aja sisäänrakennettu automaattinen auditointi turvaverkkona, ei koko auditointina.
9. Kirjaa puutteet komponentin ja tokenin mukaan.
10. Korjaa marginaalilla, älä juuri ja juuri kynnyksen ylittäen.

Tämä riittää löytämään suurimman osan kontrastiongelmista lisäämättä työkalupakkiin vielä yhtä työkalua. Edistyneemmillä auditoinneilla on silti paikkansa, erityisesti suurissa design-järjestelmissä, säännellyissä tuotteissa tai monimutkaisessa datavisualisoinnissa. Mutta monille verkkosivustoille selain antaa jo tarvitsemasi todisteet. Vaikea osa on olla riittävän järjestelmällinen niiden käyttämiseen.