WCAG-värikontrasti suunnittelijoille
4.5:1-sääntö, kontrastisuhteen matematiikka ja ilmaiset työkalut minkä tahansa väriparin tarkistamiseen.
Jos tekstisi ei täytä WCAG AA -kontrastia, arviolta 285 miljoonaa näkövammaista henkilöä ei voi lukea sitä. Lisäksi olet yhä hatarammalla juridisella pohjalla EU:ssa ja Yhdysvalloissa. Hyvä uutinen: sääntö on yksinkertainen.
4.5:1-sääntö
Leipätekstin kontrastisuhteen tulee olla vähintään 4.5:1 taustaansa vasten läpäistäkseen WCAG AA -tason. Suurella tekstillä (24px+ normaali tai 18px+ lihavoitu) on matalampi raja 3:1.
AAA-tasolle: 7:1 leipätekstille, 4.5:1 suurelle tekstille.
Miten kontrastisuhde lasketaan
WCAG käyttää suhteellista luminanssia — muunna jokainen väri luminanssiarvoksi (0 = musta, 1 = valkoinen) tietyllä kaavalla, laske sitten (L1 + 0,05) / (L2 + 0,05), jossa L1 on vaaleampi väri.
Sinun ei tarvitse tehdä matematiikkaa — käytä ilmaista kontrastin tarkistinta syöttääksesi mitkä tahansa kaksi väriä ja nähdäksesi suhteen.
Yleisiä epäonnistumistapauksia
- Vaaleanharmaa valkoisella — #999 #fff:llä = 2,85 (epäonnistuu). #767676 #fff:llä = 4,54 (läpäisee).
- Valkoinen keltaisella — epäonnistuu lähes aina. Käytä tummaa tekstiä keltaisella.
- Värikkäät linkit leipätekstissä — useimmat siniset linkit läpäisevät valkoisella mutta epäonnistuvat vaaleanharmaalla. Testaa todellista ympäröivää taustaa.
- Brändivärit jotka näyttävät hyvältä — ne usein epäonnistuvat. Lisää luonnonvalkoinen tausta tai tummenna tekstiä.
Esteettömien väriparivalintojen tekeminen
Kolme luotettavaa mallia:
- Tumma vaalealla — #1f2937 #fff:llä = 14:1 (täydellinen).
- Valkoinen tummalla — #fff #1f2937:llä = 14:1 (täydellinen).
- Tumma korostevärillä — #1f2937 #fbbf24:llä = 9:1 (täydellinen painikkeille).
Tekstin ulkopuolella
WCAG 2.1 vaatii myös 3:1 ei-tekstielementeille (painikkeet, fokusrenkaat, lomakkeiden reunat). Tarkistin käsittelee molemmat.
Taustakuvat jotka eivät taistele widgetejäsi vastaan
Jos olet suunnittelija joka asettaa taustakuvia kellowidgetien ja ilmoitusten taakse, valitse taustakuvia joiden kontrasti on alle 5:1 widget-alueilla. Gaussian blur -työkalumme voi pehmentää vilkkaita alueita missä tahansa taustakuvassa widgetien luettavuuden parantamiseksi.
Kokeile ilmaisia työkalujamme
Useimmat näistä oppaista toimivat yhdessä käytännön työkalun kanssa, jota voit käyttää heti — ei vaadi rekisteröitymistä ensimmäisellä kerralla:
- Kuvan koon muuttaja — pikselintarkka pienennys ja suurennus.
- Muunna WebP:ksi — 30-50% pienempiä tiedostoja kuin JPG.
- Taustan poistaja — yhden napsautuksen leikkaus, läpinäkyvä PNG.
- Favicon-generaattori — kaikki selainkoot yhdestä lähteestä.
- Some-kuvan koon muuttaja — jokaisen alustan tarkat mitat.
- Eräkäsittely — käytä mitä tahansa työkalua jopa 200 kuvaan kerralla.
Selaa koko työkalukatalogia.
