Värikontrasti: luettavaa tekstiä kaikille

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ä, ja niihin useimmat saavutettavuustarkastukset ja säännökset viittaavat.

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.

// 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

Sinun ei tarvitse laskea sitä käsin. WebAIMin kontrastintarkistin 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.

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ä.

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. 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. 2

   Kavenna alue tekstin takana

   Pidä liukuvärin sanojen takana oleva osa pienellä vaaleusalueella. Muu kangas voi olla niin rohkea kuin haluat.

3. 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. 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. 5

   Testaa oikealla puhelimella

   Tarkista suunnitelma täydellä kirkkaudella ja matalalla kirkkaudella, jos mahdollista ulkona. Suhteet ovat lattia, eivät tavoite.

.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;
}

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ä ja luettava teksti valokuvien päällä. Tummista käyttöliittymistä erikseen katso suunnittelu tummalle tilalle.