Kontrastin tarkistus
Testaa etualalla ja taustaväreillä WCAG-kontrastiyhteensopivuutta, esikatsele todellista tekstiä ja vertaile saatavilla olevia Pantone-värivaihtoehtoja.
Etualan väri
Taustaväri
Kontrastisuhde
Normaali teksti
WCAG AA 4.5:1Suuri teksti
WCAG AA 3:1Käyttöliittymän komponentit
WCAG AA 3:1Live-esikatselu
Esimerkki normaalista tekstistä luettavan tekstikappaleen tarkistamiseksi.
Esimerkki suuresta tekstistä
Helppokäyttöiset Pantone-ehdotukset
Tämä väripari täyttää jo valitun kontrastitavoitteen.
Lisää työkaluja
Kontrastitarkistimen käyttäminen
- Syötä HEX-värit tai valitse Pantone-värit etualalle ja taustalle.
- Tarkista kontrastisuhde ja WCAG AA- tai AAA-passitulokset normaalin tekstin, suuren tekstin ja käyttöliittymäkomponenttien osalta.
- Käytä live-esikatselua, vaihda värejä, kopioi CSS:ää tai kokeile saatavilla olevia Pantone-ehdotuksia.
Kontrastitarkistusten käyttötapaukset
- Vahvista merkkiväriparit ennen kuin käytät niitä digitaalisissa asetteluissa.
- Tarkista painikkeiden, lomakkeiden, navigoinnin ja muiden käyttöliittymäkomponenttien luettava kontrasti.
- Vertaa Pantonen inspiroimia paletteja ennen kuin sovitat tulostusvärejä näyttöihin.
- Dokumentoi WCAG-kontrastitulokset esteettömyystarkastuksia ja suunnittelun vaihtoa varten.
Värikontrastitarkistus WCAG-, käyttöliittymä- ja Pantone-työnkulkuille
Käytä tätä värikontrastitarkistusta, kun haluat varmistaa, että tekstin väri, taustaväri, painikkeen tila tai tuotemerkkipaletti on luettavissa ennen kuin se siirtyy verkkosivustoon, sovellukseen, esitykseen tai suunnittelujärjestelmään.
Lue WCAG-kontrastitulos oikein
Työkalu laskee molempien värien suhteellisen luminanssin ja palauttaa WCAG:n käyttämän kontrastisuhteen. Normaali leipäteksti tarvitsee yleensä 4,5:1 AA:lle ja 7:1 AAA:lle, kun taas suurella tekstillä ja olennaisilla käyttöliittymäkomponenteilla on alhaisemmat kynnykset.
Bridge Pantone -värit ja digitaalinen saavutettavuus
Pantone-värit valitaan usein merkki- ja painotöihin, mutta niiden näytön vastineet tarvitsevat silti esteettömyystarkistuksia. Hae Pantone-nimiä tai HEX-arvoja, esikatsele paria ja vertaa käytettävissä olevia vaihtoehtoja ennen värien luovuttamista suunnittelu- tai kehitystiimeille.
Käytännöllinen työnkulku suunnittelijoille ja kehittäjille
Aloita suunnittelutiedostosi tarkoista HEX-arvoista, testaa sekä etu- että taustasuunnat, kopioi CSS tai raportti ja säilytä ohimenevä väripari muun Pantone-palettidokumentaation kanssa.
Kontrastitarkistus FAQ
Mitä tämä kontrastintarkistus mittaa?
Se mittaa etualan värin ja taustavärin välisen luminanssikontrastisuhteen ja vertaa sitten tulosta WCAG-kynnyksiin.
Mitkä ovat WCAG AA- ja AAA-kontrastivaatimukset?
WCAG AA vaatii vähintään 4,5:1 normaalille tekstille ja 3:1 suurelle tekstille tai käyttöliittymäkomponenteille. WCAG AAA vaatii 7:1 normaalille tekstille ja 4,5:1 suurelle tekstille.
Voidaanko Pantone-väreistä tarkistaa web-käytettävyys?
Kyllä. Pantone-viitteet voidaan muuntaa näytön väriarvoiksi ja tarkistaa sitten digitaalinen kontrasti. Tarkista aina lopulliset tuotantovärit siinä välineessä, jossa ne näkyvät.
Kontrasti Vastuuvapauslauseke
Kontrastitulokset lasketaan digitaalisista väriarvoista ja on tarkoitettu esteettömyyssuunnitteluun. Fyysinen tuloste, materiaalit, valaistus ja näytön kalibrointi voivat muuttaa havaittua kontrastia.