Как подобрать доступные цвета для сайта
Хорошие цвета — те, которые может прочитать каждый. Эти пять шагов помогут сохранить фирменные цвета и выполнить требования WCAG к контрасту.
Открыть инструмент: Выбор цвета и проверка контраста
Сначала проверьте фирменный цвет
Прежде чем что-то рисовать, проверьте основной цвет на белом и на чёрном. Синий из примера #3366CC даёт 5,36:1 на белом, что соответствует AA для обычного текста, но только 3,91:1 на чёрном — этого хватает лишь для крупного текста.
Проверяйте оба направления: цвет как текст на светлом фоне и белый или чёрный текст поверх цвета, например на кнопках.
Исправляйте контраст через светлоту
Другой цвет нужен редко. Обычно достаточно сделать его чуть темнее или светлее, сохранив тон. Именно так работает подсказка в инструменте:
| Исходный | На белом | Исправленный | На белом |
|---|---|---|---|
| #FF0000 | 3,99:1 | #EE0000 | 4,53:1 |
| #FFA500 | 1,97:1 | #A66900 | 4,52:1 |
| #777777 | 4,47:1 | #767676 | 4,54:1 |
Постройте палитру из оттенков
Одного фирменного цвета мало для целого интерфейса. Светлые (смешение с белым) и тёмные (смешение с чёрным) оттенки того же тона дают подходящие фоны, рамки и состояния при наведении. Для #3366CC оттенок на 50 % светлее — #99B3E6, на 50 % темнее — #1A3366.
Светлые оттенки используйте для фона, тёмные — для текста, и проверяйте каждую пару текста и фона, которая реально встречается на сайте.
Не передавайте информацию только цветом
Критерий 1.4.1 WCAG «Использование цвета» (уровень A) требует, чтобы цвет не был единственным способом передать информацию. Многие люди с нарушениями цветового зрения не различают некоторые цвета, чаще всего красный и зелёный.
Подчёркивайте ссылки в тексте, добавляйте к сообщениям об ошибках значок или слово, подписывайте линии графиков прямо на графике, а не только в цветной легенде.
Чек-лист
Перед публикацией проверьте:
- Основной текст имеет контраст не ниже 4,5:1 с фоном.
- Крупные заголовки — не ниже 3:1.
- Рамки полей, индикатор фокуса и значки — не ниже 3:1.
- Ссылки, ошибки и обязательные поля выделены не только цветом.
- Текст на фото и градиентах проверен по самому светлому участку под ним.