Цветовая схема сайта
Самая частая ошибка самодельного сайта — светло-серый текст на белом фоне и белые буквы на светлой кнопке. Инструмент показывает реальное отношение контраста для каждой пары, чтобы это было видно до публикации, а не после жалоб.
#28c890#101010#f4fcf9#ffffff#101916#646a68#dedfdeОбычный текст, который читают дольше двух секунд. Он должен быть контрастным.
Минимум по стандарту доступности — 4.5 для обычного текста и 3 для крупного. Если пара не проходит, затемните текст или осветлите фон.
:root {
--primary: #28c890;
--primary-fg: #101010;
--bg: #f4fcf9;
--surface: #ffffff;
--fg: #101916;
--muted: #646a68;
--border: #dedfde;
}Сколько цветов нужно сайту
Трёх достаточно: фон, текст и один акцент для кнопок и ссылок. Всё остальное — оттенки этих трёх. Сайты выглядят собранными не из-за удачной палитры, а из-за её экономности: когда каждый блок красят в новый цвет, страница распадается на лоскуты, даже если каждый цвет сам по себе хорош.
Акцент работает, только пока его мало. Если им выделены и кнопки, и заголовки, и плашки, кнопка перестаёт быть заметной — глазу не за что зацепиться. Правило простое: акцентным цветом красим то, на что хотим нажатия.
Что такое контраст и почему он важнее вкуса
Контраст — числовое отношение яркости текста к фону. Для обычного текста нужно не меньше 4,5, для крупных заголовков достаточно 3. Это не вкусовщина: при меньшем значении текст физически трудно читать людям со слабым зрением и всем остальным на солнце. Инструмент считает это отношение для каждой пары и показывает, где палитра не проходит.
Как пользоваться
- Задайте основной цвет — из логотипа или любой, который нравится.
- Посмотрите на предложенные оттенки: фон, поверхности, границы, текст.
- Проверьте отметки контраста: красная означает, что пара нечитаема.
- Скопируйте CSS-переменные или просто назовите цвета агенту.
Частые вопросы
Можно ли взять цвета с чужого сайта?
Цвет не охраняется авторским правом, повторить палитру можно. Но проверьте контраст: то, что работает с их шрифтами и фоном, у вас может читаться хуже.
Нужна ли тёмная тема?
Для сайта услуг редко: светлый сайт привычнее и проще в поддержке. Тёмные уместны у студий и портфолио, где важнее настроение, чем чтение цен.
Что делать, если фирменный цвет не проходит по контрасту?
Используйте его для акцентов и плашек, а для текста и кнопок возьмите его затемнённый вариант — узнаваемость сохранится, читаемость появится.