Korkean värikontrastin käyttö helpommin suunnitellun suunnittelun kannalta

Web-standardit värikontrastille

Värikontrastisuhde mittaa kontrastin eroa kahden värin välillä. Mitä suurempi arvo on, sitä helpompi on erottaa kohde (teksti, kuva, kuva) etualalla taustasta.

Värit voivat kontrastoida monin eri tavoin, kuten värisävy, arvo ja kyllästys. Värikontrastisuhde lasketaan W3C: n, joka on World Wide Webin tärkein kansainvälinen standardointiorganisaatio, antamalla kaavalla.

Se voi kestää arvon välillä 1: 1 (mitään kontrastia, etualalla ja taustalla on sama väri) ja 21: 1 (suurimman kontrastin joka on vain mustan ja valkoisen välillä).

W3C: n viimeisimmät Web Content Accessibility Guidelines (WCAG) 2.0 tarjoaa web-kehittäjille ja sisällöntuottajille vertailuarvoja hyväksyttävän värikontrastisuhteen (taso AA) ja vahvistetun (tason AAA) arvon suhteen.

Taso AA vaatii ainakin Säännöllisen tekstin suhde 4,5: 1, ja 3: 1 suurelle tekstille. On paljon helpompaa lukea suurta tekstiä, kuten tekstitystä, siksi se tarvitsee pienemmän värikontrastin.

Jos haluat saavuttaa tason AAA, joka on parannettu taso, sinun on suunniteltava värijärjestelmäsi huolellisemmin, sillä se vaatii ainakin 7: 1 kontrastisuhde normaalille tekstille, ja 4,5: 1 suurille. Jos teksti on osa logoa tai tuotemerkkiä, värikontrastin vähimmäisvaatimusta ei ole joko WCAG-tasolla.

Voimme vain kutsua verkkosivustoa visuaalisesti, jos värien kontrastisuhde jokaisen etualan kohteen ja sen taustan välillä saavuttaa ainakin tason AA.

Korkean värin kontrastisuhteen edut

Paremman luettavuuden ansiosta et vain harjoita näkövammaisia ​​käyttäjiä ihmiset, jotka lukevat sisältöä pienissä näytöissä esimerkiksi älypuhelimessa tai älykellossa huonot valaistusolosuhteet, ja edelleen heikompilaatuiset näytöt.

Ihmiset lukevat myös nopeammin, kun tekstin ja taustan välillä on suurempi kontrasti, joten se vie todennäköisesti enemmän aikaa, jotta he kyllästyisivät sivuston sisällön kanssa.

Jos olet huolissasi siitä, että korkeamman kontrastisuhteen soveltaminen vaikuttaa kielteisesti suunnittelun esteettisyyteen, sinun täytyy tarkistaa Contrast Rebellion -verkkoprojekti, joka todistaa todellisten esimerkkien avulla, että korkean kontrastisuhteen sääntöjen noudattaminen voi silti johtaa viehättävissä ja viileissä malleissa.

Sovellukset värikontrastin tarkistamiseen

Internetissä on monia hyviä ilmaisia ​​työkaluja, joiden avulla suunnittelijat voivat tarkistaa verkkosivustonsa kontrastisuhteen.

Helpoin tapa testata värikontrastin suunnittelua on valita tärkeimmät värit joko Photoshopilla tai sopivalla selaimen laajennuksella, kuten tämä Firefoxiin, ja kopioida arvot johonkin alla olevista sovelluksista.

Tärkeintä on muistaa, että sinun täytyy aina vertaa etualan väriä, kuten tekstin väriä, ympäröivään alueeseen (taustaväri).

1. WebAim-värikontrasti

WebAim (Web Accessibility In Mind) on web-esteettömyyttä edistävä organisaatio, joka tarjoaa kehittäjille yksinkertaisen, mutta luotettavan värikontrollerin monien muiden suurten esteettömyystyökalujen, kuten Wave-sovelluksen, avulla, joka on yleinen saavutettavuuden arvioinnin sovellus arvioida nopeasti sivustosi esteettömyysongelmia.

WebAimin värikontrasti tarkistaa jos värisi läpäisevät WCAG AA- ja AAA-testit, sekä normaaleille että suurille teksteille.

2. Snook-värikontrasti

Jonathan Snook, joka työskentelee parhaillaan Shopifen johtavana eturakentajana, on pitänyt kätevän värikontrastitarkistuksensa yli vuosikymmenen ajan. Snook-sovelluksen avulla voit muuttaa HSL- ja RGB-arvoja etualan ja taustavärin yksitellen käyttämällä kätevä valikoima liukusäätimiä kunnes saavutat tuloksen, joka vastaa WCAG 2.0 -tason viitearvoja.

CheckMyColours

Giovanni Scalan luomat CheckMyColours-ohjelmat mahdollistavat kaikkien etualan taustaväriyhdistelmien värikontrastisuhteen tarkistamisen live-sivustolla.

Se laskee kirkkausero, kirkkausero, ja värin ero, ja antaa sinulle täydellisen raportin tuloksista. CheckMyColoursin raportti voi merkittävästi helpottaa ymmärrystä siitä, miten voit parantaa sivuston visuaalista saatavuutta.

Värimallisuunnittelija

Color Scheme Designer ei ole erityisesti värikontrasti, vaan työkalu täydellisten värimallien suunnittelu.

Me sisällytämme sen tähän kokoelmaan, koska siinä on ominaisuus, jonka avulla voit nähdä, miten värimaailma havaitaan erilaisilla näkövammaisilla. Voit testata värisi täyden värisokeuden, protanopian, deuteranopian ja monien muiden näköhäiriöiden varalta. Sovelluksessa on uudempi versio nimeltä Paletton, joka tekee jopa entistä hienostuneemman visuaalisen simulaation (voit myös testata sellaisia ​​asioita, kuten huono LED-näyttö tai heikko CRT-näyttö).

W3C tarjoaa myös valtavan Web-esteettömyyden arviointityökalujen luettelon, josta löydät monia muita värikontrastityökaluja, kuten tämä hyödyllinen esteettömyysväripyörä.

Vinkkejä visuaalisesti saatavilla olevien verkkosivustojen luomiseen

Jos haluat luoda visuaalisesti saatavilla olevan sivuston, on aina hyvä ajatus välttää yksin värin käyttämistä toimintojen tai merkityksen välittämisessä. Tähän ovat tyypillisiä esimerkkejä kuvakkeista, jotka muuttavat niiden väriä niiden nykyisen tilan perusteella.

Jos se on mahdollista, aina suunnitella lisää visuaalisia vihjeitä jotka auttavat ihmisiä, jotka näkevät värit eri tavalla ymmärtääkseen toimivuutta.

Älä koskaan unohda kiinnitä erityistä huomiota painikkeiden, linkkien ja valikoiden värikontrastiin, koska ne ovat navigointivälineitä sivustossasi. Jos käyttäjät eivät voi navigoida helposti sivustossasi, menetät ne nopeasti. Käytettävissä olevat värit toimintopainikkeille ovat myös ratkaisevaa hyvien muuntokurssien kannalta.

Se on hyvä työnkulun käytäntö testata värikontrastisuhdetta mahdollisimman varhaisessa vaiheessa suunnitteluprosessissa, koska asiakkaan on vaikea vakuuttaa muuttamaan sivuston värisuunnitelmaa myöhemmin suunnitteluprosessissa..

Lue nyt: Käytännöllinen lähestymistapa verkkosivujen värin valintaan