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 !: Создание и документирование различных цветовых комбинаций для вызовов, призванных привлечь дополнительное внимание.

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

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

Похожие

Комментарии