# Värikontrasti: luettavaa tekstiä kaikille

[Canonical HTML page](https://gradiently.design/fi/guide/color-contrast-accessibility)

Kontrasti on ero sanojen välillä, jotka ihmiset lukevat, ja sanojen, jotka he ohittavat. WCAG-luvut selkokielellä, miten ne tarkistetaan ja mikä muuttuu, kun tausta on liukuväri.

## The short version

- Värikontrasti on kirkkauden ero tekstin ja sen taustan välillä, mitattuna suhteena 1:1:stä (ei eroa) 21:1:een (musta valkoisella).
- WCAG 2 -tason AA vaatii vähintään 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille, joka on noin 24 px normaalina tai 18,66 px lihavoituna.
- Kuvakkeiden, syöttökenttien reunojen ja muiden käyttöliittymän osien, jotka ihmisten pitää nähdä, kontrastin ympäristöönsä nähden pitää myös olla vähintään 3:1.
- Valkoisella `#767676` on vaalein tavallinen harmaa, joka läpäisee 4,5:1:n leipätekstille, ja `#777777` juuri ja juuri jää siitä.
- Liukuvärillä kontrasti muuttuu kohdasta toiseen, joten on testattava sanojen takana oleva huonoin kohta, ei keskimääräistä väriä.

**Värikontrasti** on kirkkauden ero tekstin ja sen takana olevan värin välillä, ja se ratkaisee, voivatko ihmiset lukea sanasi lainkaan. Web Content Accessibility Guidelines (WCAG) mittaa sen suhteena 1:1:stä, jossa kaksi väriä ovat identtisiä, 21:1:een, mustaan valkoisella. Tasolla AA tavallinen teksti tarvitsee vähintään **4,5:1** ja suuri teksti vähintään **3:1**. Kaikki muu tässä oppaassa koskee näiden lukujen saavuttamista tekemättä suunnitelmastasi arkaa.

Kontrastilla on merkitystä kaikille, ei vain heikkonäköisille. Puhelimet auringonvalossa, himmeät projektorit, halvat näytöt ja väsyneet silmät kaikki pienentävät värien eroa. Riittävän kontrastin suunnitelmat yksinkertaisesti tulevat luetuiksi useammin.

## WCAG-kontrastisuhteet selkokielellä

Kolme WCAG 2:n sääntöä kattaa lähes jokaisen suunnittelupäätöksen. Ne tulevat [W3C:n onnistumiskriteereistä](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), ja niihin useimmat saavutettavuustarkastukset ja säännökset viittaavat.

| Mikä | Taso AA | Taso AAA | Huomiot |
| --- | --- | --- | --- |
| Tavallinen teksti | 4,5:1 | 7:1 | Leipäteksti, kuvatekstit, nimiöt, painikkeet |
| Suuri teksti | 3:1 | 4,5:1 | Vähintään 18 pt (noin 24 px) tai 14 pt lihavoituna (noin 18,66 px) |
| Kuvakkeet ja käyttöliittymän osat | 3:1 | 3:1 | Syöttökenttien reunat, merkitystä kantavat kaaviorivit, kuvakkeet ilman nimiöitä |
| Logot ja koristeet | Ei mitään | Ei mitään | Brändin logotyypit ja puhtaasti koristeellinen teksti ovat vapautettuja |

Taso AA on tavallinen tavoite. AAA on tiukempi, ja siihen kannattaa tähdätä pitkässä luettavassa.

Kaksi yksityiskohtaa yllättää ihmiset. Ensiksi ”suuri” koskee piirrettyä kokoa, joten 24 px:n otsikko puhelimessa, joka skaalaa sitä pienemmäksi, ei ehkä enää lasketa suureksi. Toiseksi käytöstä poistettu painike on vapautettu, mutta vaaleanharmaa paikkamerkki, jonka ihmisten täytyy ymmärtää, ei ole.

## Miten kontrastisuhde lasketaan

Suhde vertaa kahden värin suhteellista luminanssia: kuinka paljon valoa kumpikin antaa, painotettuna sen mukaan, miten silmä näkee. Vihreä vaikuttaa eniten, punainen vähemmän ja sininen hyvin vähän, minkä vuoksi kylläinen sininen voi olla yllättävän tumma ja keltainen yllättävän vaalea. Kaava on `(L1 + 0.05) / (L2 + 0.05)`, jossa L1 on vaaleampi väri.

```js
// WCAG 2 contrast ratio between two hex colours
const channel = (c) => {
  c /= 255
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
}
const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((i) => channel(parseInt(hex.slice(i, i + 2), 16)))
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

contrast('#767676', '#ffffff') // 4.54, passes for body text
contrast('#777777', '#ffffff') // 4.48, fails
```

Koko laskenta mahtuu kahteentoista riviin. Hyödyllinen brändipaletin tarkistamiseen kerralla.

Sinun ei tarvitse laskea sitä käsin. [WebAIMin kontrastintarkistin](https://webaim.org/resources/contrastchecker/) ottaa kaksi heksakoodia ja kertoo, mitkä tasot läpäistään, ja Chromen kehittäjätyökalujen värinvalitsin näyttää minkä tahansa tarkastelemasi tekstin suhteen.

## Värit, jotka läpäisevät ja jotka eivät

Brändivärit ovat usein hankalassa keskikohdassa: liian tummia tummalle tekstille ja liian vaaleita valkoiselle tekstille. Keskisävyiset vihreät, oranssit, pinkit ja vaaleansiniset ovat tavallisia syyllisiä. Nämä ovat yleisiä yhdistelmiä oikeine suhteineen.

| Teksti taustalla | Suhde | Tavallinen teksti | Suuri teksti |
| --- | --- | --- | --- |
| Valkoinen värillä `#7c3aed` violetti | 5,7:1 | Läpäisee | Läpäisee |
| Valkoinen värillä `#8b5cf6` vaalea violetti | 4,2:1 | Ei läpäise | Läpäisee |
| Valkoinen värillä `#2563eb` sininen | 5,2:1 | Läpäisee | Läpäisee |
| Valkoinen värillä `#3b82f6` taivaansininen | 3,7:1 | Ei läpäise | Läpäisee |
| Valkoinen värillä `#10b981` vihreä | 2,5:1 | Ei läpäise | Ei läpäise |
| `#0b0b10` lähes musta värillä `#10b981` vihreä | 7,7:1 | Läpäisee | Läpäisee |
| Valkoinen värillä `#f59e0b` meripihka | 2,2:1 | Ei läpäise | Ei läpäise |
| `#999999` harmaa valkoisella | 2,9:1 | Ei läpäise | Ei läpäise |
| `#6b7280` harmaa valkoisella | 4,8:1 | Läpäisee | Läpäisee |

Pieni muutos voi ratkaista: kaksi lähes samalta näyttävää sinistä päätyvät 4,5:1:n vastakkaisille puolille.

> **Käännä teksti, älä brändiä** Kun valkoinen ei läpäise kirkkaalla brändivärillä, kokeile tummaa lähes mustaa tekstiä. Vihreä, meripihka ja koralli läpäisevät yleensä mukavasti tummalla tekstillä, ja väri pysyy täsmälleen sellaisena kuin se on. [Brändivärien valinta](https://gradiently.design/fi/guide/how-to-choose-brand-colors) kattaa tämän rakentamisen palettiin alusta alkaen.

## Miksi liukuvärit vaikeuttavat kontrastia

Tasaisella taustalla on yksi kontrastisuhde. Liukuvärillä on eri suhde joka kohdassa. Valkoinen teksti, joka läpäisee helposti häivytyksen tummassa päässä, voi epäonnistua täysin vaaleassa päässä, ja liukuvärin poikki kulkeva otsikko läpäisee ja epäonnistuu samalla rivillä.

Keskiyöstä violettiin ja pinkkiin: `linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%)`

Valkoinen teksti saa 18:1 vasemmalla, 5,7:1 violetilla ja 2,7:1 pinkillä päällä. Yksi liukuväri, kolme tuomiota.

Sääntö on yksinkertainen: testaa vaalein kohta vaalean tekstin takana tai tummin kohta tumman tekstin takana. Jos huonoin kohta läpäisee, koko rivi läpäisee. Keskimääräiset värit ja pipettinäytteet keskeltä johtavat harhaan.

## Miten korjaat kontrastin liukuvärillä

1. **Siirrä sanat rauhalliseen päähän** Aseta teksti liukuvärin tummimman tai vaaleimman osan päälle ja anna kirkkaan siirtymän tapahtua kauempana siitä.
2. **Kavenna alue tekstin takana** Pidä liukuvärin sanojen takana oleva osa pienellä vaaleusalueella. Muu kangas voi olla niin rohkea kuin haluat.
3. **Lisää pehmeä peitekerros** Lempeä tumma tai vaalea häivytys tekstin takana, kuten läpinäkyvästä 30 %:n mustaan liukuväri, nostaa kontrastia ilman näkyvää laatikkoa.
4. **Mene isommaksi ja rohkeammaksi** Suuri teksti tarvitsee vain 3:1. Paksumpi paino ja isompi koko voivat muuttaa epäonnistuvan rivin läpäisevän.
5. **Testaa oikealla puhelimella** Tarkista suunnitelma täydellä kirkkaudella ja matalalla kirkkaudella, jos mahdollista ulkona. Suhteet ovat lattia, eivät tavoite.

```css
.card {
  background: linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%);
  color: #ffffff;
}
/* A soft scrim keeps white text above 4.5:1 across the pink end */
.card .text {
  background: linear-gradient(90deg, transparent 0%, rgb(31 11 58 / 0.55) 60%);
  padding: 1rem 1.25rem;
}
```

Peitekerros tummentaa vain siellä, missä liukuväri vaalenee, joten vasen puoli pysyy koskemattomana.

Pystykuvan julkaisu, jossa otsikko Ovet aukeavat seitsemältä ylittää liukuvärin kirkkaan alueen ja muuttuu vaikeaksi lukea

Sanat kulkevat suoraan kentän kirkkaimman osan yli ja niiden kontrasti laskee.

Sama pystykuvan julkaisu, jossa liukuvärin tummempi, rauhallisempi alue on otsikon takana, joten se luetaan selvästi

Sama suunnitelma, jossa rauhallinen, tumma alue on siirretty sanojen taakse.

Tämä on Gradientlyn luettavuuden ajatus: Mark tietää, missä sanasi ovat, siirtää rauhallisimman, parhaan kontrastin alueensa niiden taakse ja valitsee vaalean tai tumman musteen riviä kohden omasta paletistaan. Lisää tekniikoita, jotka toimivat kaikkialla, löydät oppaista [teksti liukuvärillä](https://gradiently.design/fi/guide/text-on-gradient) ja [luettava teksti valokuvien päällä](https://gradiently.design/fi/guide/text-over-image). Tummista käyttöliittymistä erikseen katso [suunnittelu tummalle tilalle](https://gradiently.design/fi/guide/dark-mode-design).

## FAQ

### Mikä on hyvä värikontrastisuhde?

Vähintään 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille täyttää WCAG-tason AA. Pitkään lukemiseen 7:1 (taso AAA) on mukavampi.

### Mikä lasketaan suureksi tekstiksi WCAG:ssa?

Vähintään 18 pisteen teksti, noin 24 px, tai vähintään 14 pisteen lihavoitu, noin 18,66 px. Suuri teksti tarvitsee vain 3:1 tasolla AA.

### Mikä on vaalein harmaa, jota voin käyttää valkoisella?

`#767676` on vaalein tavallinen harmaa, joka saavuttaa 4,5:1 valkoisella. `#777777` mittaa 4,48:1 ja jää alle leipätekstille.

### Tarvitseeko logojen täyttää kontrastivaatimukset?

Ei. WCAG vapauttaa logon tai brändin nimen osana olevan tekstin sekä puhtaasti koristeellisen tekstin. Kaikki, mitä ihmisten täytyy lukea tai käyttää, lasketaan silti.

### Miten tarkistan kontrastin liukuvärillä?

Mittaa tekstin väri vaalean tekstin takana vaalein kohta tai tumman tekstin takana tummin kohta. Jos huonoin kohta läpäisee, koko rivi läpäisee.