Varmista, että väriyhdistelmäsi täyttävät WCAG 2.1 -saavutettavuusstandardit. Syötä mitkä tahansa kaksi väriä ja saat heti kontrastisuhteen sekä AA- ja AAA-tulokset.
12.92:1
The quick brown fox jumps over the lazy dog.
ABCDEFGHIJKLM 0123456789
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
WCAG 2.1 -taso AA vaatii vähintään 4,5:1 kontrastisuhteen normaalille tekstille ja 3:1 isolle tekstille. Taso AAA vaatii 7:1 normaalille tekstille ja 4,5:1 isolle tekstille. Korkeampi suhde tarkoittaa parempaa luettavuutta kaikille käyttäjille, mukaan lukien näkövammaiset ja värisokeat.
WCAG AA on perussaavutettavuusstandardi, jota useimmat säädökset vaativat. Se edellyttää 4,5:1 kontrastia normaalille tekstille ja 3:1 isolle tekstille (vähintään 18 px tai 14 px lihavoitu). WCAG AAA on parempi taso paremmalla luettavuudella: 7:1 normaalille tekstille ja 4,5:1 isolle tekstille. Useimmat organisaatiot tavoittelevat vähintään AA-tasoa.
Korjaa heikko kontrasti näin: (1) Tummenna teksti vaalealla taustalla tai vaalenna se tummalla taustalla. (2) Tarkista uusi suhde tällä työkalulla, jotta se on vähintään 4,5:1 normaalille tekstille. (3) Harkitse fonttikoon kasvattamista yli 18 pikselin tai tekstin lihavointia, jolloin pätee löysempi 3:1 -raja. (4) Käytä Ehdota saavutettavaa vaihtoehtoa -painiketta automaattiseen korjaukseen.
WCAG 2.1 määrittelee ison tekstin tekstiksi, joka on vähintään 18 pisteen kokoinen (24 px) normaalipainossa tai vähintään 14 pisteen (n. 18,66 px, usein pyöristetty 18 pikseliin CSS:ssä) lihavoituna (700+). Isolle tekstille on löysemmät kontrastivaatimukset, koska suuremmat merkit ovat luonnostaan helpompia lukea.
Kontrastitarkistin testaa yksittäisiä värivareja WCAG-vaatimuksia vasten. Täysi VertaaUX-auditointi skannaa automaattisesti jokaisen tekstielementin sivultasi, tunnistaa kaikki kontrastirikkomukset kontekstissaan, tarkistaa WCAG 2.2 -vaatimustenmukaisuuden useilla kriteereillä ja antaa priorisoidut suositukset. Käytä kontrastitarkistinta nopeisiin tarkistuksiin designvaiheessa ja täyttä auditointia kattavan saavutettavuuden varmistamiseen koko sivustollasi.
Yksittäisen väriparien kontrastitarkistin sopii pikatarkistuksiin. Auditoi koko sivustosi tekstit WCAG 2.2 -vaatimuksia vasten ilmaisella VertaaUX-auditoinnilla.
Tee ilmainen UX-auditointi