Siirry sisältöön

Värikontrastin tarkistus

Verkko ja kehittäjät

Onko tämä teksti luettavaa tällä taustalla?

Tarkista tekstin WCAG-kontrasti taustaa vasten, näe mitkä tasot täyttyvät ja saa lähellä oleva väri, joka läpäisee.

Kontrastisuhde

4,54:1

4/5 tarkistusta läpäisty.

Suuren tekstin esimerkki

Nopea ruskea kettu hyppää laiskan koiran yli.

WCAG 2.2 -tarkistukset

  • Tavallinen teksti, taso AA OK

    Menestyskriteeri 1.4.3: vaatii vähintään 4,5:1.

  • Suuri teksti, taso AA OK

    Menestyskriteeri 1.4.3: vaatii vähintään 3:1.

  • Tavallinen teksti, taso AAA Ongelma

    Menestyskriteeri 1.4.6: vaatii vähintään 7:1.

  • Suuri teksti, taso AAA OK

    Menestyskriteeri 1.4.6: vaatii vähintään 4,5:1.

  • Kuvakkeet ja ohjaimet, taso AA OK

    Menestyskriteeri 1.4.11: vaatii vähintään 3:1.

Lähin tekstiväri, joka läpäisee

Taso AAA, tavallinen teksti (7:1)
#595959

Sponsoroidut linkit

Tarkista tekstin WCAG-kontrasti taustaa vasten, näe mitkä tasot täyttyvät ja saa lähellä oleva väri, joka läpäisee.

Käyttöohje

  1. Anna tekstin ja taustan väri missä tahansa CSS-muodossa tai valitse väri napauttamalla värilaattaa. Vaihtopainike vaihtaa ne keskenään.
  2. Lue kontrastisuhde ja tarkistuslista: tavallinen teksti, suuri teksti sekä kuvakkeet ja ohjaimet, tasoilla AA ja AAA.
  3. Jos tarkistus ei mene läpi, kopioi lähin tekstiväri, joka läpäisee. Se säilyttää värisävyn ja muuttaa vain vaaleutta.

Harmaa teksti valkoisella taustalla

Tekstin väri (HEX)Kontrastisuhde
#00000021:1
#5959597:1
#7676764,54:1
#7777774,47:1
#9999992,84:1

Sponsoroidut linkit

Näin se toimii

Web Content Accessibility Guidelines (WCAG 2.2) arvioi, kuinka hyvin teksti erottuu taustastaan, kontrastisuhteella, joka vaihtelee 1:1:stä (ei eroa) 21:1:een (musta valkoisella). Taso AA vaatii tavalliselle tekstille vähintään 4,5:1 ja suurelle tekstille 3:1; suuri teksti on vähintään 18 pisteen kokoista tai vähintään 14 pisteen lihavoitua (menestyskriteeri 1.4.3). Taso AAA vaatii 7:1 ja 4,5:1 (1.4.6). Kuvakkeiden, lomakkeiden reunojen ja muiden nähtävien osien on täytettävä 3:1 (1.4.11).

Suhde on (L1 + 0,05) ÷ (L2 + 0,05), jossa L1 on vaaleamman ja L2 tummemman värin suhteellinen luminanssi. Suhteellinen luminanssi on 0,2126 R + 0,7152 G + 0,0722 B linearisoiduista punaisen, vihreän ja sinisen arvoista. Esimerkiksi #767676 valkoisella: L = 0,181 vastaan 1, joten (1 + 0,05) ÷ (0,181 + 0,05) on 4,54:1. Suhde katkaistaan, ei pyöristetä ylös: 4,499 ei täytä vaatimusta 4,5.

Läpinäkyvä tekstiväri asetetaan ensin taustan päälle ja läpinäkyvä tausta valkoisen päälle. Ehdotettu väri säilyttää tekstivärisi värisävyn ja kylläisyyden ja muuttaa vain vaaleutta (OKLCH:ssa) lähimpään läpäisevään arvoon, joten se näyttää yhä sinun väriltäsi. Kontrasti on vain osa luettavuutta: myös kirjasin, koko ja paksuus ratkaisevat, eikä suhde kerro värisokeille lukijoille vaaleutta enempää.

Usein kysyttyä

Mikä on suuri teksti WCAG:ssa?

Vähintään 18 pisteen (24 px) kokoinen teksti tai vähintään 14 pisteen (noin 18,7 px) lihavoitu teksti. Se tarvitsee vähemmän kontrastia, koska isommat kirjaimet on helpompi lukea.

Mitä tasoa kannattaa tavoitella?

Taso AA on tavallinen lainsäädännön ja suunnittelun tavoite. Taso AAA on tiukempi eikä aina mahdollinen koko sivustolla, mutta sitä kannattaa käyttää pitkissä luettavissa teksteissä.

Riippuuko suhde siitä, kumpi väri on teksti?

Ei. Suhde on sama, vaikka värit vaihtaisi keskenään. Vain esimerkki ja ehdotettu korvaava väri muuttuvat, koska ehdotus säätää tekstin väriä.

Tekeekö kontrastitestin läpäisy sivustani saavutettavan?

Ei. Se tarkistaa vain värikontrastin. Näppäimistökäyttö, tekstivastineet ja muut saavutettavuusvaatimukset ovat edelleen tärkeitä.

Miksi hieman alle 4,5 oleva suhde ei täytä tavallisen tekstin AA-tasoa?

Raja on 4,5:1 ilman ylöspäin pyöristämistä. Näytettävä suhde katkaistaan kahteen desimaaliin, jotta hylätty arvo ei näyttäisi hyväksytyltä.

Seuraavaksi saatat tarvita

Lisää kategoriasta Verkko ja kehittäjät

Kaikki 18 työkalua kategoriassa Verkko ja kehittäjät

Suosittua nyt

Sponsoroidut linkit

Sponsoroidut linkit