Цветовая слепота или дальтонизм — это особенность зрения человека, которая есть у 8% мужчин и 0,5% женщин. Люди с цветовой слепотой видят цвета по-другому, и в некоторых случаях статьи вашей вики могут быть трудночитаемы или совсем нечитаемы для них. Если вы невнимательно отнесётесь к подбору цветового оформления вашей вики, вы можете потерять до 10% аудитории. А в этом проценте могут быть потенциальные редакторы.
Подробнее о цветовой слепоте[]
Важно понять, что люди с цветовой слепотой не являются слепыми. Это обычные люди, которые просто воспринимают этот мир в несколько другой цветовой гамме, чем большинство людей. Так, тёмно-красный цвет для них может стать коричневым или зелёным, а зелёный — серым или оранжевым.
Наиболее яркий пример проблем для людей с цветовой слепотой — это красные ссылки на чёрном фоне. Чёрный фон используется на многих вики, и для людей с данной особенностью цветового восприятия эти ссылки будут сливаться с фоном.
Решение проблемы для вики[]
Как было написано выше, подстраивая цвета вики исключительно под своё восприятие цвета, вы лишаете вики почти 10% аудитории. Поэтому следуйте следующим советам при подборе цветовой гаммы вики:
- Контраст между фоновым цветом и текстом должен быть максимальным. Если фон вики тёмный, текст должен быть максимально светлым, и наоборот. Самый высокий коэффициент контрастности имеет соотношение чёрный-белый - 21. Есть множество других сочетаний цветов фона и шрифта, которые дают приемлемый коэффициент контрастности: 7.0 и выше. Именно эта цифра считается пограничной для хорошего оформления сайта. Сравнить различные цветовые сочетания фона и шрифта и получить коэффициент контрастности для них можно на этом сайте https://colorable.jxnblk.com/
- При выборе цвета ссылок не забывайте о «красных ссылках». Особенно на первом этапе развития вики на ваших страницах будет много «красных ссылок». Они могут быть совершенно нечитаемы для людей с цветовой слепотой, если ссылки сохранят красный цвет, а фон будет тёмным. Чтобы задать цвет «красных ссылок», добавьте в CSS следующий код:
.page-content a.new { color: Номер цвета; }
.page-content a.new:visited { color: Номер цвета; }
- Настраивая цвета вики через Конструктор тем, не забывайте об остальных цветах вики, в первую очередь о цветах инфобоксов и других шаблонов. Если вы не используете в них цвета, заданные по умолчанию через Конструктор тем, то также обратите внимание на контраст фона шаблонов, линий и цвета текста внутри шаблонов. Кстати, грамотное использование градиентов цветов также помогает сделать цвета шаблонов контрастнее.
- Избегайте причудливых сочетаний цветов. Выбор цветовой гаммы вики по принципу «Мне так нравится!» — это ошибка. Грамотный подбор цветовой гаммы вики позволит вашему сайту выглядеть привлекательно в глазах любого пользователя. Советы по подбору цветовой гаммы вики можно найти в этом блоге.
Решение проблемы для себя[]
Очевидно, что не всегда администраторы вики готовы идти навстречу участникам с цветовой слепотой. Например, если сочетание красного и чёрного цветов является фирменной цветовой гаммой темы вики или если сами администраторы привыкли к цветам своей вики и не желают их менять ради одного активного участника. В этом случае участникам не нужно бороться с трудночитаемым текстом или покидать вики. Они могут использовать персональный CSS.
С помощью персонального CSS можно подстроить цветовую гамму вики под своё личное восприятие цветов. Во многих случаях достаточно изменить цвет текста, фона или «красных ссылок», чтобы решить проблему.
Проверка вида страниц при цветовой слепоте[]
- Google Chrome/Microsoft Edge (Chromium) — установите расширение Colorblindly (автор oftheheadland); доступно 8 опций для проверки: ахроматомалия, ахроматопсия, дейтераномалия, дейтеранопия, протаномалия, протанопия, тританомалия, тританопия.
- Firefox — установите расширение Let's get color blind (автор Nullbrains).