Värikontrasti tekstille, painikkeille ja kuvakkeille

Miksi kontrastilla on väliä

Haalea teksti maksaa lukijoita. Heikkonäköiset, iäkkäät lukijat ja kaikki, jotka katsovat puhelinta kirkkaassa valossa, tarvitsevat selvän eron tekstin ja taustan välille. W3C:n Web Content Accessibility Guidelines (WCAG) asettaa siksi vähimmäisarvot tekstille, ohjaimille kuten painikkeille ja syöttökentille sekä kuvakkeille ja grafiikalle. Ne voi mitata ja tarkistaa ennen julkaisua.

Miten kontrastisuhde toimii

Kontrastisuhde vertaa kahden värin kirkkautta. WCAG ei katso sävyä vaan suhteellista luminanssia: arvoa väliltä 0 tummimmalle mustalle ja 1 vaaleimmalle valkoiselle. Kolme kanavaa, punainen, vihreä ja sininen, muunnetaan ja painotetaan: vihreä painaa eniten, punainen vähemmän ja sininen vähiten. Suhde on (L1 + 0,05) / (L2 + 0,05), jossa L1 on vaaleamman värin luminanssi. Tulos on välillä 1:1 kahdelle samalle värille ja 21:1 mustalle valkoisella.

Käytännössä kaksi W3C:n sääntöä on tärkeitä. Ensinnäkin arvoja ei pyöristetä: suhde 4,499:1 ei täytä rajaa 4,5:1. Toiseksi kontrasti mitataan sitä taustaa vasten, joka tekstille on asetettu. Jos sivu asettaa vain tekstin värin eikä taustaväriä, W3C pitää sitä virheenä, koska kävijän oletustaustaa ei tiedetä. Aseta aina molemmat värit yhdessä.

Kolme onnistumiskriteeriä

• 1.4.3 Contrast (Minimum), taso AA: teksti ja tekstiä sisältävät kuvat tarvitsevat vähintään 4,5:1, suuri teksti vähintään 3:1.
• 1.4.6 Contrast (Enhanced), taso AAA: teksti tarvitsee vähintään 7:1, suuri teksti vähintään 4,5:1. Se on tiukempi taso ja auttaa eniten pitkissä teksteissä.
• 1.4.11 Non-text Contrast, taso AA: vähintään 3:1 viereisiin väreihin nähden kaikelle, mikä on nähtävä ohjaimen ja sen tilan tunnistamiseksi (esimerkiksi syöttökentän reunus tai kohdistuksen ilmaisin), sekä grafiikan osille, joita tarvitaan sisällön ymmärtämiseen, kuten kuvakkeille tai kaavion viivoille.

Mikä on suurta tekstiä

Suuri teksti on vähintään 18 pistettä tai lihavoituna vähintään 14 pistettä. W3C muuntaa tämän noin 24 pikseliksi ja lihavoituna noin 18,5 pikseliksi. Suurella tekstillä kontrasti saa olla pienempi, koska kirjaimet ovat isompia ja niiden vedot leveämpiä. Ole varovainen ohuiden fonttien kanssa: W3C:n mukaan reunojen pehmennys voi saada ohuet tai epätavalliset fontit näyttämään haaleammilta kuin niiden määritelty väri. Se suosittelee paksumpia fontteja tai väriparia, joka ylittää vähimmäisarvon selvästi.

Minkä ei tarvitse läpäistä

• Passiiviset komponentit, kuten käytöstä poistettu painike.
• Pelkkä koristelu ja teksti, jota kukaan ei näe.
• Teksti, joka on osa logoa tai tuotenimeä.
• Satunnainen teksti kuvassa, jossa on muuta merkittävää sisältöä, kuten katukyltti valokuvassa.

Yleiset virheet

• Vaaleanharmaa valkoisella. Päivämäärien, kuvatekstien tai toissijaisen tekstin harmaa on usein liian haalea: #999999 valkoisella saavuttaa vain 2,84:1. Vaalein puhdas harmaa, joka läpäisee AA-tason tavalliselle tekstille valkoisella, on #767676 suhteella 4,54:1.
• Teksti kuvien päällä. Kontrasti muuttuu valokuvan jokaisessa kohdassa. W3C luettelee taustakuvat ilman riittävää kontrastia virheeksi (F83). Sijoita teksti yhtenäiselle alueelle, tummenna sen takana olevaa kuvaa tai sijoita teksti kuvan viereen. Tarkista tekstin takana oleva vaalein kohta.
• Paikkamerkkiteksti. Tyhjän syöttökentän harmaa vihje on tekstiä, ja siihen sovelletaan 1.4.3:a. Vaaleanharmaa kuten #9ca3af valkoisella saavuttaa vain 2,53:1. Paikkamerkki ei myöskään korvaa näkyvää selitettä.
• Hover- ja kohdistustilat. Tekstin, joka ilmestyy tai muuttuu, kun hiiri viedään päälle tai näppäimistö kohdistaa siihen, on täytettävä samat arvot. Hover-efekti ei saa heikentää ohjaimen kontrastia eikä kohdistuksen ilmaisinta. Itse suunnittelemasi kohdistuksen ilmaisin tarvitsee 3:1 viereiseen taustaan nähden.
• Valkoinen teksti kirkkailla brändiväreillä. Oranssit, keltaiset, vaaleanvihreät tai turkoosit painikkeet valkoisella tekstillä epäonnistuvat usein: valkoinen värillä #ff6600 saavuttaa 2,93:1.
• Haaleat reunukset ja kuvakkeet. Jos reunus on ainoa asia, joka näyttää syöttökentän paikan, se tarvitsee 3:1: #cccccc valkoisella on 1,60:1. Myös kuvakkeet, jotka välittävät merkityksen ilman tekstiä, kuten pudotusvalikon nuoli tai sulkemiskuvake, tarvitsevat 3:1.
• Vain yhden teeman tarkistaminen. Jos sivustollasi on tumma tila, tarkista sen värit erikseen. Väri, joka toimii valkoisella, voi epäonnistua tummalla taustalla.

Korjaa brändipaletti menettämättä brändiä

1. 1Kirjaa jokainen väri rooleineen: teksti, tausta, korostus tai painike, reunus. Monet ongelmat alkavat, kun yksi väri tekee kaikki tehtävät.
2. 2Pidä brändiväri siellä, missä säännöt on helpompi täyttää tai niitä ei sovelleta: logossa, suurilla alueilla, koristeena ja suurissa otsikoissa.
3. 3Käytä tekstille ja pienille elementeille saman sävyn tummempaa tai vaaleampaa vivahdetta. Jos vain vaaleus muuttuu, väri pysyy tunnistettavana: valkoinen teksti värillä #c74f00, tummempi oranssi, saavuttaa 4,61:1.
4. 4Tai vaihda sen sijaan tekstin väriä. Tumma teksti kirkkaalla brändivärillä toimii usein paremmin kuin valkoinen: #1a1a1a värillä #ff6600 saavuttaa 5,92:1.
5. 5Määritä toissijaiselle tekstille yksi läpäisevä harmaa, esimerkiksi #767676 valkoisella, ja käytä sitä kaikkialla useiden haaleiden harmaiden sijaan.
6. 6Tarkista jokainen tila: normaali, hover, kohdistus, virhe ja tumma tila. Tallenna lopulliset värit muuttujina tyylitiedostoosi, jottei kukaan enää valitse haaleaa väriä käsin.

Tarkista värisi Do4U:lla

Värikontrastin tarkistus laskee nämä arvot omille väreillesi. Syötät värisi, yhden riville, ja annat kullekin roolin: teksti, tausta, korostus (esimerkiksi painike) tai reunus. Koodi tarkistaa jokaisen järkevän parin AA- ja AAA-tasoa vasten tavalliselle ja suurelle tekstille sekä rajaa 3:1 vasten reunuksille, kuvakkeille ja painikealueille pyöristämättä ylöspäin. Jokaiselle epäonnistuvalle parille saat lähimmän läpäisevän värin, kerran tummempana ja kerran vaaleampana, samassa sävyssä. Do4U rakentaa myös säädetyn paletin, tarkistaa sen uudelleen kokonaisuutena ja vie sen CSS-mukautettuina ominaisuuksina, SCSS- tai JSON-muodossa. Kaikki toimii koodissa ilman tekoälyä, ja tarkistus on ilmainen.

Tarkistus tuntee vain syöttämäsi väriparit. Se ei näe fonttikokoja, tekstin takana olevia kuvia, läpinäkyvyyttä eikä hover- ja kohdistustiloja, joten testaa myös valmiit sivut. Do4U laatii luonnoksen, sinä tarkistat ja päätät.