ПаветтаКонвертер цветов и контраст
Переводит цвет между HEX, RGB и HSL и сразу считает контраст с фоном по формуле WCAG. За переводом цвета обычно идут ради вёрстки, а там следующий вопрос — читается ли текст: калькулятор отвечает на оба сразу и показывает живой пример заголовка и строки на выбранном фоне.
———А так — строка обычного текста этим цветом на выбранном фоне.
Записи цвета и порог контраста
Конвертер переводит цвет между записями HEX, RGB, HSL, HWB и OKLCH и сразу считает контраст с белым и чёрным текстом по рекомендациям доступности.
Разные записи удобны для разных задач. Шестнадцатеричная компактна и привычна в вёрстке, RGB понятна машине, HSL удобна человеку для правок, OKLCH построена так, что равные изменения светлоты выглядят равными.
Контраст считается как отношение относительных яркостей двух цветов и лежит в пределах от 1 до 21. Порог для обычного текста — 4,5, для крупного и для элементов интерфейса — 3.
Отдельно инструмент подбирает ближайший цвет, проходящий порог: если ваш оттенок не дотягивает, он показывает, насколько его нужно затемнить или осветлить, сохраняя тон.
| Запись | Чем удобна |
|---|---|
| HEX | Компактность, привычка |
| RGB | Прямое соответствие каналам |
| HSL | Правка тона и светлоты |
| OKLCH | Равномерность по восприятию |
Рекомендации 2008 года и появление OKLCH
Требования к контрасту закреплены в рекомендациях по доступности веб-содержимого. Версия 2.0, вышедшая в 2008 году, ввела численные пороги 4,5 и 3, и они с тех пор перекочевали в законодательство многих стран.
Формула относительной яркости в этих рекомендациях восходит к телевизионным стандартам: коэффициенты для красного, зелёного и синего взяты из спецификации цветового пространства для телевидения высокой чёткости.
Формулу критикуют за то, что на тёмных фонах она даёт заниженные оценки: светлый текст на тёмном фоне по ней часто проваливает порог, оставаясь читаемым. Работа над новым алгоритмом идёт с 2019 года.
Пространство OKLCH опубликовано в 2020 году и решает старую проблему: в HSL два цвета с одинаковой светлотой могут выглядеть совершенно по-разному по яркости, а в OKLCH — одинаково. Для построения палитр это принципиально.
Что проверять в интерфейсе
Проверяйте контраст на всех парах цветов. Ссылка, подпись, плейсхолдер и отключённая кнопка проваливают порог чаще всего.
Правьте светлоту. Затемнение цвета сохраняет фирменный оттенок и проходит порог, тогда как смена тона меняет узнаваемость.
Пересчитывайте контраст при смене фона. Кнопка, проходившая порог на белом, на сером блоке проваливает его, и таких мест на странице обычно несколько.
Помните про крупный текст. Заголовок от 24 пикселей или от 19 полужирным попадает под порог 3, и требования к нему мягче.
Учтите состояния элементов. Наведение, фокус и нажатие меняют цвет, и каждое состояние проверяется отдельно — чаще всего проваливается именно отключённая кнопка.
Для тёмной темы проверяйте отдельно. Цвета, работающие на белом, на тёмном фоне обычно нуждаются в осветлении, иначе теряются.
Проверяйте текст поверх изображений отдельно. На фотографии контраст меняется от участка к участку, и надёжнее подложить полупрозрачную плашку, чем подбирать цвет.
Для печати помните: контраст на бумаге ниже экранного, и пара, едва проходящая порог, в печати станет нечитаемой.
Не полагайтесь на цвет как единственный признак. Ошибку в форме, помеченную только красной рамкой, не увидит примерно каждый двенадцатый мужчина — нужен ещё значок или текст.
Проверяйте контраст на реальном фоне. Текст поверх фотографии или градиента меняет контраст по площади, и одна проверка тут не помогает.
Сохраняйте палитру в одной записи. Смешение шестнадцатеричных и HSL-значений в одном файле стилей затрудняет правки и приводит к незаметным расхождениям оттенков.
Подобрать оттенки поможет генератор оттенков, а взять случайный цвет — генератор цветов.
| Записей | пять |
| Диапазон контраста | от 1 до 21 |
| Обычный текст | 4,5 |
| Крупный текст | 3 |
| Крупный — это | от 24 px или 19 px жирным |
| Рекомендации 2.0 | 2008 |
| OKLCH | 2020 |
| Цвет как единственный признак | недопустим |
Как пользоваться
Рядом шкала оттенков одного тона, из которой удобно собирать состояния кнопок и ссылок.
- Пипеткой, полем ввода или вставкой: понимает #RRGGBB, короткий #RGB, rgb() и hsl().
- Три строки с HEX, RGB и HSL, у каждой кнопка копирования.
- Задайте цвет фона — рядом появится отношение по WCAG и ответ, проходит ли оно для обычного и крупного текста.
- Десять ступеней от светлого к тёмному в том же тоне. Клик подставляет цвет в поле.
Частые вопросы
Что такое контраст по WCAG и почему 4.5?
Это отношение яркости текста к яркости фона, от 1 (одинаковые) до 21 (чёрное на белом). Порог 4,5 к одному — уровень AA для обычного текста: при нём страницу читают и люди со сниженным зрением, и любой человек с экраном на солнце. Для крупного текста от 18 пунктов порог мягче — 3 к одному.
Чем HSL удобнее HEX?
В HSL цвет задан тоном, насыщенностью и светлотой. Чтобы получить более тёмный вариант того же цвета, достаточно уменьшить светлоту, тогда как в HEX пришлось бы подбирать три числа наугад. Поэтому состояния кнопок и ссылок удобно строить именно в HSL, а в вёрстку отдавать уже HEX.
Почему цвет с контрастом 3 помечен как негодный для текста?
Такое отношение проходит для крупных заголовков и элементов интерфейса вроде границ и иконок, но для основного текста его мало. Калькулятор разводит эти два случая отдельными строками, чтобы решение принималось осознанно.
Можно ли вставить цвет прямо из макета?
Да. Поле принимает и HEX с решёткой и без, и запись rgb(59, 79, 216), и hsl(232, 58%, 54%). Регистр значения не имеет.
Как пользоваться шкалой оттенков?
Она берёт тон и насыщенность вашего цвета и раскладывает светлоту на десять ступеней. Из соседних ступеней получаются наведение и нажатое состояние кнопки, из дальних — фон блока под тот же акцент.
Что означает уровень AAA?
Строгий порог доступности — 7 к одному для обычного текста. Он нужен там, где читаемость критична, и его редко удаётся выдержать на цветных акцентах. Калькулятор отмечает, когда запас позволяет.
Спросите нейросети об инструменте
Похожие инструменты
Шкала от 50 до 950 по одному цвету: осветление, затемнение и приглушение. Контраст каждой ступени и выгрузка в CSS, SCSS и Tailwind.
ОткрытьГенератор случайных цветовСлучайный цвет или палитра из пяти с фиксацией удачных. Диапазоны тона, насыщенности и светлоты, пресеты пастели и тёмных.
ОткрытьКалькулятор стоимости токеновСколько выйдет за месяц работы с моделью ИИ у пяти сервисов доступа из России: ввод и вывод считаются отдельно, рядом цена самого разработчика модели.
ОткрытьИгры SteamКаталог игр: цены в шести странах, скидки, онлайн, трейлеры и история наблюдений.
ОткрытьВиртуальная клавиатураЭкранная клавиатура для ввода мышью: русская ЙЦУКЕН и английская QWERTY, Shift и Caps Lock, цифры и символы, копирование текста.
ОткрытьПовернуть и отзеркалить видеоПоворот на 90, 180 и 270 градусов, отражение по горизонтали и вертикали, ускорение и замедление от 0,25 до 4 раз. MP4 с H.264 и звуком собирается в браузере.
ОткрытьЕщё утилиты
Фавикон и свой IP, конвертер цветов с проверкой контраста, ссылка WhatsApp, расчёты битрейта и PPI, компас и линейка — в разделе 16 утилит.