WCAG-suhteen käyttöönotto web- tai graafisissa suunnitelmissasi varmistaa, että se on kaikkien saatavilla.

Web Content Accessibility Guidelines (WCAG) ovat digitaalisen ja web-suunnittelun esteettömyysohjeet. Näiden ohjeiden noudattaminen varmistaa, että värit ovat riittävän kontrastisia, jotta näkövammaiset näkevät ja lukevat kuviosi oikein. Tämä kulkee myös käsi kädessä typografisen koon kanssa, jotta varmistetaan sen luettavuus yhdessä värien kanssa.

Maailmassa, jonka pitäisi olla osallistavampi, helppokäyttöisten elementtien lisääminen suunnitelmiisi vain kohottaa työtäsi ja antaa sinun jakaa sen useammille ihmisille.

Mikä on WCAG-suhde?

WCAG tarkoittaa Verkkosisällön esteettömyysohjeet. WCAG auttaa kaikkia verkkoa tai Internetiä varten suunnittelevia tai luovia varmistamaan, että heidän suunnittelunsa osuvat saavutettavuustavoitteisiin. Tämä tarkoittaa, että suunnitelmistasi voi nauttia ja niitä voi käyttää kuka tahansa, sulkematta pois näkövammaisia ​​tai muita vammaisia, jos mahdollista.

WCAG-suhde määrittää tavoite saavutettavuuden vähimmäissuhteet. Tämä sisältää värikontrastia ja tekstin kokoa, jotka molemmat varmistavat, että näkövammaisilla on paremmat mahdollisuudet nähdä, olla vuorovaikutuksessa suunnitelmiesi kanssa ja käyttää niitä. WCAG-suhteen osuminen ei ainoastaan ​​auta näkövammaisia, vaan se lisää myös kaikkien verkon käyttäjien käyttökokemusta.

The World Wide Web Consortium kehittää standardeja web-kehitykseen. Vaikka webin saavutettavuudelle ei ole asetettuja sääntöjä, WCAG asettaa standardin, jota jokaisen web-suunnittelijan tulee noudattaa.

Kontrastisuhteita testattaessa WCAG ehdottaa arvoa A–AAA. A-luokitus osoittaa alhaisimman kontrastitason. AA ovat keskialueen kontrastitasoja, joiden suhde on 4,5:1, jota pidetään vähimmäissuhteena. Lopuksi AAA on korkein kontrastitaso. Jos suunnittelet kaikille, kontrastitasosi ovat parhaat AA- ja AAA-alueen välillä.

Miksi WCAG-suhde on tärkeä graafisessa ja web-suunnittelussa?

Graafisen suunnittelun ja web-suunnittelun ei pitäisi vain saada tiedot näyttämään kauniilta. Tietosuunnittelu antaa tietoa massoille – tämä tarkoittaa, että tietosi on kaikkien saatavilla. WCAG-toteutus varmistaa esteettömän suunnittelun niille, joilla on näkövamma, lukihäiriö, neurodivergenssi tai mitä tahansa, joka vaikuttaa jonkun näkö- tai lukukykyyn.

Verkko- ja digitaalinen suunnittelu – sekä ohjelmointi – ovat jo luoneet esteettömyysominaisuudet. Esimerkiksi, Windows tarjoaa käyttäjille hyödyllisiä esteettömyystyökaluja, ja se on jo tavallista, että useimmat YouTube-videot tarjoavat tekstityksiä. Mutta saavutettavuutta voidaan aina parantaa.

Globaali muotoilu luo parempaa muotoilua. Mitä useammat ihmiset voivat olla tekemisissä suunnittelusi kanssa, sitä menestyvämpi se on ja sitä laajempi se on. Sen lisäksi, että suunnittelijana on hyvä tavoittaa enemmän ihmisiä, on myös maailmalle parempi, että harvemmat ihmiset jäävät ulkopuolelle.

WCAG-suhteen ja esteettömyysominaisuuksien suunnittelulla on positiivisia vaikutuksia väripaletteihin, typografisiin valintoihin ja tekstikokoihin. Et tarkoituksella suunnittele jotain vaikeaselkoista, joten miksi et sisällyttäisi siihen lisää tapoja luoda malleja, jotka ovat paremmin luettavissa kaikille?

WCAG-suhteen käyttöönotto suunnitelmissasi

On paikkoja, joissa voit tarkistaa WCAG-suhteen suunnittelussasi, kuten tämä kontrastin tarkistaja verkkosivusto. Sinun tulisi kuitenkin ottaa käyttöön helppokäyttöisiä suunnitteluominaisuuksia työhösi ilman, että sinun tarvitsee vertailla vähimmäisvaatimuksia.

On huomattava, että kontrastiohjeet eivät koske logosuunnittelua. Tämä johtuu siitä, että logot esitetään erikokoisina ja usein eri taustoista. WCAG-suhteen huomioiminen logoja suunniteltaessa ei kuitenkaan haittaa sinua.

Korkeakontrastiset värit

Suurikontrastisten värien käyttäminen on helppo tapa lisätä designiisi intensiivisyyttä. Toistensa vastakkaiset värit auttavat näkövammaisia ​​ja värisokeita näkemään suunnittelusi paremmin. Ei vain sitä, vaan myös ihmiset, joilla ei ole näkövammaisuutta, näkevät paremmin suunnittelusi ja sitoutuvat niihin.

Oletko koskaan yrittänyt lukea vaaleanpunaista tekstiä vaaleanvihreällä taustalla? Se on melkein mahdotonta. Mutta tummansininen teksti vaaleankeltaisella taustalla on paljon helpompi nähdä ja lukea.

Suuren kontrastin värit toimivat parhaiten, kun sijoitat tekstiä värilliselle taustalle tai jos käytät kuvissa pieniä polkuja. Khroma on AI-väripalettigeneraattori, jossa on sisäänrakennettu kontrastin tarkistus - yksi monista mahtavista Tekoälytyökalut helpottavat graafisen suunnittelun työnkulkua.

Loistava tapa tarkistaa kontrasti on muuttaa mallisi harmaasävyiksi. Jos pystyt erottelemaan värit ja ymmärtämään mustan ja harmaan kuvion, sen pitäisi toimia hyvin myös valitsemissasi väreissä.

Tekstin koko

Sen lisäksi, että tekstin värit ovat riittävän kontrastisia taustaväreihin nähden, tekstisi tulee olla tarpeeksi suuri luettavaksi. Suuren tekstikoon WCAG-suhde on 3:1.

Tekstin koko ei ole sama kaikissa typografioissa, joten älä luota kaikkien fonttien 12 pisteen kokoon, jota pidetään tavallisesti normaalin luettavuuden vähimmäiskokona. Testaa niitä itse tai testaajien kanssa näyttämällä tai tulostamalla oikeankokoisia malleja. Jos värit eivät ole kovin kontrastisia, suurempi teksti parantaa luettavuutta kiertotavana.

Fontin luettavuus

On sanomattakin selvää, mutta suunnittelussa valitsemiesi fonttien on oltava helposti luettavia. Koriste-, kursiivi- tai käsinpiirretyillä fonteilla on usein luettavuusongelmia. Heavy metal -bändit ovat tunnettuja siitä, että he käyttävät esimerkiksi yhtyeiden logoissaan luontaisesti vaikealukuisia kirjasintyyppejä.

Sinun tulee myös harkita kerningiä ja seurantaa, kun käytät tekstiä pienissä malleissa. Kirjainten väli voi myös vaikuttaa sanojen luettavuuteen.

Sisällyttävät saavutettavuustekijät

Vaikka WCAG-suhteissa huomioidaan vain värikontrasti, kirjasinkoko ja tekstin luettavuus web-suunnittelussa, sinun tulee tehdä kaikki verkko- ja graafiset suunnittelusi inklusiivisuutta ajatellen.

Jos olet web-suunnittelija ja työskentelet ohjelmoijan tai koodaajan kanssa, varmista, että olet käyttämällä HTML-tekniikoita, jotka helpottavat verkon saavutettavuutta. Siellä on myös esteettömyysominaisuudet Canvassa laajentaaksesi malliesi kattavuutta yleisösi kanssa.

Sinun ei pitäisi pysähtyä vain WCAG-suhteiden vähimmäisvaatimuksiin; jos voit hallita vaihtoehtoisen tekstin lisäämistä kuviin, kuvatekstejä ääni- tai videotiedostoihin tai jopa hyödyllinen tekstin sanamuoto hyperlinkkejä varten – näytönlukuohjelmat lukevat ne ääneen – sinun tulee mennä edellä ja pidemmälle. Esteettömyysominaisuuksien sisällyttäminen ei sulje pois yleisöä – se vain kutsuu lisää ihmisiä mukaan.

Suunnittelu WCAG-suhteella parantaa suunnittelua kaikille

Verkkosuunnittelun standardit tulevat World Wide Web Consortiumista, yhteisöltä, joka auttaa parhaita käytäntöjä verkossa. Konsortio kehitti Web Content Accessibility Guidelines -ohjeet, joita web-suunnittelijoiden tulee noudattaa. Tämä tarjoaa suhdestandardin näkyvyyden tarkistuksiin verkkosuunnittelussa.

Näiden ohjeiden ja suhdestandardien noudattaminen tarkoittaa, että useammilla ihmisillä on pääsy verkkosuunnitelmiisi.