Käyttöohje
- Syötä tekstin (etualan) väri ja taustaväri HEX-, rgb()-, hsl()- tai muuna CSS-muotona tai käytä valitsimia.
- Katso kontrastisuhde ja läpäisy- tai hylkäystulos kullekin WCAG-vaatimukselle.
- Jos vaatimus ei täyty, valitse tavoite ja käytä ehdotettua väriä, joka säilyttää sävyn ja muuttaa vain vaaleutta.
- Käytä ”Vaihda”-toimintoa tarkistaaksesi käänteisen yhdistelmän, esimerkiksi vaalea teksti tummalla painikkeella.
Näin se toimii
Kontrastisuhde noudattaa WCAG 2.2 -määritelmää: kunkin värin suhteellinen luminanssi lasketaan sen sRGB-kanavista, ja suhde on (vaaleampi + 0,05) ÷ (tummempi + 0,05). Se vaihtelee välillä 1:1 (samat värit) ja 21:1 (musta valkoisella).
Tarkistettavat vaatimukset: onnistumiskriteeri 1.4.3 (AA) edellyttää suhdetta 4,5:1 normaalille tekstille ja 3:1 suurelle tekstille; 1.4.6 (AAA) edellyttää 7:1 ja 4,5:1; 1.4.11 edellyttää 3:1 käyttöliittymän osille ja merkityksellisille grafiikoille, kuten syötekenttien reunuksille ja kuvakkeille. Suuri teksti on vähintään 24px tavallista tai noin 18,66px lihavoitua. WCAG ei salli pyöristämistä ylöspäin, joten 4,49:1 ei täytä AA-tasoa, vaikka se on lähellä; tässä näytetty suhde on katkaistu, ei pyöristetty.
Ehdotus säilyttää tekstivärin sävyn ja kroman OKLCH-avaruudessa ja etsii lähimmän vaaleuden, tummempana tai vaaleampana, joka täyttää tavoitteen. Kontrastisuhde on yksi luettavuuden osa: fontin paksuus, koko ja värinäön erot vaikuttavat myös, ja WCAG 2.2 on nykyinen W3C-suositus, johon useimmat saavutettavuuslait viittaavat.
Esimerkit
Melkein läpäisevä harmaa teksti
#777777 valkoisella antaa suhteen 4,48:1. Se läpäisee suuren tekstin ja käyttöliittymäkomponenttien vaatimukset, mutta ei AA-tasoa normaalille tekstille. Lähin vaatimukset läpäisevä harmaa on noin #767676, joka saavuttaa 4,54:1.
Valkoinen teksti brändipainikkeessa
Valkoinen teksti #ff8800-oranssilla antaa noin 2,4:1, mikä ei täytä edes suuren tekstin 3:1-tasoa. Tavallisia korjauksia ovat oranssin tummentaminen tai tumman tekstin käyttäminen sen sijaan; ehdotus näyttää, kuinka tumma tekstivärin pitäisi olla.
Lomakekentän reunuksen tarkistaminen
Vaaleanharmaa reunus #cccccc valkoisella on noin 1,6:1. Kriteerin 1.4.11 mukaan syötekentän tunnistavan reunuksen on oltava 3:1, joten tarvitaan noin #949494 tai tummempi.
Usein kysytyt kysymykset
Mikä kontrastisuhde tarvitaan WCAG AA -tasolle?
4,5:1 normaalille leipätekstille, 3:1 suurelle tekstille (24px tai 18,66px lihavoitu) ja 3:1 käyttöliittymäkomponenteille ja merkityksellisille grafiikoille. AAA-taso nostaa tekstin vaatimuksen 7:1:een ja suuren tekstin 4,5:1:een.
Täytyykö logotekstin tai pois käytöstä olevan painikkeen tekstin läpäistä kontrastivaatimukset?
Ei. WCAG vapauttaa logojen ja tuotenimien tekstin, puhtaasti koristeellisen tekstin sekä ei-aktiivisten (pois käytöstä olevien) käyttöliittymäkomponenttien tekstin.
Miksi tulokseni eroaa hieman toisesta tarkistustyökalusta?
Jotkin työkalut pyöristävät suhteen yhteen desimaaliin tai ylöspäin. WCAG vertaa tarkkaa arvoa, joten tämä työkalu katkaisee kahteen desimaaliin. Pieniä eroja voi syntyä myös väreistä, jotka on annettu alfakanavalla.
Entä uusi APCA-kontrastimenetelmä?
APCA on erilainen menetelmä, jota on ehdotettu tulevaa WCAG-versiota varten. Se ei ole osa WCAG 2.2:ta, jota tämä työkalu mittaa ja johon nykyiset saavutettavuusvaatimukset viittaavat.
Tietosuoja
Värit tarkistetaan selaimessasi. Mitään ei lähetetä eikä tallenneta.