Kontrastin tarkistaja (Contrast Checker) laskee WCAG 2.1 -kontrastisuhteen kahden värin välillä ja arvioi ne AA/AAA-kynnysarvojen perusteella sekä normaalille että suurelle tekstille. Reaaliaikainen esikatselu näyttää tekstin renderöitynä valituilla väreillä, ja "poimi sivun tausta" -painike ottaa näytteen nykyisestä sivusta.
Saavutettavuutta vaaditaan yhä enemmän — WCAG-vaatimustenmukaisuus on laillinen vaatimus monilla hallintoalueilla, ja jopa siellä missä ei, huono kontrasti karkottaa käyttäjiä. Kontrastin tarkistaja kertoo sinulle välittömästi, täyttävätkö mitkä tahansa kaksi väriä WCAG-standardit. Valitse edusta- ja taustaväri värivalitsimella tai liitä heksadesimaaliarvot; työkalu laskee kontrastisuhteen käyttämällä virallista WCAG:n luminanssikaavaa ja arvioi sen neljää kynnysarvoa vasten: AA normaali (≥4.5:1), AA suuri (≥3:1), AAA normaali (≥7:1) ja AAA suuri (≥4.5:1). Jokaisella kynnysarvolla näkyy selkeä Hyväksytty/Hylätty-merkki. Reaaliaikainen esikatselu renderöi suuren ja normaalin tekstin valituilla väreillä, jotta näet todellisen visuaalisen vaikutuksen. Kätevä painike poimii näytteen nykyisen sivun leipätekstin taustaväristä — hyödyllinen, kun tarkistat läpäiseekö väriyhdistelmä todellisella sivustolla. Kaikki toimii paikallisesti selaimessasi, ei tiedonsiirtoa palvelimelle.
Käyttää virallista WCAG:n luminanssikaavaa kontrastisuhteen laskemiseen. Tulos on tarkka ja vastaa kaikkia vaatimustenmukaisia saavutettavuuden tarkistajia.
Hyväksytty/Hylätty arvoille AA normaali (≥4.5:1), AA suuri (≥3:1), AAA normaali (≥7:1), AAA suuri (≥4.5:1) — kaikki näytettynä ruudukkona.
Renderöi todellisen suuren ja normaalin tekstin valitsemillasi väreillä, jotta näet visuaalisen vaikutuksen numeerisen suhteen rinnalla.
Yhden napsautuksen näyte nykyisen sivun lasketusta leipätekstin taustaväristä — hyödyllinen reaalimaailman yhdistelmien testaamiseen.
Kirjoita heksadesimaaliarvo tai käytä natiivia värivalitsinta. Arvot synkronoituvat molempiin suuntiin muokatessasi kumpaa tahansa.
Yhden napsautuksen vaihto kääntää edustan ja taustan — hyödyllinen tarkistettaessa käänteisiä teemoja tai leijumistiloja.
Ennen väripaletin viimeistelyä tarkista jokainen tekstin väri sen taustaa vasten varmistaaksesi WCAG AA -vaatimustenmukaisuuden — välttää uudelleentyön myöhemmin.
Käytä "poimi sivun tausta" reaaliaikaisella sivustolla, liitä sitten todellinen tekstin väri — löydä saavutettavuusrikkomukset minuuteissa avaamatta Lighthousea.
Kun brändi valitsee värin, joka saattaa epäonnistua saavutettavuudessa, käytä tarkistajaa löytääksesi lähimmän hyväksytyn muunnelman (tummempi/vaaleampi sävy).
Varmista, että leijumis-/aktiivisten/kiellettyjen tilojen värit täyttävät edelleen kontrastivaatimukset, ei vain oletusvärin.
Tummat teemat epäonnistuvat usein kontrastissa harmaa-harmaalla-tekstissä. Tarkista tummimmat harmaat tummimpia taustojasi vasten saadaksesi nämä kiinni.
Napsauta Kontrasti-kuvaketta DevSuite Pro -telakassa. Paneeli avautuu, jossa on edusta- ja taustavärin kentät.
Käytä värivalitsinta tai liitä heksadesimaaliarvo kummallekin. Reaaliaikainen esikatselu päivittyy muuttaessasi värejä.
Iso luku (esim. 4.8:1) on kontrastisuhde. Suurempi on parempi. 3 on ehdoton minimi; 4.5 on tavoite normaalille tekstille.
Hyväksytty/Hylätty-merkit AA- ja AAA-tasoille, normaalille ja suurelle tekstikoolle näyttävät yhdellä silmäyksellä mihin yhdistelmäsi kelpaa.
Jos hylätty, säädä värejä. Tummenna edustaa tai vaalenna taustaa (tai päinvastoin), kunnes tavoitetaso näyttää Hyväksytty.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 64 kehittäjätyökalua selaimellesi.
