Слой архитектора
Дизайн
Имя, адреса, мета и внешний вид этого проекта. Сохранённые настройки читаются на лету — изменение видно при следующей загрузке страницы, без пересборки.
Цвета
Семь ролей в двух темах и живая проверка контраста.
Семь ролей, две темы. Каждый цвет — перекрытие: не тронули — решает тема проекта.
Готовые решения
Одно нажатие задаёт все семь ролей в обеих темах. Дальше можно поправить что угодно — правка сохранится; нажмёте ту же схему снова — вернутся её значения.
Фирменный цвет
Кнопки, ссылки, активные состояния. Тот единственный цвет, который посетитель запомнит.
Акцент
Выделения и наведение — более тихий родственник фирменного цвета.
Фон страницы
То, на чём стоит всё остальное.
Текст
Основной цвет чтения.
Приглушённая поверхность
Карточки, панели, фон вспомогательных блоков.
Рамки
Линии между элементами — самый тихий цвет на странице.
Опасность
Удаление, ошибки, всё необратимое.
Диаграмма, ряд 1
Первый ряд данных на диаграмме — и единственный цвет, если ряд один.
Диаграмма, ряд 2
Второй ряд. Его читают рядом с первым, поэтому отличаться он обязан с первого взгляда.
Диаграмма, ряд 3
Третий ряд — для диаграмм, где сравнивают больше двух величин.
Диаграмма, ряд 4
Четвёртый ряд. Круговая и радиальная берут все пять.
Диаграмма, ряд 5
Пятый и последний: больше пяти цветов человек всё равно не различает.
Предупреждение
«Не получилось» — сообщение, а не отказ. Намеренно не цвет удаления: оно говорит «попробуйте снова», а не «сломалось».
Идёт запись
Цвет голосового поля, пока оно слушает. Это состояние, а не ошибка.
Как выглядит
Заголовок на странице
И основной текст под ним — тем цветом, которым его и будут читать.
КнопкаЧитаемо · 17.9:1
Текст на фоне страницы. Ниже 4,5 текст не проходит порог доступности для обычного размера.
Как цвета доходят до сайта и что считается за вас
Цвет надписи на кнопке считается, а не спрашивается. У каждой цветной роли есть парный цвет текста поверх неё. Смените фирменный цвет, оставив пару прежней, — и светлый фирменный цвет сохранит белый текст, то есть кнопку, надписи на которой не видно. Приложение выводит эту пару из яркости выбранного цвета, поэтому надпись остаётся читаемой при любом выборе.
Светлая и тёмная — разные значения. Цвет, заданный один раз, на второй теме почти всегда неверен: тёмный текст на тёмном фоне исчезает целиком. Задайте только ту тему, которая вам важна, — вторая сохранит цвета проекта.
Число контраста — это измерение, а не мнение. Это отношение яркостей текста и фона в том виде, в каком его определяет стандарт доступности. 4,5 — порог для обычного текста, 3,0 — для крупного. Ниже него страница не «дело вкуса»: часть ваших посетителей её не прочитает.