Сетка контраста палитры

Зачем проверять палитру целиком

Фирменные цвета обычно выбирают рядом друг с другом на доске, как образцы. Их редко выбирают парами, когда один написан поверх другого. Это аукается позже, когда разработчику нужен цвет ссылки на светлом фоне, подпись на акцентной панели и надпись на основной кнопке, и он выбирает из палитры на глаз.

Число пар растёт быстро. Для n цветов есть n × (n − 1) способов положить один на другой: это 12 для четырёх цветов, 30 для шести и 132 для двенадцати. Перебирать их по одной так долго, что этого никто не делает. Сетка делает это мгновенно и заодно показывает, как устроена палитра: какие цвета работают как «чернила», какие как «бумага», а какие годятся только для украшения.

Как читать сетку

Каждая строка это цвет текста, каждый столбец это фон. В ячейке показан образец «Aa» в этих двух цветах, коэффициент контраста WCAG, обрезанный до двух знаков после запятой, и одна из четырёх меток:

Коэффициент одинаков, какой бы цвет ни был сверху, поэтому таблица зеркальна относительно диагонали. Мы оставляем обе половины, потому что образцы выглядят по-разному. Тёмное на светлом и светлое на тёмном воспринимаются иначе даже при одинаковом числе. Меню Оставить приглушает все пары ниже выбранного порога. Выберите ячейку, чтобы открыть крупный предпросмотр с заголовком, абзацем, мелким шрифтом и кнопкой. Там же есть ссылка, которая отправляет пару в калькулятор контраста, а он может предложить близкий оттенок, который проходит.

Три списка под сеткой

Текст обычного размера

До восьми пар с контрастом 4,5:1 и выше, от самой сильной. Каждая пара показана один раз, с более светлым цветом в качестве фона, потому что так бывает чаще всего.

Только крупный текст и заголовки

До шести пар между 3:1 и 4,5:1. Они соблазнительны, потому что в макете при 40 px выглядят нормально. Поставьте их в абзац, и они не проходят.

Наборы для кнопок

В кнопке участвуют три цвета и две проверки. Надпись должна достигать 4,5:1 относительно кнопки, а сама кнопка 3:1 относительно страницы, иначе люди вообще не заметят, что это кнопка. Для каждого возможного цвета кнопки список даёт надпись с самым высоким контрастом и самый светлый фон страницы, который удовлетворяет обоим условиям.

Если первый список пуст, в палитре нет пары «чернила и бумага». Добавьте почти чёрный, например #1a1a1a, или почти белый, и сетка заполнится.

Как починить палитру, которой не хватает контраста

Большинство палитр не дотягивают одинаково: в них несколько средних тонов похожей светлоты. Бирюзовый, коралловый, горчичный и фиолетовый совсем не похожи друг на друга, и всё же ни один из них не может нести текст на любом другом. Три добавления исправляют почти любой случай:

1. Тёмный нейтральный для основного текста. Глубокий вариант главного фирменного оттенка справляется не хуже чёрного и при этом выглядит фирменно.
2. Светлый нейтральный для фона страниц и карточек, например почти белый с оттенком фирменного цвета.
3. Более тёмная ступень акцентного цвета для ссылок и кнопок. Снижайте светлоту, пока белый текст на нём не достигнет 4,5:1, а исходный акцент оставьте для крупных форм и иллюстраций.

Затем запишите результат в руководство по стилю как правила о парах, например «акцент только на белом, никогда под основным текстом». Со списком разрешённых пар люди ошибаются реже, чем со списком цветов.

Ввод, ссылки и ограничения

Разделяйте цвета запятыми или переносами строк. Подходят hex с # или без, rgb(), hsl() и названия цветов CSS. Дубли объединяются, а всё после двенадцатого цвета игнорируется. В адресной строке всегда хранится текущая палитра в виде ?c=1d3557,f1faee,…, поэтому скопированная ссылка снова открывает ту же сетку. Всё вычисляется в вашем браузере.