Kontrastintarkistus – WCAG-kontrastisuhde
Syötä etuala- ja taustaväri tarkistaaksesi kontrastisuhteen ja nähdäksesi, täyttääkö väriyhdistelmäsi WCAG AA- ja AAA-saavutettavuusstandardit.
Syötä kaksi väriä kontrastin tarkistamiseksi
Tukee HEX-, RGB-, HSL- ja OKLCH-muotoja
Kokeile esimerkkiä
Tarkista värikontrasti saavutettavuutta varten
Värikontrasti on ratkaisevaa luettavuuden kannalta. Kun etualan tekstillä ei ole riittävää kontrastia taustaansa vasten, siitä tulee vaikealukuista — erityisesti heikkonäköisille tai värinäön puutteista kärsiville käyttäjille.
Tämä kontrastintarkistustyökalu laskee kontrastisuhteen kahden minkä tahansa värin välillä ja arvioi sen WCAG 2.1 -onnistumiskriteerien mukaan. Syötä värejä HEX-, RGB- tai HSL-muodossa ja saat välittömiä tuloksia.
WCAG-kontrastitasojen ymmärtäminen
Verkkosisällön saavutettavuusohjeet (WCAG) määrittelevät vähimmäiskontrastisuhteet tekstin luettavuudelle. Tasoja on kaksi:
- WCAG AA Normaali teksti — vaatii kontrastisuhteen vähintään 4,5:1
- WCAG AA Suuri teksti — vaatii kontrastisuhteen vähintään 3:1 (suuri teksti on 18pt+ tai 14pt+ lihavoitu)
- WCAG AAA Normaali teksti — vaatii kontrastisuhteen vähintään 7:1
- WCAG AAA Suuri teksti — vaatii kontrastisuhteen vähintään 4,5:1
AA on vakiotaso, johon useimmat verkkosivustot ja sovellukset pyrkivät. AAA on parannettu taso, jota suositellaan silloin, kun maksimaalinen luettavuus on tärkeää.
Kontrastintarkistuksen käyttöohjeet
- Syötä etualan (tekstin) väri — HEX, RGB tai HSL
- Syötä taustaväri missä tahansa tuetussa muodossa
- Näe kontrastisuhde ja reaaliaikainen esikatselu tekstistä kyseisellä taustalla
- Tarkista hyväksytty/hylätty-tulokset WCAG AA- ja AAA-tasoille
- Käytä vaihda-painiketta kääntääksesi etuala- ja taustavärit nopeasti
Milloin värikontrasti kannattaa tarkistaa
- Valitessasi teksti- ja taustavärejä verkkosivustolle tai sovellukselle
- Varmistaessasi, että suunnittelujärjestelmä täyttää saavutettavuusvaatimukset
- Testatessasi painike-, linkki- tai kuvakevärejä taustaansa vasten
- Tarkistaessasi tumman tilan väriyhdistelmiä
- Täyttäessäsi lailliset saavutettavuusstandardit (ADA, EAA, Section 508)
Tarkka, välitön ja ilmainen
Tämä työkalu laskee WCAG 2.1 -kontrastisuhteen käyttäen standardia suhteellisen luminanssin kaavaa. Tulokset lasketaan välittömästi selaimessasi — mitään tietoja ei lähetetä millekään palvelimelle.
Tarvitsetko löytää tai muuntaa värin ensin? Käytä Värivalitsinta poimiaksesi värejä kuvasta, tai Värimuunninta muuntaaksesi HEX-, RGB- ja HSL-muotojen välillä.
Usein kysytyt kysymykset
- Mikä on hyvä kontrastisuhde tekstille?
- Normaalikokoiselle leipätekstille vaaditaan vähintään 4,5:1 kontrastisuhde WCAG AA:n täyttämiseksi. Suurelle tekstille (18pt tai 14pt lihavoitu ja suurempi) minimi on 3:1. Korkeimmalle saavutettavuustasolle (WCAG AAA) normaali teksti tarvitsee vähintään 7:1.
- Mikä on ero WCAG AA:n ja AAA:n välillä?
- AA on vakiotaso, jonka useimpien verkkosivustojen ja sovellusten tulisi täyttää. AAA on parannettu taso tiukemmilla kontrastivaatimuksilla, suositeltava sisällölle, jossa maksimaalinen luettavuus on kriittistä, kuten viranomaisten tai terveydenhuollon verkkosivustoilla.
- Mikä lasketaan suureksi tekstiksi WCAG:ssa?
- Suuri teksti määritellään tekstiksi, jonka koko on 18 pistettä (24px) tai suurempi normaalipainolla, tai 14 pistettä (noin 18,66px) tai suurempi lihavoituna. Suurella tekstillä on alhaisemmat kontrastivaatimukset, koska sen koko tekee siitä luonnostaan helpommin luettavaa.
- Mitä värimuotoja tämä tarkistus tukee?
- Voit syöttää värejä HEX-muodossa (esim. #1E293B), RGB-muodossa (esim. rgb(30, 41, 59)) tai HSL-muodossa (esim. hsl(222, 33%, 17%)). Työkalu tunnistaa muodon automaattisesti.
- Miten kontrastisuhde lasketaan?
- Kontrastisuhde lasketaan WCAG 2.1 -kaavalla: (L1 + 0,05) / (L2 + 0,05), jossa L1 on vaaleamman värin suhteellinen luminanssi ja L2 on tummemman värin suhteellinen luminanssi. Tulos vaihtelee välillä 1:1 (ei kontrastia) – 21:1 (maksimaalinen kontrasti, musta valkoisella).
- Toimiiko tämä työkalu mobiilissa?
- Kyllä. Kontrastintarkistus toimii kaikilla laitteilla, joissa on moderni selain — tietokone, tabletti tai puhelin.
- Onko tämä työkalu ilmainen?
- Kyllä. ColourPicker.app on täysin ilmainen, eikä rekisteröitymistä vaadita.
- Voinko tarkistaa kontrastin käyttöliittymäkomponenteille, en pelkästään tekstille?
- WCAG 2.1 vaatii myös vähintään 3:1 kontrastisuhteen merkityksellisille käyttöliittymäkomponenteille ja graafisille objekteille (onnistumiskriteeri 1.4.11). Voit käyttää tätä tarkistusta myös näiden yhdistelmien vahvistamiseen — suhdelaskenta on sama.