Ang mga kulay ng iyong brand ay may malakas na emosyonal na epekto, ngunit paano sila lumilitaw sa mga bisita sa site na bahagyang nakakakita, colorblind, o nahaharap sa mga salik sa kapaligiran na nagpapahirap sa visibility?
Ang mga antas ng kulay at kaibahan ay mahalaga sa komunikasyon, at ang pagkuha ng mga detalyeng ito nang tama ay mahalaga para sa taga-disenyo na may pag-iisip sa accessibility.'
Ang mga karamdaman sa pang-unawa sa kulay ay mas karaniwan kaysa sa maaari mong isipin. Kaya, sa post na ito, pag-uusapan natin kung paano nakikipag-ugnayan sa web ang mga taong may kapansanan tulad ng mahinang paningin, dyslexia, at color blindness.
Talaan ng nilalaman
Paano ako gagamit ng color checker upang mapabuti ang pagiging naa-access ng aking website?
Ang seksyon na ito ay talagang simple, kahit na nangangailangan ito ng ilang pagsisikap. Kakailanganin mong gamitin ang online na tool ng Contrast Checker ng WebAIM. Ang WebAIM ay isang non-profit na organisasyon na nakabase sa Utah State University na may misyon na pahusayin ang web accessibility sa buong mundo.
Ilagay lamang ang iyong kulay sa harapan (hal., ang kulay ng iyong teksto o mga icon) at kulay ng background bilang mga halaga ng hexadecimal (kilala rin bilang mga halaga ng hex), tulad ng tinukoy sa HTML o CSS, at ipapaalam sa iyo ng tagasuri ng contrast ratio kung sapat ang ratio. Tandaan na ang pinakamababang contrast ratio na dapat mong hanapin ay 4.5 hanggang 1. Ang itim na text sa isang puting background ay may contrast ratio na 21 hanggang 1, kaya mayroon kang malaking pahinga.
5 Mga Tool para sa Paggawa ng Web Color Palette na Nakikita ng Lahat
1. WebAIM Color Contrast Checker
Ilagay ang hex na kulay para sa foreground at background. Ipinapakita ng output ang pagsunod sa AA at AAA para sa normal at malaking text, kasama ang isang sample na pangungusap. Hinahayaan ka ng mga slider na baguhin ang mga bagay hanggang sa makakita ka ng magandang kumbinasyon.
Lakas
- Simpleng tool na may interface na madaling makita.
- Ito ay isang maganda, simpleng tool para sa mga nagsisimula, at hindi lamang mga designer.
Mga kahinaan
- Hindi maaaring maghambing ng higit sa dalawang kulay, dalawa lang.
- Ang lightness slider ay hindi isang napakahusay na paraan upang pumili ng mga kulay. Mahirap sabihin kung gaano kaakit-akit ang mga kulay sa simpleng display na ito.
2. Contrast Checker para sa WCAG
Ilagay ang hex na kulay para sa foreground at background. Nagpapakita ng pagsunod sa AA at AAA para sa normal at malaking text sa tabi ng sample ng Lorem Ipsum text. Maaari ka ring mag-upload ng larawan. Awtomatikong pipiliin para sa iyo ang isang 9 na kulay na palette. Pagkatapos, maaari mong ihambing ang bawat kulay bilang alinman sa Foreground o kulay ng Background.
Lakas
- Simpleng tool na may user-friendly na interface.
- Ang pagkakaroon ng kakayahang gumawa ng mga palette mula sa mga imahe.
Mga kahinaan
- Awtomatikong napili ang palette, at maaari mo itong baguhin nang higit pa gamit ang color picker, ngunit ang mga pagbabagong iyon ay hindi nai-save pabalik sa palette. Dapat kopyahin at i-paste ang impormasyon sa isang bagong dokumento.
3. Kulay ng Cube
Ipasok ang mga kulay para sa palette, bawat isa sa sarili nitong linya. Ang output ay nagpapakita ng mga sample na titik na may mga contrast ratio kumpara sa mga pamantayan ng AA para sa maliliit at malalaking font. Ang tatlong column ay nagpapakita ng contrast sa isang puting background, isang itim na background, at isang hanay ng mga kulay ng brand na "Pinakamababasa mula sa available."
Lakas
- Easy-on-the-eyes Ang user interface (UI) ay maayos na nakaayos, at ang pass/fail/edge status ay madaling makita.
Mga kahinaan
- Hindi nakakatugon sa mga pamantayang itinakda ng AAA.
- Hindi ginagawa ang lahat ng posibleng kumbinasyon ng kulay, at hindi malinaw sa una na ito ang kaso.
4.) Eight Shapes Contrast Grid
Maglagay ng mga kulay ng palette. Gayundin, maaari mong bigyan ng pangalan ang bawat kulay. Ang app ay gumagawa ng isang talahanayan na may bawat posibleng kumbinasyon ng mga kulay. Mayroong tatlong laki ng mga tile. May mga visual na pahiwatig para sa AA at AAA pass/fail/edge at epektibong contrast ratio. Maaaring ilipat ang mga column at row sa app sa pamamagitan ng pag-drag at pag-drop. Maaaring i-save, i-export, at ibahagi ang tabular data.
Lakas
- Mayroong maraming mga kapaki-pakinabang na tampok na makakatulong sa pagsusuri ng buong palette.
Mga kahinaan
- Mas mahirap matutunan kaysa sa ibang mga tool na mas madaling gamitin.
- Hindi ang tamang paraan upang ihambing ang dalawang kulay lamang.
- Hindi maganda para malaman kung paano magkakasama ang mga kulay.
- Medyo napakalaki tingnan, ngunit maraming impormasyon ang ipinapakita.
5. Ligtas sa kulay
I-type ang kulay ng background. Piliin ang pamilya, laki, at bigat ng font. Piliin ang AA o AAA bilang pamantayan. Ipinapakita ang napiling kulay at ang hex code nito, pati na rin ang isang sample at ang epektibong contrast ratio. Ang malalaking thumbnail ng mga posibleng kulay sa harapan na may sapat na kaibahan ay ang pinakamagandang bahagi. Maaari mong piliing tingnan ang lahat ng ito o ang ilang partikular na pangkat ng kulay (mga berde, asul, lila, atbp.)
Lakas
- Sa interface na madaling makita, madaling makahanap ng kumbinasyon ng mga kulay na mukhang maganda at gumagana nang maayos.
- Ito ay isang kapaki-pakinabang na tool kung wala ka pang palette ng kulay ng brand o kung gusto mong magdagdag sa isa na mayroon ka na para sa web.
Mga kahinaan
- Maaari mo lamang ihambing ang mga kulay ng foreground at background sa isang pagkakataon.
- Kailangan mong kopyahin at i-paste ang mga kulay sa isang hiwalay na dokumento kung gusto mong i-save ang mga ito.
- Lumabas at gumawa ng mga bagay para sa lahat!
Kapag alam mo na kung paano gamitin ang mga tool na ito, maaari mong makita na kailangan mo ng higit sa isa para sa isang proyekto. Marahil ang Color Cube ay ang pinakamahusay na paraan upang ipakita sa isang kliyente kung ano ang iyong natutunan tungkol sa pagiging naa-access. Marahil ay gagamitin mo ang tool ng WebAIM sa lahat ng oras upang gumawa ng mabilis na mga pagsusuri sa lugar.
Konklusyon
Gamit ang mga tip, alituntunin, at tool na napag-usapan lang namin, maaari mong bigyan ang iyong website ng mga kulay at label na may mataas na contrast. Gagawin nitong mas madali para sa mga taong may mahinang paningin, dyslexia, at color blindness na basahin ang iyong website at nilalaman. Huwag magtaka kung mas madaling gamitin ng iyong pangkalahatang audience ang iyong website.
