<
  • Главная
Статьи

Цветовой контраст для лучшей читаемости

  1. 1. Установите цветовую палитру (с оттенками, тонами и оттенками)
  2. 2. Найдите хороший анализатор цветовой контрастности
  3. 3. Изучите контраст основного текста
  4. 4. Оцените светимость кнопок и ссылок
  5. 5. Установите различные цветовые комбинации
  6. 6. Документ в вашем руководстве по стилю
  7. Резюме
  8. Смотрите также:

Когда вы создаете цветовые палитры для своих проектов веб-дизайна, тестируете ли вы сочетания цветов на контраст

Когда вы создаете цветовые палитры для своих проектов веб-дизайна, тестируете ли вы сочетания цветов на контраст? Если это не так, вы можете не учитывать возможную читабельность дизайна и, следовательно, потерять потенциальную аудиторию.

Я работал над процессом, чтобы помочь мне обеспечить хороший цветовой контраст и удобочитаемость в моих проектах. Благодаря некоторым полезным инструментам доступности цветового контраста, я думаю, что у меня есть кое-что, что работает, и я хотел бы поделиться с другими в том случае, если вам это тоже будет полезно.

Я должен отметить, что я далеко не эксперт по доступности. Моя цель здесь - просто показать, что небольшие усилия могут иметь большое значение, когда речь идет о выборе цветов с оптимальной читабельностью. Проверьте W3C для более подробного объяснения. Также, проверить контрастное восстание для интересного взгляда на проблему контраста.

1. Установите цветовую палитру (с оттенками, тонами и оттенками)

Хотя вы можете использовать инструменты цветового контраста, чтобы помочь вам в создании цветовой палитры, вы также можете использовать инструменты, чтобы помочь найти хорошие варианты в существующей палитре. В этом случае я использую существующую цветовую палитру и показываю, как я использую оттенки, тона и оттенки, чтобы помочь создать больше вариантов цветовой контрастности.

Моя рабочая цветовая палитра. Из предыдущей статьи, Добавить цвета в палитру с помощью смешивания цветов ,

Установление оттенков, тонов и оттенков. Из предыдущей статьи, От тьмы к свету: универсальность цвета с использованием оттенков, тонов и оттенков ,

2. Найдите хороший анализатор цветовой контрастности

В Интернете есть множество хороших инструментов для проверки контрастности цветов. Найдите тот, который подходит вам, и используйте его для тестирования цветовых комбинаций фона и переднего плана. Вот несколько вариантов:

Брент Джексон Colorable (Демо)

3. Изучите контраст основного текста

Во-первых, полезно установить хорошие значения основного текста. Я обычно начинаю с нейтральной цветовой палитры и нацеливаюсь на самый светлый серый с WCAG Рейтинг AAA (соответствует 508). Оценка AAA обеспечивает оптимальную читаемость, а некоторая яркость обеспечивает мягкость текста. Обратите внимание, что имена цветов - это пользовательские имена, которые я назначил цветам (из предыдущей статьи, Давать цветам больше красочных имен .)

Тестирование нейтральной цветовой палитры в виде текста на белом фоне (из предыдущей статьи: Оттенки серого - да, действительно .)

# 373D3F или "Ворон" - мой самый светлый серый в рейтинге доступности AAA.

4. Оцените светимость кнопок и ссылок

Следующий шаг - найти хороший вариант цвета для кнопок и ссылок (действий). Я придерживаюсь немного другого подхода. Вместо того, чтобы переходить на AAA, я ищу AA (разумный стандарт, к которому нужно стремиться), чтобы получить более яркий цвет для контрастирования со статическим текстом и привлечь внимание к важным ссылкам. Для этих целей я тестирую белый (#FFFFFF) в сочетании с различными цветами.

У синих и красных шансы на успех выше, а у желтых и зеленых не так много.

Я иду с "Darkest Alice" (# 107896) для хорошего сочетания контраста и яркости. "Рубин" (# C02F1D) тоже неплохой вариант.

5. Установите различные цветовые комбинации

Хорошо определить некоторые дополнительные цветовые комбинации для привлекающих внимание вызовов и других возможных потребностей.

Мой базовый пример с темно-серым текстом "Ворон" и ярким синим "Темная Алиса" для ссылок и кнопок.

Пример с темными на светлом фоне.

Пример с подсветкой на темном фоне.

6. Документ в вашем руководстве по стилю

Последний шаг - держать справочное руководство под рукой с результатами теста, добавляя примечания к своему стилю. Ваши клиенты и аудитория будут впечатлены тем, что ваши цвета выбраны по вдумчивым причинам - оптимальная читаемость - и вы пройдете тестирование качества с дополнительными опциями, если они вам понадобятся.

Образец документации для руководства по стилю.

Резюме

Это действительно все, что нужно, но вы можете разбить это на три, даже более простые части, если хотите:

  1. Чтение текста: в целях чтения найдите высококонтрастное сопряжение для большей части вашего тела (тяжелая работа).
  2. Ссылки на действия: Для ссылок изучите светящиеся и высококонтрастные цвета, чтобы было понятно, где находятся действия. (Если вы сделали это правильно, между текстом для чтения и ссылками действий будет некоторый контраст.)
  3. Extra, Extra !: Создание и документирование различных цветовых комбинаций для вызовов, призванных привлечь дополнительное внимание.

Смотрите также:

Примечание. Эта статья является частью серии статей о цвете, так как она относится к веб-дизайну. Для больше в серии, проверьте эти статьи:



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью