Цветна слепота и уеб дизайн: какво да знаете

По-често, отколкото повечето дизайнери осъзнават

Нарушеното цветно зрение — обикновено наричано цветна слепота — засяга приблизително 8% от мъжете и 0,5% от жените. Това са около 1 на 12 мъже и 1 на 200 жени, което го прави по-разпространено от повечето други увреждания, които стандартите за уеб достъпност адресират.

И все пак то рутинно се пренебрегва в дизайна. Екипи тестват с екранни четци и клавиатурна навигация, стартират автоматизирано WCAG сканиране и смятат работата по достъпността за завършена — без изобщо да проверят дали цветовата им палитра е четима за потребители с цветна слепота.

Разбирането на цветната слепота и какво всъщност причинява тя на уеб интерфейсите, които проектирате, е първата стъпка към поправянето ѝ.

Видовете и какво причиняват

Нарушеното цветно зрение се среща в няколко форми и те не произвеждат едно и също изживяване.

Червено-зелени дефицити (най-чести)

Protanopia — пълно отсъствие на червените конусни фоторецептори. Червеното изглежда тъмно или черно. Червено-зелените разграничения се губят.

Protanomaly — намалена чувствителност към червеното. Червеното, оранжевото и жълтото се изместват към зеленото, а цялостното изживяване е по-приглушено, сякаш червеният канал е намален.

Deuteranopia — пълно отсъствие на зелените конусни рецептори. Най-честата форма на цветна слепота. Зеленото и червеното се бъркат; светът изглежда сякаш е филтриран през жълто-кафява леща.

Deuteranomaly — намалена чувствителност към зеленото. Подобно на deuteranopia, но по-леко. Най-разпространеният тип като цяло, засягащ около 5% от мъжете.

Синьо-жълти дефицити (по-редки)

Tritanopia — отсъствие на сините конусни рецептори. Синьото изглежда зелено, а жълтото изглежда бледо или невидимо. Рядко.

Tritanomaly — намалена чувствителност към синьото. Синьо-зеленото и червено-лилавото се бъркат.

Монохромазия (много рядка)

Achromatopsia — отсъствие на всички цветни конусни рецептори. Възприема се само яркост; светът изглежда в оттенъци на сивото. Често придружено от светлочувствителност и намалена зрителна острота.

Как цветната слепота нарушава често срещаните уеб модели

Познаването на видовете в абстракция е по-малко полезно от познаването на това кои конкретни дизайнерски решения причиняват проблеми. Ето най-често срещаните.

Състояния на грешка, обозначени само с червено

Оцветяването на границата на поле от формуляр в червено, за да се покаже грешка при валидиране, е един от най-разпространените модели в уеб дизайна. За потребители с червено-зелен дефицит червеното върху бяло или червеното върху сиво може да е почти невидимо или неразличимо от нормално нефокусирано състояние.

Това е покрито директно от WCAG 2.2 1.4.1 Използване на цвят (ниво A): цветът не трябва да е единственото средство за предаване на информация, посочване на действие, подканване за отговор или разграничаване на визуален елемент.

Поправката е ясна: съчетайте цвета с втори визуален индикатор — икона, текстов етикет, промяна в дебелината на границата или всякакъв друг нецветен сигнал.

<!-- Разчитане само на цвят: не покрива 1.4.1 -->
<input type="email" class="field--error">

<!-- Цвят плюс икона плюс текст: покрива -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Въведете валиден имейл адрес.
  </p>
</div>

Недостатъчен контраст

Ниският контраст е отделен проблем от цветната слепота, но те се пресичат. Много цветови палитри, които изглеждат четими за типичното цветно зрение, стават още по-трудни за четене при нарушено цветно зрение, защото възприеманата разлика между преден план и фон се свива допълнително.

WCAG 1.4.3 изисква минимално съотношение на контраст 4.5:1 за нормален текст и 3:1 за голям текст. Тестването на контраста с инструмент като избора на цвят в DevTools на браузъра или специализиран проверител не подлежи на договаряне — не разчитайте на визуален оглед.

Визуализация на данни, кодирана само в цвят

Кръгова диаграма с шест сегмента, разграничени само по цвят. Карта с градиент от червено към зелено. Линейна диаграма, където четири набора от данни се различават единствено по нюанс.

За потребителите с deuteranopia червеното и зеленото стават неразличими. Смисълът на диаграмата се срива изцяло. За повече по темата вижте нашето ръководство за достъпна визуализация на данни.

Връзки, които разчитат само на цвета, за да се откроят от основния текст

По подразбиране браузърите подчертават връзките. Много дизайнери премахват това подчертаване и разчитат само на цвета, за да отличат връзките от заобикалящия текст. Потребителите с нарушено цветно зрение — и особено тези, използващи теми с нисък контраст — може изобщо да не разпознаят връзките.

WCAG 1.4.1 важи и тук. Ако цветът на връзката е единственият визуален индикатор (без подчертаване, без удебеляване, без друг разграничител), връзката не е достъпна за потребители с цветна слепота.

Най-простата поправка: възстановете подчертаването. Като алтернатива, уверете се, че цветът на връзката има достатъчен контраст спрямо както цвета на основния текст, така и фона.

Проектиране с мисъл за цветната слепота

Използвайте излишно кодиране

Добавете втори визуален канал наред с цвета. В диаграмите: добавете шарки, текстури или етикети на данни. В индикаторите за състояние: добавете икони. В състоянията на формулярите: добавете текст. Целта е човек, който напълно премахне цвета от дизайна, все още да може да разбере всичко.

Тествайте с инструменти за симулация

Chrome DevTools има вградена симулация на цветна слепота. Отворете DevTools > панел Rendering > „Emulate vision deficiencies”. Можете да симулирате protanopia, deuteranopia, tritanopia и achromatopsia.

Figma и други дизайнерски инструменти имат подобни приставки. Стартирането на симулация отнема секунди и често разкрива проблеми, които не са били видими при стандартна визуализация.

Проверете палитрата си като цяло

Не тествайте само отделни двойки елементи. Погледнете цялата палитра заедно: основни, вторични, за грешка, за успех, за предупреждение и за информация цветове. При симулация на deuteranopia червеното за грешка и зеленото за успех изглеждат ли подобни? Ако е така, имате проблем, независимо дали съотношенията ви на контраст технически покриват изискванията.

Избягвайте проблематични комбинации

Особено ненадеждни при нарушено цветно зрение:

• Червено и зелено
• Зелено и кафяво
• Синьо и лилаво
• Зелено и сиво
• Зелено и черно

Когато тези двойки трябва да се появят в един и същ контекст, разграничете ги чрез светлота или шарка, а не чрез нюанс.

Какво покрива WCAG и какво не

WCAG покрива контраста на цветовете (1.4.3, 1.4.11) и забраната за използване на цвета като единствено средство за предаване на информация (1.4.1). Той не уточнява кои цветове можете или не можете да използвате, нито изисква цялата ви палитра да бъде възприемаема при всеки тип нарушено цветно зрение.

Това, което изисква, е никакъв смисъл да не се губи, когато цветът бъде премахнат. Това е практическият тест. Премахнете цвета от дизайна си. Остава ли всяко парче информация достъпно чрез други средства?

Ако отговорът е да, изпълнили сте изискването. Ако състоянията на грешка изчезнат, ако данните в диаграмата станат двусмислени, ако връзките станат невидими — имате работа за вършене.

Нашите одити за достъпност включват достъпността на цветовете като стандартна част от прегледа. Ако искате да знаете къде стои текущият ви дизайн, стартирайте безплатно автоматизирано сканиране, за да уловите автоматизируемите проблеми като отправна точка.