Miten tarkistan, läpäisevätkö teksti- ja taustavärini WCAG-kriteerit?

Kirjoita heksakoodit kenttiin Tekstin väri ja Taustaväri tai käytä värinvalitsimia. Kontrastisuhde näkyy tuloksella Läpäisty tai Hylätty AA- ja AAA-tasoille tavalliselle ja suurelle tekstille sekä käyttöliittymäkomponenteille.

Minkä kontrastisuhteen WCAG AA vaatii?

AA vaatii tavalliselle tekstille 4,5:1 ja suurelle tekstille 3:1. AAA vaatii tavalliselle tekstille 7:1 ja suurelle tekstille 4,5:1. Käyttöliittymäkomponentit ja graafiset kohteet vaativat 3:1.

Mikä lasketaan suureksi tekstiksi?

Työkalu käsittelee 18 pt (24 px) normaalin tekstin tai 14 pt (18,66 px) lihavoidun tekstin suurena. Pienemmän tekstin on täytettävä korkeammat normaalitekstin raja-arvot.

Värini eivät läpäise AA:ta. Miten korjaan ne?

Käytä yhden napsautuksen Korjaa tekstin väri- tai Korjaa tausta -ehdotuksia. Ne säätävät vaaleutta säilyttäen saman sävyn, kunnes pari saavuttaa suhteen 4,5:1.

Mitkä värimuodot se hyväksyy, ja voinko poimia värin näytöltä?

Se hyväksyy 3- ja 6-numeroiset heksa-arvot, kuten #abc tai #1e293b. Painike Poimi väri näytöltä näkyy selaimissa, jotka tukevat EyeDropper API:a, kuten Chromiumissa.

Onko se todella ilmainen?

Kyllä. Jokainen työkalu on ilmainen, eikä vaadi tiliä tai luottokorttia. Työ tehdään laitteellasi palvelimiemme sijaan, minkä ansiosta se pysyy maksuttomana.

Toimiiko se mobiililla?

Kyllä. Se toimii nykyaikaisissa mobiiliselaimissa iOS:llä ja Androidilla, eikä mitään tarvitse asentaa.

🌓

WCAG-värikontrastin tarkistaja ilmaiseksi

Tarkista täyttävätkö kaksi väriä WCAG AA- ja AAA-kontrastistandardit saavutettavuuden osalta. Reaaliaikainen esikatselu useilla tekstikoilla automaattisilla ehdotuksilla kun kontrasti on liian matala.

Toimii selaimessasiEi rekisteröitymistä, ei ponnahdusikkunoitaEi kirjautumista tarvitaIlmainen ikuisesti

Toimii offline-tilassa kerran ladattuna

Tekstin väri

Taustaväri

Suuri otsikkoteksti

Keskikokoinen leipäteksti (18px) lukemiseen ja sisältöön.

Normaali leipäteksti (16px) kappaleisiin.

Pieni teksti (14px) kuvateksteille ja metatiedoille.

14,63:1

Kontrastisuhde

✓WCAG AA — Normaali teksti

Vaatii 4.5:1 · Sinulla on 14,63:1

✓WCAG AA — Suuri teksti

Vaatii 3.0:1 · Sinulla on 14,63:1

✓WCAG AAA — Normaali teksti

Vaatii 7.0:1 · Sinulla on 14,63:1

✓WCAG AAA — Suuri teksti

Vaatii 4.5:1 · Sinulla on 14,63:1

✓UI-komponentit / graafiset objektit

Vaatii 3.0:1 · Sinulla on 14,63:1

Pikaesiasetukset

Perustuu WCAG 2.1 -kontrastiohjeisiin. Suuri teksti = 18pt (24px) normaali tai 14pt (18,66px) lihavoitu. HEX-koodit päivittyvät molempiin suuntiin: kirjoita HEX tai valitse väri, molemmat kentät pysyvät synkronoituina.

Yleiset käyttötavat

Tarkista verkkosivut WCAG-vaatimuksilleTarkista, että verkkosivustosi tekstin värit täyttävät WCAG AA- tai AAA-kontrastistandardit saavutettavuuden kannalta.
Tarkista brändin värin yhdistelmätTestaa brändien väripalettiyhdistelmiä saavutettavissa olevan UI-suunnittelun kannalta.
Testaa tumman tilan väripalettejaVaalea teksti tummilla taustoilla voi silti epäonnistua kontrastissa - tarkista tumman tilan paletit täällä.
Väri-yhdistelmät tulostusmateriaalilleJulisteet, kyltit ja tulostusmateriaalit vaativat myös luettavaa kontrastia - erityisesti vanhemmille lukijoille.
Suunnittele Saavutettavia PainikkeenvärejäVarmista, että CTA:t, toimintopainikkeet ja linkit läpäisevät WCAG niiden taustavärejä vastaan.

Miten se toimii

Kontrastin tarkistus tapahtuu kokonaan selaimessasi WCAG 2.1 -suhteellisen luminanssin algoritmilla — ei kirjastoa, ei palvelinta, vain käsin kirjoitettua matematiikkaa, joka noudattaa spesifikaatiota tarkasti. Jokainen tulos päivittyy reaaliajassa kirjoittaessasi tai valitessasi väriä.

1
Heksasyöte ja normalisointi
Sekä 3-numeroiset (#abc) että 6-numeroiset (#aabbcc) heksa-arvot hyväksytään ja normalisoidaan täysiksi RGB-kolmikoiksi. Virheellinen syöte hylätään välittömästi sen sijaan, että se hiljaisesti oletusarvoistuisi mustaksi, joten punainen reunus ilmestyy harhaanjohtavan läpäisytuloksen sijaan.
2
WCAG-luminanssilaskenta
Jokainen väri muunnetaan suhteelliseksi luminanssiksi WCAG 2.1 -kaavalla: sRGB-kanavien arvot linearisoidaan paloittaisella gammakorjauksella (jaettuna 12,92:lla alle 0,03928:n, korotettuna potenssiin 2,4 sen yläpuolella), ja painotetaan sitten muodossa 0,2126R + 0,7152G + 0,0722B.
3
Kontrastisuhde ja vaatimustenmukaisuustarkistukset
Kontrastisuhde lasketaan muodossa (vaaleampi + 0,05) / (tummempi + 0,05) ja tarkistetaan kaikkia viittä WCAG-kynnysarvoa vasten: AA tavallinen teksti (4,5:1), AA suuri teksti (3:1), AAA tavallinen teksti (7:1), AAA suuri teksti (4,5:1), ja käyttöliittymäkomponentit (3:1). Tulokset päivittyvät jokaisella näppäilyllä.
4
Sävyn säilyttävät korjausehdotukset
Kun pari epäonnistuu WCAG AA -vaatimuksessa, työkalu etsii HSL-vaaleusavaruudesta — astuen ulospäin alkuperäisestä vaaleudesta molempiin suuntiin — löytääkseen kummankin värin lähimmän muunnelman, joka läpäisee 4,5:1-suhteen säilyttäen saman sävyn ja kylläisyyden. EyeDropper-rajapinta (Chromium) on myös saatavilla minkä tahansa värin näytteistämiseen suoraan näytöltäsi.

Liittyvät työkalut

👁️

Värisokeussimulaattori

Katso miltä suunnittelusi näyttää henkilöille, joilla on värinäön puutteita. Simuloi protanopian, deuteranopian, tritanopian, akromaatopian ja lievempien poikkeamien.

Kokeile sitäTiedostot pysyvät paikallisina

📐

Mikä on näytön resoluutioni

Näe näyttösi resoluutio CSS- ja todellisina pikseleinä, ikkunan koko, pikselisuhde, värisyvyys, HDR, kosketustuki ja virkistystaajuus, ja kopioi kaikki.

Kokeile sitä

🖥️

Kuolleiden pikselien testi

Tarkista näytöltäsi kuolleet tai jumittuneet pikselit koko näytön mustalla, valkoisella, punaisella, vihreällä, sinisellä ja harmaalla sekä valinnaisella jumittuneen pikselin korjaajalla.