Цветовете на вашата марка имат силно емоционално въздействие, но как изглеждат те на посетителите на сайта, които са с частично зрение, далтонисти или са изправени пред фактори на околната среда, които затрудняват видимостта?
Нивата на цвят и контраст са от решаващо значение за комуникацията и получаването на тези детайли точно е от решаващо значение за дизайнера, ориентиран към достъпността.
Нарушенията в цветовото възприятие са по-чести, отколкото си мислите. И така, в тази публикация ще говорим за това как хората с увреждания като слабо зрение, дислексия и цветна слепота взаимодействат с мрежата.
Съдържание
Как да използвам инструмент за проверка на цветовете, за да подобря достъпността на моя уебсайт?
Този раздел всъщност е доста прост, въпреки че изисква известно усилие. Ще трябва да използвате онлайн инструмента за проверка на контраста на WebAIM. WebAIM е организация с нестопанска цел, базирана в държавния университет на Юта, с мисията да подобри достъпността на мрежата в световен мащаб.
Просто въведете своя цвят на преден план (напр. цвета на вашия текст или икони) и цвета на фона като шестнадесетични стойности (известни също като шестнадесетични стойности), както е посочено в HTML или CSS и инструментът за проверка на съотношението на контраста ще ви информира дали съотношението е достатъчно. Не забравяйте, че минималното контрастно съотношение, което трябва да търсите, е 4.5 към 1. Черният текст на бял фон има контрастно съотношение 21 към 1, така че имате голяма свобода на действие.
5 инструмента за създаване на уеб цветова палитра, която всеки може да види
1. WebAIM Color Contrast Checker
Въведете шестнадесетичните цветове за преден план и фон. Резултатът показва съответствие с AA и AAA за нормален и голям текст, заедно с примерно изречение. Плъзгачите ви позволяват да променяте нещата, докато намерите добра комбинация.
Силни
- Прост инструмент с интерфейс, който е лесен за очите.
- Това е хубав, прост инструмент за начинаещи, а не само за дизайнери.
Слабости
- Не могат да се сравняват повече от два цвята, само два.
- Плъзгачът за лекота не е много добър начин за избор на цветове. Трудно е да се каже колко привлекателни са цветовете в този прост дисплей.
2. Проверка на контраста за WCAG
Въведете шестнадесетичните цветове за преден план и фон. Показва съответствие на AA и AAA за нормален и голям текст до извадка от текст на Lorem Ipsum. Можете също да качите снимка. 9-цветна палитра се избира автоматично за вас. След това можете да сравните всеки цвят като преден или фонов цвят.
Силни
- Прост инструмент с удобен за потребителя интерфейс.
- Да има способността да прави палети от изображения.
Слабости
- Палитрата се избира автоматично и можете да я промените допълнително с инструмента за избор на цвят, но тези промени не се записват обратно в палитрата. Трябва да копирате и поставите информацията в нов документ.
3. Цветен куб
Въведете цветовете за палитрата, всеки на свой ред. Резултатът показва примерни букви с контрастни съотношения в сравнение със стандартите AA за малки и големи шрифтове. Три колони показват контраст с бял фон, черен фон и набор от цветове на марката, които са „Най-четливите от наличните“.
Силни
- Удобен за очите Потребителският интерфейс (UI) е добре организиран и състоянието на преминаване/неуспех/ръб се вижда лесно.
Слабости
- Не отговаря на стандартите, определени от AAA.
- Не прави всяка възможна цветова комбинация и в началото не е ясно дали това е така.
4.) Контрастна мрежа с осем форми
Въведете цветовете на палитрата. Освен това можете да дадете име на всеки цвят. Приложението прави таблица с всяка възможна комбинация от цветове. Има три размера плочки. Има визуални знаци за AA и AAA преминаване/неуспех/ръб и ефективно съотношение на контраста. Колоните и редовете могат да се местят в приложението чрез плъзгане и пускане. Табличните данни могат да се запазват, експортират и споделят.
Силни
- Има много полезни функции, които помагат при анализа на цели палитри.
Слабости
- По-трудно е да се научи от други инструменти, които са по-лесни за използване.
- Не е правилният начин да сравнявате само два цвята.
- Не е добре да разберете как цветовете вървят заедно.
- Малко невероятно за гледане, но се показва много информация.
5. Безопасен цвят
Въведете цвета на фона. Изберете семейството, размера и теглото на шрифта. Изберете AA или AAA като стандарт. Показва избрания цвят и неговия шестнадесетичен код, както и образец и ефективното контрастно съотношение. Големите миниатюри на възможни цветове на преден план с достатъчно контраст са най-добрата част. Можете да изберете да ги разгледате всички или само определени цветови групи (зелени, сини, лилави и т.н.)
Силни
- С интерфейс, който е лесен за очите, лесно е да намерите комбинация от цветове, която изглежда добре и работи добре.
- Това е полезен инструмент, ако все още нямате цветова палитра на марката или ако искате да добавите към такава, която вече имате за мрежата.
Слабости
- Можете да сравнявате само цветовете на преден план и фон наведнъж.
- Трябва да копирате и поставите цветовете в отделен документ, ако искате да ги запазите.
- Излезте и направете неща за всички!
След като научите как да използвате тези инструменти, може да откриете, че имате нужда от повече от един за даден проект. Може би Color Cube е най-добрият начин да покажете на клиента какво сте научили за достъпността. Може би ще използвате инструмента на WebAIM през цялото време, за да правите бързи проверки на място.
Заключение
Използвайки съветите, насоките и инструментите, за които току-що говорихме, можете да придадете на уебсайта си цветове и етикети с висок контраст. Това ще улесни хората със слабо зрение, дислексия и цветна слепота да четат вашия уебсайт и съдържание. Не се изненадвайте, ако за широката ви аудитория също е по-лесно да използва уебсайта ви.
