Värikontrastin tarkistus – riittääkö teksti- ja taustavärin kontrasti WCAG:n mukaan?
Anna tekstin ja taustan värit, niin näet kontrastisuhteen ja sen, riittääkö se tavalliseen tekstiin, isoon tekstiin ja käyttöliittymän osiin. Esimerkiksi harmaa #767676 valkoisella on 4,54:1 ja riittää, mutta #777777 on 4,47:1 eikä riitä.
Tarkistus käyttää WCAG 2.2:n kaavaa ja rajoja: tavallinen teksti 4,5:1 (AA) tai 7:1 (AAA), iso teksti 3:1 tai 4,5:1 sekä painikkeet, kuvakkeet ja kaaviot 3:1. Suhde näytetään alaspäin pyöristettynä, joten 4,49:1 ei näy koskaan 4,5:nä. Jos pari ei riitä, työkalu ehdottaa lähintä läpäisevää sävyä muuttamalla vain valoisuutta: #999999 valkoisella (2,84:1) muuttuu sävyksi #767676.
Mitä laki vaatii värikontrastista?
Suomessa digipalvelulaki velvoittaa sen piiriin kuuluvat verkkopalvelut täyttämään WCAG 2.1:n A- ja AA-tason kriteerit (Traficom, saavutettavuusvaatimukset.fi). Kontrastin osalta se tarkoittaa 4,5:1 tavalliselle ja 3:1 isolle tekstille sekä 3:1 käyttöliittymän osille. Iso teksti on vähintään 24 px tai lihavoituna noin 18,7 px. Rajat ovat samat WCAG 2.1:ssä ja 2.2:ssa.
Ladataan työkalua...
Luvut on laskettu työkalun omalla koodilla ja pyöristetty alaspäin.
Etkö tiedä mihin ryhtyä seuraavaksi? Selaa kaikki työkalut
Hae työkalua →Värikontrastin tarkistus laskee kahden värin kontrastisuhteen ja vertaa sitä WCAG 2.2:n rajoihin.
Syötä teksti- ja taustaväri HEX-, rgb()- tai hsl()-muodossa tai valitse ne värinvalitsimella.
- Kontrastisuhde 1:1–21:1 ja viisi WCAG-tarkistusta (1.4.3, 1.4.6 ja 1.4.11).
- Esikatselu isolla, tavallisella ja pienellä tekstillä sekä painikkeella.
- Lähin läpäisevä sävy tekstille tai taustalle tavoitteella AA 4,5:1, AAA 7:1 tai iso 3:1.
Vihreä merkki tarkoittaa, että raja ylittyy.
- 4,5:1 on tavallisen tekstin vähimmäistaso (AA), 7:1 tiukin (AAA).
- Iso teksti (vähintään 24 px, lihavoituna noin 18,7 px) pärjää 3:1:llä.
- Kaikkiin sävyihin ei löydy läpäisevää paria: esimerkiksi taustalla #3B82F6 mustakin teksti jää 5,7:1:een, joten AAA vaatii taustan muuttamista.
Kontrasti on vain yksi saavutettavuuden osa.
- Logot ja pelkkä koristeteksti on vapautettu kontrastivaatimuksesta.
- Läpinäkyviä värejä ei lasketa: käytä lopullista, peittävää väriä.
- Lähteet: W3C, WCAG 2.2 (1.4.3, 1.4.6, 1.4.11 ja määritelmät); Traficom, saavutettavuusvaatimukset.fi (WCAG 2.1 – lain vaatimukset).