# Elementtien on täytettävä värikontrastisuhteen vähimmäisraja-arvot

<https://www.fixreports.com/fi/issues/color-contrast>

WCAG 1.4.3 Kontrasti (minimi) · Taso AA

Osa tekstistä ei erotu taustastaan tarpeeksi, jotta heikkonäköiset voisivat lukea sen.

## Mitä tämä sääntö tarkistaa
Varmistaa, että edusta- ja taustavärin kontrasti täyttää WCAG 2 AA -tason kontrastisuhteen vähimmäisraja-arvot.

## Miksi sillä on merkitystä
WCAG 1.4.3 edellyttää vähintään kontrastisuhdetta 4.5:1 tavalliselle tekstille ja 3:1 suurelle tekstille. Haaleat hinnat, merkit ja bannerit ovat vaikealukuisia heikkonäköisille ja kaikille kirkkaassa valossa.

## Miten se korjataan
### Millä tahansa sivustolla
1. Etsi heikkokontrastinen teksti ja kirjaa sen tekstiväri ja taustaväri: kontrastityökalu tai selaimesi kehittäjätyökalut näyttävät molemmat.
2. Muuta tekstin tai taustan väriä teemasi CSS:ssä, kunnes suhde on vähintään 4.5:1 (3:1 vähintään 24px:n tekstille tai 18,66px:n lihavoidulle tekstille).
3. Kiinnitä erityistä huomiota alennusmerkkeihin, paikkamerkkiteksteihin (placeholder), alatunnisteen linkkeihin ja kuvien päällä oleviin painikkeisiin.

### Shopifyssa
1. Etsi heikkokontrastinen teksti ja kirjaa sen tekstiväri ja taustaväri: kontrastityökalu tai selaimesi kehittäjätyökalut näyttävät molemmat.
2. Tummenna kohdassa Verkkokauppa > Teemat > Mukauta > Teeman asetukset > Värit (Online Store > Themes > Customize > Theme settings > Colors) tekstin väriä tai vaalenna taustaa kyseisessä värimallissa, kunnes suhde on vähintään 4.5:1.
3. Kiinnitä erityistä huomiota alennusmerkkeihin, paikkamerkkiteksteihin (placeholder), alatunnisteen linkkeihin ja kuvien päällä oleviin painikkeisiin.

### WooCommercessa ja WordPressissä
1. Etsi heikkokontrastinen teksti ja kirjaa sen tekstiväri ja taustaväri: kontrastityökalu tai selaimesi kehittäjätyökalut näyttävät molemmat.
2. Muuta tekstin tai taustan väriä teemasi CSS:ssä, kunnes suhde on vähintään 4.5:1 (3:1 vähintään 24px:n tekstille tai 18,66px:n lihavoidulle tekstille).
3. Kiinnitä erityistä huomiota alennusmerkkeihin, paikkamerkkiteksteihin (placeholder), alatunnisteen linkkeihin ja kuvien päällä oleviin painikkeisiin.

## Miten korjaus tarkistetaan
- Aja skannaus uudelleen ja varmista, ettei sääntö color-contrast enää näy.
- Tarkista tarkat värit pistokokein kontrastityökalulla.

## Lähteet
- axe-core-säännön dokumentaatio (Deque): https://dequeuniversity.com/rules/axe/4.13/color-contrast
- Understanding WCAG 1.4.3: kriteerin selitys (W3C): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum