Kontrastitarkistin
Varmista, että tekstisi ja käyttöliittymäsi täyttävät WCAG 2.1 -kontrastivaatimukset, olennainen osa EAA/EN 301 549 -vaatimustenmukaisuutta. Liitä brändivärit, esikatsele yhdistelmät ja saa selkeä hyväksytty/hylätty-tulos normaalille tekstille, suurelle tekstille ja käyttöliittymäkomponenteille.
Color Contrast Checker
The quick brown fox jumps over the lazy dog
Contrast Ratio
8.67:1
Euroopan laajuisesti organisaatioiden luottama työkalu WCAG- ja EAA-vaatimustenmukaisuuden saavuttamiseen
Mikä on kontrastitarkistin ja miksi sitä tarvitaan?
Riittävä kontrasti parantaa luettavuutta kaikille, erityisesti käyttäjille, joilla on heikko näkö, värinäköpoikkeavuuksia tai vanhempia näyttölaitteita.
Tarkista 1.4.3 Kontrasti (vähimmäistaso), 1.4.6 Kontrasti (parannettu) ja 1.4.11 Ei-tekstin kontrasti käyttöliittymäkomponenteille ja grafiikalle.
Euroopan esteettömyysasetus (EAA) viittaa EN 301 549 -standardiin, joka pohjautuu WCAG-ohjeisiin, kontrasti on olennainen osa vaatimusten täyttämistä.
Saavutettavat väripaletit luovat selkeitä, kestävän luettavia käyttöliittymiä, jotka toimivat sekä vaaleissa että tummissa teemoissa ja eri laitteilla.
WCAG 2.1 -kontrastirajat (pikaopas)
Vähimmäissuhde: 4.5:1 (teksti alle 24 px normaali / 19 px lihavoitu).
Vähimmäissuhde: 3:1 (≥ 24 px normaali tai ≥ 19 px lihavoitu).
Vähimmäiskontrasti viereisiin väreihin: 3:1 (fokuskehykset, lomakekentät, kuvakkeet jne.).
WCAG-värikontrastin ymmärtäminen web-saavutettavuudessa
Värikontrastintarkistin on olennainen työkalu web-suunnittelijoille ja kehittäjille varmistaakseen, että heidän digitaalinen sisältönsä täyttää saavutettavuusstandardit. WCAG-värikontrastiohjeet auttavat luomaan käyttöliittymiä, jotka ovat luettavia ja käytettäviä kaikille, mukaan lukien näkövammaiset ihmiset.
Mikä on WCAG-värikontrasti?
WCAG (Web Content Accessibility Guidelines) määrittelee tietyt kontrastisuhteet tekstin ja taustan värien välillä luettavuuden varmistamiseksi. Kontrastintarkistin laskee nämä suhteet käyttämällä suhteellisia luminanssiarvoja, tarjoten matemaattisen mittarin siitä, kuinka erottuvia värit ovat toisistaan. Näiden standardien täyttäminen on ratkaisevan tärkeää WCAG 2.1 -vaatimustenmukaisuudelle, ja niihin viitataan säädöksissä, kuten Euroopan saavutettavuuslaki (EAA) EN 301 549:n kautta.
Miten kontrastintarkistin toimii?
WCAG-värikontrastintarkistimemme analysoi luminanssieron etualan (tekstin) ja taustan värien välillä. Se laskee automaattisesti kontrastisuhteen ja vertaa sitä WCAG-onnistumiskriteereihin 4,5:1 normaalille tekstille (Taso AA), 3:1 isolle tekstille ja 7:1 parannetulle kontrastille (Taso AAA). Tämä välitön palaute auttaa sinua tekemään tietoisia suunnittelupäätöksiä ilman manuaalisia laskelmia.
Parhaat käytännöt värikontrastille
Aloita testaamalla brändivärit varhaisessa suunnitteluvaiheessa käyttämällä kontrastintarkistinta. Varmista, että kaikki tekstielementit, painikkeet, lomakekentät ja kuvakkeet täyttävät vähimmäisvaatimukset. Älä luota pelkästään väriin tiedon välittämisessä – käytä myös tekstimerkintöjä, kuvakkeita tai kuvioita. Säännöllinen testaus WCAG-kontrastintarkistimella auttaa ylläpitämään saavutettavuusstandardeja koko projektisi elinkaaren ajan.
Kokeile kontrastitarkistinta
Syötä etu- ja taustavärit (HEX). Työkalu laskee kontrastisuhteen ja näyttää hyväksytty/hylätty-tuloksen WCAG-tasojen mukaan. Tulokset päivittyvät kirjoittaessasi.
Usein kysytyt kysymykset
Muuttuuko kontrastivaatimus WCAG 2.2 -versiossa?
Edellyttääkö EAA WCAG-kontrastia?
Mikä lasketaan 'suureksi tekstiksi'?
Tee kontrastitarkistuksista osa työnkulkuasi
Suorita kontrastitarkistuksia suunnittelukatselmuksissa ja koodin PR-tarkastuksissa. Yhdistä automaattisiin skannauksiin laajamittaisen kattavuuden saavuttamiseksi.