WCAG-värikontrasti suunnittelijoille

Jos tekstisi ei täytä WCAG AA -kontrastia, arviolta 285 miljoonaa näkövammaista ihmistä ei voi lukea sitä. Lisäksi olet yhä epävakaammalla 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. Suurella tekstillä (24px+ normaali tai 18px+ lihavoitu) on alempi raja 3:1.

AAA-tason vaatimukset: 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), missä L1 on vaaleampi väri.

Sinun ei tarvitse tehdä matematiikkaa — käytä ilmaista kontrastitarkistustyökaluamme syöttääksesi mitkä tahansa kaksi väriä ja nähdäksesi suhteen.

Yleiset epäonnistumistapaukset

• 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 todellinen ympäröivä tausta.
• Brändivärit, jotka näyttävät hyvältä — ne usein epäonnistuvat. Lisää luonnonvalkoinen tausta tai tummenna tekstiä.

Esteettömien väriparin valinta

Kolme luotettavaa mallia:

1. Tumma vaalealla — #1f2937 #fff:llä = 14:1 (täydellinen).
2. Valkoinen tummalla — #fff #1f2937:llä = 14:1 (täydellinen).
3. 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). Tarkistustyökalu käsittelee molemmat.

Taustakuvat, jotka eivät taistele widgettiesi kanssa

Jos olet suunnittelija, joka asettaa taustakuvia kello-widgetien ja ilmoitusten taakse, valitse taustakuvia, joiden kontrasti on alle 5:1 widget-alueilla. Gaussian blur -työkalumme voi pehmentää kiireisiä alueita missä tahansa taustakuvassa paremman widget-luettavuuden saavuttamiseksi.

Kokeile ilmaisia työkalujamme

Useimmat näistä oppaista yhdistyvät käytännön työkaluun, jota voit käyttää heti — ensimmäinen käyttökerta ei vaadi rekisteröitymistä:

• Kuvan koon muuttaja — pikselitarkka pienennys + suurennus.
• Muunna WebP:ksi — 30-50% pienemmät tiedostot kuin JPG.
• Taustan poistaja — yhden klikkauksen leikkaus, läpinäkyvä PNG.
• Favicon-generaattori — jokainen selaimen koko yhdestä lähteestä.
• Some-kuvan koon muuttaja — jokaisen alustan tarkat mitat.
• Joukkokäsittely — käytä mitä tahansa työkalua jopa 200 kuvaan kerralla.

Selaa koko työkaluluetteloa.