Jūsų prekės ženklo spalvos turi stiprų emocinį poveikį, bet kaip jos atrodo silpnaregiams, daltonakams arba susiduriantiems su aplinkos veiksniais, kurie apsunkina matomumą?
Spalvų ir kontrasto lygiai yra labai svarbūs komunikacijai, o tinkamas šios detalės yra labai svarbios prieinamumą besirūpinančiam dizaineriui.
Spalvų suvokimo sutrikimai yra dažnesni, nei jūs manote. Taigi, šiame įraše kalbėsime apie tai, kaip žmonės su negalia, pvz., silpnaregiai, disleksija ir daltonizmas, sąveikauja su žiniatinkliu.
Turinys
Kaip naudoti spalvų tikrintuvą, kad pagerinčiau savo svetainės prieinamumą?
Šis skyrius iš tikrųjų yra gana paprastas, nors ir reikalauja tam tikrų pastangų. Turėsite naudoti WebAIM internetinį kontrasto tikrinimo įrankį. WebAIM yra ne pelno siekianti organizacija, įsikūrusi Jutos valstijos universitete, kurios misija yra pagerinti žiniatinklio prieinamumą visame pasaulyje.
Tiesiog įveskite priekinio plano spalvą (pvz., teksto arba piktogramų spalvą) ir fono spalvą kaip šešioliktaines reikšmes (taip pat žinomas kaip šešioliktainės reikšmės), kaip nurodyta HTML arba CSS, o kontrasto santykio tikrintuvas jus informuos, ar santykis yra pakankamas. Atminkite, kad minimalus kontrasto santykis, kurio turėtumėte siekti, yra 4.5:1. Juodo teksto baltame fone kontrasto santykis yra 21:1, todėl turite daug veiksmų laisvės.
5 įrankiai, skirti sukurti interneto spalvų paletę, kurią gali matyti visi
1. WebAIM spalvų kontrasto tikrintuvas
Įveskite šešioliktaines priekinio plano ir fono spalvas. Išvestis rodo įprasto ir didelio teksto AA ir AAA atitiktį kartu su sakinio pavyzdžiu. Slankikliai leidžia keisti dalykus, kol rasite gerą derinį.
stiprybės
- Paprastas įrankis su sąsaja, kuri maloni akims.
- Tai puikus, paprastas įrankis pradedantiesiems, o ne tik dizaineriams.
Trūkumai
- Negalima palyginti daugiau nei dviejų spalvų, tik dvi.
- Šviesumo slankiklis nėra labai geras būdas pasirinkti spalvas. Sunku pasakyti, kokios patrauklios spalvos šiame paprastame ekrane.
2. WCAG kontrasto tikrintuvas
Įveskite šešioliktaines priekinio plano ir fono spalvas. Rodo AA ir AAA atitiktį įprastam ir dideliam tekstui šalia Lorem Ipsum teksto pavyzdžio. Taip pat galite įkelti nuotrauką. 9 spalvų paletė jums parenkama automatiškai. Tada galite palyginti kiekvieną spalvą kaip priekinio plano arba fono spalvą.
stiprybės
- Paprastas įrankis su patogia sąsaja.
- Galimybė iš vaizdų daryti paletes.
Trūkumai
- Paletė parenkama automatiškai, ir jūs galite ją toliau keisti naudodami spalvų parinkiklį, tačiau tie pakeitimai nėra išsaugomi atgal į paletę. Informaciją reikia nukopijuoti ir įklijuoti į naują dokumentą.
3. Spalvų kubas
Įveskite paletės spalvas savo eilutėje. Išvestis rodo pavyzdines raides su kontrasto santykiu, palyginti su mažų ir didelių šriftų AA standartais. Trys stulpeliai rodo kontrastą su baltu fonu, juodu fonu ir prekės ženklo spalvų rinkiniu, kuris yra „labiausiai įskaitomas iš galimų“.
stiprybės
- Lengvai matomas Vartotojo sąsaja (UI) yra gerai sutvarkyta, o būseną „Pavyko / Nepavyko / Edge“ lengva pamatyti.
Trūkumai
- Neatitinka AAA nustatytų standartų.
- Nedaro visų galimų spalvų derinių, ir iš pradžių neaišku, ar taip yra.
4.) Aštuonių formų kontrastinis tinklelis
Įveskite paletės spalvas. Be to, kiekvienai spalvai galite suteikti pavadinimą. Programėlė sukuria lentelę su visais įmanomais spalvų deriniais. Yra trijų dydžių plytelės. Yra vaizdinių užuominų apie AA ir AAA atitikimą / nesėkmę / kraštą ir efektyvų kontrasto santykį. Stulpelius ir eilutes programoje galima perkelti vilkdami ir numesdami. Lentelės duomenis galima išsaugoti, eksportuoti ir bendrinti.
stiprybės
- Yra daug naudingų funkcijų, kurios padeda analizuoti visas paletes.
Trūkumai
- Tai sunkiau išmokti nei kitų įrankių, kuriuos lengviau naudoti.
- Netinkamas būdas palyginti tik dvi spalvas.
- Netinka išsiaiškinti, kaip spalvos dera kartu.
- Šiek tiek pribloškiantis, bet rodoma daug informacijos.
5. Spalva saugus
Įveskite fono spalvą. Pasirinkite šrifto šeimą, dydį ir svorį. Kaip standartą pasirinkite AA arba AAA. Rodo pasirinktą spalvą ir jos šešioliktainį kodą, taip pat pavyzdį ir efektyvų kontrasto santykį. Didelės galimų priekinio plano spalvų miniatiūros su pakankamai kontrastu yra geriausia dalis. Galite pasirinkti peržiūrėti juos visus arba tik tam tikras spalvų grupes (žalia, mėlyna, violetinė ir kt.)
stiprybės
- Naudojant sąsają, kuri maloni akims, lengva rasti gerai atrodantį ir gerai veikiantį spalvų derinį.
- Tai naudinga priemonė, jei dar neturite prekės ženklo spalvų paletės arba norite pridėti prie tokios, kurią jau turite žiniatinklyje.
Trūkumai
- Vienu metu galite palyginti tik priekinio plano ir fono spalvas.
- Jei norite jas išsaugoti, spalvas turite nukopijuoti ir įklijuoti į atskirą dokumentą.
- Išeik ir sukurk dalykų visiems!
Sužinoję, kaip naudoti šiuos įrankius, galite pastebėti, kad projektui reikės daugiau nei vieno. Galbūt Color Cube yra geriausias būdas parodyti klientui, ką sužinojote apie pritaikymą neįgaliesiems. Galbūt visą laiką naudosite WebAIM įrankį, kad atliktumėte greitus patikrinimus vietoje.
Išvada
Naudodami patarimus, gaires ir įrankius, apie kuriuos ką tik kalbėjome, galite suteikti savo svetainei didelio kontrasto spalvas ir etiketes. Taip silpnaregiams, disleksijos ir daltonizmo žmonėms bus lengviau skaityti jūsų svetainę ir turinį. Nenustebkite, jei jūsų bendrajai auditorijai taip pat bus lengviau naudotis jūsų svetaine.
