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.
WCAG 2.2 minimikontrasti (virallinen W3C): 4.5:1, 3:1 ja ei-teksti 3:1
WCAG 2.2:n viralliset minimikontrastivaatimukset, joita käytetään saavutettavuusauditoinneissa, ovat selkeat: normaalikokoisella tekstilla on oltava vahintaan 4.5:1, suurikokoisella tekstilla vahintaan 3:1 ja ei-tekstuaalisilla kayttoliittymakomponenteilla sekä graafisilla objekteilla vahintaan 3:1 viereisiin vareihin nahden. Nämä ovat WCAG 2.2:ssa määritellyt kontrastikynnykset, jotka saavutettavuustestaustyökalut tavallisesti validoivat.
| Elementtityyppi | WCAG-minimi | Onnistumiskriteeri |
|---|---|---|
| Normaalikokoinen teksti | 4.5:1 | 1.4.3 (AA) |
| Suurikokoinen teksti | 3:1 | 1.4.3 (AA) |
| Ei-tekstuaaliset käyttöliittymäkomponentit ja graafiset objektit | 3:1 | 1.4.11 (AA) |
WCAG 2.2 vs WCAG 2.1: kontrastisäännöt
WCAG 2.2 käyttää samoja peruskontrastisuhteita kuin WCAG 2.1, joten hyväksytty/hylätty-raja-arvot eivät muutu. Huipputiimeillä muuttuu toteutus: tuote-, design- ja QA-tiimit, jotka vakioivat WCAG 2.2 -käytännöt työnkulkuun, etenevät nopeammin skannaustuloksista hyväksyttyihin korjauksiin, vähentävät julkaisu-riskiä ja suojaavat konversiokriittisiä käyttöliittymiä.
WCAG-kontrastivaatimukset elementtityypeittäin
WCAG-kontrastivaatimukset vaihtelevat elementtityypin mukaan. Leipäteksti, kuvatekstit ja ohjeteksti arvioidaan tekstikontrastina. Painikkeet, lomakkeiden reunat, fokusindikaattorit, ikonit ja tilagrafiikka arvioidaan ei-tekstikontrastina. Käytännön vaatimustenmukaisuuden kannalta testaa molemmat kategoriat design-QA:ssa, varmista uudelleen ennen julkaisua ja testaa uudelleen jokaisen paletti- tai komponenttimuutoksen jälkeen.
WCAG-värikontrastitarkistin
Käyttääkö tiimisi termiä color tai colour, WCAG-säännöt ovat samat. Tämä WCAG-värikontrastitarkistin arvioi etu- ja taustavärien yhdistelmät virallisia W3C-kynnysarvoja vasten ja antaa selkeän hyväksytty/hylätty-tuloksen, johon suunnittelijat ja kehittäjät voivat reagoida heti.
ADA-värikontrastivaatimukset ja WCAG-mappaus
Yhdysvaltalaisissa saavutettavuusohjelmissa ADA-korjaustyö mitataan käytännössä usein WCAG:n onnistumiskriteereillä. Jos organisaatiosi tarvitsee ADA-prosessin kontrastin tarkistukseen, käytä WCAG-kynnysarvoja mitattavana lähtötasona ja säilytä näyttö design-reviewssa, QA-hyväksynnässä ja julkaisu-dokumentaatiossa.
WCAG-tarkistin vs kontrastitarkistin
Kontrastitarkistin varmistaa yhden kriittisen alueen: luettavat värisuhteet tekstille ja käyttöliittymäelementeille. Täysi WCAG-tarkistin kattaa laajemman vaatimustenmukaisuuden alueen, kuten näppäimistötuen, lomakesemantiikan, tunnisteet, otsikot ja ARIA-käyttäytymisen. Vahvimmat saavutettavuustiimit käyttävät molempia: nopeita kontrastitarkistuksia arjen työssä sekä koko sivuston WCAG-testauksen ennen julkaisua.
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.