Ilmainen muunnin

Värikontrasti Checker (WCAG)

Tarkista kahden värin kontrastisuhde WCAG AA:n ja AAA:n saavutettavuuden noudattamiseksi. Ilmainen, välitön ja toimii kokonaan selaimessasi.

Esimerkkiteksti — Normaali koko

Esimerkki pieni teksti - 14px

Kontrastisuhde:21.00:1
WCAG AANormaali tekstiPass
WCAG AASuuri tekstiPass
WCAG AAANormaali tekstiPass
WCAG AAASuuri tekstiPass

Tietoa tästä työkalusta

Tarkista etualan tekstin ja taustavärien värien kontrastisuhteet WCAG 2.1:n esteettömyysohjeiden mukaisesti. Syötä värit heksadesimaalikoodeina, RGB-arvoina tai HSL-arvoina ja näet heti kontrastisuhteen sekä WCAG AA- ja AAA-yhteensopivuustulokset sekä normaalilla että suurella tekstikoolla.

Käyttöohjeet

  1. Syötä tai valitse etualan (teksti) väri käyttämällä värivalitsinta tai heksadesyötettä.
  2. Anna tai valitse taustaväri.
  3. Tarkastele kontrastisuhdetta ja WCAG 2.1 AA/AAA -hyväksyttyjä/hylättyjä tuloksia välittömästi.
  4. Säädä värejä, kunnes saavutat halutun yhteensopivuustason.

Usein kysytyt kysymykset

Mikä kontrastisuhde vaaditaan WCAG-yhteensopivuuteen?
WCAG AA vaatii 4,5:1 normaalille tekstille ja 3:1 suurelle tekstille (18 pt+ tai 14 pt+ lihavoitu). WCAG AAA vaatii 7:1 normaalille tekstille ja 4,5:1 suurelle tekstille. Suurin mahdollinen suhde on 21:1 (musta valkoisella).
Miksi värien kontrastilla on väliä?
Riittävä kontrasti varmistaa, että teksti on luettavissa heikosti näköisille, värisokeille tai käyttäjille, jotka katselevat näyttöä kirkkaassa auringonvalossa. Se on myös lakisääteinen vaatimus ADA:n ja EU:n saavutettavuusmääräysten mukaisesti monille verkkosivustoille.
Mitä pidetään "suurena tekstinä" WCAG:ssa?
Suuri teksti määritellään 18 pt (24 pikseliä) tai enemmän normaalipainoiselle tai 14 pt (18,66 pikseliä) tai enemmän lihavoidulle tekstille. Suurella tekstillä on alhaisemmat kontrastivaatimukset, koska se on luonnostaan ​​helpompi lukea.
Tarkistaako tämä työkalu muiden kuin tekstielementtien kontrastin?
WCAG 2.1 vaatii 3:1 kontrastisuhteen käyttöliittymäkomponenteille ja graafisille objekteille (painikkeet, kuvakkeet, lomakekentät). Voit käyttää tätä työkalua myös niiden tarkistamiseen - syötä vain komponenttien ja taustavärit.