Ilmainen työkalu: Saavutettavuus

Värikontrastin tarkistus

Vertaa tekstin väriä taustaväriin WCAG 2.2:ta vasten suoraan tässä tai syötä sivun osoite, niin löydät jokaisen vähimmäiskontrastin alittavan tekstin, sen mitatut värit ja lähimmän läpäisevän värin.

Kontrastilaskuri

Syötä tekstin väri ja taustaväri. Kaikki lasketaan selaimessasi.

16 pikselin normaali teksti näyttää tältä.

24 pikselin suuri teksti

Painikkeen reunaviiva

Kontrastisuhde4.54:1

Näiden värien WCAG 2.2 -tulokset
Normaali teksti, AAWCAG 1.4.3, vaatii 4.5:1Läpäisee
Suuri teksti, AAWCAG 1.4.3, vaatii 3:1Läpäisee
Normaali teksti, AAAWCAG 1.4.6, vaatii 7:1Ei läpäise
Suuri teksti, AAAWCAG 1.4.6, vaatii 4.5:1Läpäisee
Kuvakkeet, reunat ja lomakekentätWCAG 1.4.11, vaatii 3:1Läpäisee

Lähimmät tekstivärit, jotka läpäisevät tällä taustalla

Suuri teksti tarkoittaa vähintään 24 pikseliä tai lihavoituna 18,66 pikseliä. Suhteet pyöristetään alaspäin, joten 4.499:1 näkyy muodossa 4.49:1 eikä läpäise, kuten WCAG on tarkoittanut.

Tai etsi sivulta heikkokontrastinen teksti skannaamalla

Ilmainen. Tarkistaa antamasi osoitteen noin 20 sekunnissa.

Mitä tämä työkalu tarkistaa

  • Minkä tahansa kahden värin WCAG-suhde

    Laskuri käyttää WCAG 2.2:n määritelmien suhteellisen luminanssin kaavaa ja näyttää tuloksen normaalille tekstille, suurelle tekstille ja käyttöliittymän osille AA- ja AAA-tasolla. Se toimii selaimessasi.

  • Laskettu läpäisevä väri

    Kun väripari ei läpäise, laskuri etsii samaa sävyä olevan lähimmän tekstivärin, joka yltää suhteeseen 4.5:1 tai 7:1, jotta muutat ulkoasuasi mahdollisimman vähän.

  • Sivun kaikki heikkokontrastinen teksti

    Sivuskannaus ajaa axe-coren color-contrast-säännön oikeassa Chrome-selaimessa ja listaa jokaisen hylätyn elementin tekstivärin, taustavärin, fonttikoon ja kontrastisuhteen kanssa.

  • Ryhmiteltynä väripareittain

    Virheet ryhmitellään tekstin ja taustan värin mukaan, koska yksi muutos teeman väriin korjaa yleensä kaikki elementit, jotka käyttävät sitä.

  • Oikea raja-arvo suurelle tekstille

    Vähintään 24 pikselin tai lihavoituna 18,66 pikselin teksti tarvitsee suhteen 3:1 eikä 4.5:1. Skannaus soveltaa jokaiseen elementtiin oikeaa raja-arvoa sen lasketun koon ja painon perusteella.

  • Mitä se ei voinut mitata, ja miksi

    Kuvien, liukuvärien tai päällekkäisten elementtien päällä oleva teksti listataan erikseen syineen, joten tiedät tarkalleen, mitä on tarkistettava silmämääräisesti.

Mitä se ei voi tarkistaa

  • Mitata valokuvien, liukuvärien tai videon päällä olevaa tekstiä. Ohjelmisto ei voi tietää, mikä osa kuvasta on kunkin kirjaimen takana, joten nämä listataan sinulle tarkistettaviksi.
  • Tarkistaa hover-, fokus- tai muita tiloja. Skannaus näkee sivun sellaisena kuin se latautuu; tarkista näiden tilojen värit laskurilla.
  • Skannata sivun kuvakkeita, reunoja ja lomakekenttiä WCAG 1.4.11:n mukaan. Laskuri näyttää 3:1-tuloksen mille tahansa syöttämällesi väriparille.
  • Lukea tekstiä, joka on osa kuvaa, kuten banneria, jonka sanat on upotettu itse kuvaan.
  • Testata muuta kuin syöttämääsi sivua. Täysi ilmainen skannaus testaa enintään viisi keskeistä sivua.

Miksi sillä on merkitystä

Heikko kontrasti on verkon yleisin saavutettavuusvirhe. WebAIMin vuoden 2026 analyysi miljoonan suosituimman sivuston etusivuista löysi heikkokontrastista tekstiä 83,9 prosentilta niistä, keskimäärin 34 tapausta sivua kohden.

Haalea teksti on vaikealukuista heikkonäköisille ja ihmisille, joilla on värinäön poikkeama, sekä kenelle tahansa, joka käyttää puhelinta kirkkaassa auringonvalossa. WCAG 2.2:n AA-tason onnistumiskriteeri 1.4.3 asettaa vähimmäisrajaksi 4.5:1 normaalille tekstille ja 3:1 suurelle tekstille.

Se on myös yksi halvimmin korjattavista ongelmista: useimmilla sivustoilla kourallinen teeman värejä aiheuttaa lähes kaikki virheet, ja niiden muuttaminen korjaa kaikki sivut kerralla.

Miten tuloksia luetaan

Kontrastisuhde
Arvosta 1:1 (sama väri kahdesti) arvoon 21:1 (musta valkoisella). Suhteet pyöristetään alaspäin, joten pari, jonka suhteeksi näytetään 4.49:1, ei täytä vähimmäisrajaa 4.5:1.
Normaali teksti, AA (4.5:1)
Leipätekstin, linkkien, nimiöiden ja painiketekstin vähimmäisraja WCAG 1.4.3:n mukaan.
Suuri teksti, AA (3:1)
Vähintään 24 pikselin tai lihavoituna 18,66 pikselin tekstille. WCAG määrittelee suureksi tekstiksi 18 pisteen tai lihavoituna 14 pisteen tekstin.
AAA (7:1 ja 4.5:1)
WCAG 1.4.6:n tehostettu taso. Sitä ei tarvita AA-tason vaatimustenmukaisuuteen, mutta se auttaa useampia lukijoita.
Kuvakkeet, reunat ja lomakekentät (3:1)
WCAG 1.4.11 edellyttää suhdetta 3:1 viereisiin väreihin niille säädinten ja grafiikan osille, jotka ihmisten on nähtävä voidakseen käyttää niitä.
Hylätty teksti
Jokainen elementti, jonka skannaus mittasi raja-arvon alle, valitsimineen, väreineen, kokoineen ja suhteineen. Avaa elementti nähdäksesi sen merkintäkoodin ja, jos saatavilla, kuvakaappauksen.
Tarkistettava silmämääräisesti
Teksti, jota axe-core ei pystynyt mittaamaan, syineen, esimerkiksi tekstin takana oleva kuva tai liukuväri.

Miten yleisimmät ongelmat korjataan

  • Harmaa teksti valkoisella

    #767676 on suunnilleen vaalein harmaa, joka yltää valkoisella taustalla suhteeseen 4.5:1 (4.54:1). Vaaleammat harmaat, kuten #999999 (2.84:1), ovat yleinen virheiden syy alatunnisteissa, kuvateksteissä, paikkamerkkiteksteissä ja hinnoissa.

  • Valkoinen teksti brändivärisessä painikkeessa

    Jos valkoinen teksti brändivärilläsi ei läpäise, tummenna painikkeen taustaa muutaman askeleen tai käytä tummaa tekstiä. Tarkista myös hover- ja fokusvärit, koska ne ovat usein vaaleampia.

  • Lomakkeiden paikkamerkkiteksti

    Paikkamerkkiteksti on myös tekstiä ja tarvitsee suhteen 4.5:1. Vielä parempi on käyttää kentän yläpuolella näkyvää nimiötä, jotta paikkamerkki ei ole ainoa ohje.

  • Teksti kuvien ja karusellien päällä

    Sijoita teksti peittävälle tai osittain läpikuultavalle taustalle tai lisää kuvaan tumma kerros, ja tarkista sitten kuvan vaalein kohta tekstin takana.

  • Alennusmerkit ja pienellä painettu teksti

    Käytöstä poistettujen säädinten teksti on vapautettu kriteeristä 1.4.3, mutta alennusmerkit, hinnat ja juridinen pienellä painettu teksti eivät ole. Ne ovat usein verkkokaupan sivujen haaleinta tekstiä.

Heikko värikontrasti: miksi sillä on merkitystä ja miten se korjataan Shopifyssa, WooCommercessa ja millä tahansa sivustolla

Kysymyksiä tästä työkalusta

Mitä kontrastisuhdetta WCAG edellyttää?

AA-tasolla 4.5:1 normaalille tekstille ja 3:1 suurelle tekstille (onnistumiskriteeri 1.4.3) sekä 3:1 käyttöliittymän komponenteille ja merkityksellisille grafiikoille (1.4.11). AAA-taso edellyttää suhteita 7:1 ja 4.5:1 (1.4.6).

Mikä lasketaan suureksi tekstiksi?

WCAG määrittelee suureksi tekstiksi vähintään 18 pisteen tai lihavoituna 14 pisteen tekstin. CSS-pikseleinä se on noin 24 px tai lihavoituna 18,66 px.

Pitääkö logojen täyttää vähimmäiskontrasti?

Ei. WCAG 1.4.3 vapauttaa vaatimuksesta logot ja tekstin, joka on osa logoa tai tuotenimeä, sekä pelkästään koristeellisen tekstin ja passiivisten säädinten tekstin.

Miksi skannaus listaa kuvan päällä olevan tekstin tarkistettavaksi?

axe-core mittaa tasaisia värejä. Kun tekstin takana on kuva, liukuväri tai toinen elementti, se ei voi tietää, mitkä värit kohtaavat, joten se raportoi elementin ihmisen tarkistettavaksi sen sijaan, että arvaisi.

Tarvitsenko AAA-tason kontrastin?

AAA-tasoa ei vaadita AA-tason vaatimustenmukaisuuteen, eikä W3C suosittele AAA-tason vaatimista kokonaisilta sivustoilta. Leipätekstin suhde 7:1 on silti hyvä käytäntö, jos ulkoasusi sen sallii.

Onko APCA osa WCAG:tä?

Ei. APCA on toinen kontrastin laskentatapa, jota on käsitelty WCAG 3:a varten, ja WCAG 3 on yhä luonnos. Vaatimustenmukaisuus mitataan nykyään WCAG 2:n kontrastisuhteella, jonka tämä työkalu laskee.

Lähteet

Aiheeseen liittyvät työkalut

Saavutettavuusraportti ($174, kertamaksu) jatkaa täydestä ilmaisesta skannauksesta ja lisää sivuja, jokaisen havainnon vaatiman muutoksen, PDF-tiedoston ja uusintatestit korjaustesi varmistamiseen.

Lue lisää: Saavutettavuusraportti