Конвертер цветов и контраст
Переводит цвет между HEX, RGB и HSL и сразу считает контраст с фоном по формуле WCAG. За переводом цвета обычно идут ради вёрстки, а там следующий вопрос — читается ли текст: калькулятор отвечает на оба сразу и показывает живой пример заголовка и строки на выбранном фоне. Рядом шкала оттенков одного тона, из которой удобно собирать состояния кнопок и ссылок.
———А так — строка обычного текста этим цветом на выбранном фоне.
Как пользоваться
- Пипеткой, полем ввода или вставкой: понимает #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 к одному для обычного текста. Он нужен там, где читаемость критична, и его редко удаётся выдержать на цветных акцентах. Калькулятор отмечает, когда запас позволяет.
Данные куда-то отправляются?
Нет. Всё работает прямо в браузере на JavaScript — введённые данные не уходят на сервер и нигде не сохраняются.
Ещё инструменты для SEO и маркетинга
Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.