Инструменты для работы с цветом
Работает на устройстве. Ничего не отправляется.Ничего никуда не отправляется - всё преобразование происходит на вашем устройстве.
Проверка контраста
На фоне белого
AA (обычный текст)
5.17:1ПройденоAA (крупный текст)
5.17:1ПройденоAAA (обычный текст)
5.17:1Не пройденоAAA (крупный текст)
5.17:1ПройденоНа фоне чёрного
AA (обычный текст)
4.06:1Не пройденоAA (крупный текст)
4.06:1ПройденоAAA (обычный текст)
4.06:1Не пройденоAAA (крупный текст)
4.06:1Не пройденоОттенки
Конвертируйте между HEX, RGB и HSL, проверяйте контраст по WCAG и создавайте шкалу оттенков - полностью в вашем браузере.
Этот инструмент преобразует цвет между нотациями HEX, RGB и HSL, проверяет его коэффициент контрастности WCAG относительно белого и чёрного текста и создаёт шкалу оттенков от тёмного к светлому - всё вычисляется локально в вашем браузере по мере ввода.
Часто задаваемые вопросы
Что означают уровни WCAG AA и AAA?
Это пороги контрастности из руководства по доступности веб-контента (WCAG): AA требует контраста не менее 4,5:1 для обычного текста (3:1 для крупного текста, 18pt+ или полужирного 14pt+), а более строгий AAA требует 7:1 для обычного текста (4,5:1 для крупного текста). Соответствие AA - обычный базовый уровень для доступного текста.
Почему HEX/RGB/HSL может немного отличаться после преобразования туда и обратно?
HSL хранит оттенок, насыщенность и яркость как округлённые целые числа, поэтому преобразование RGB в HSL и обратно может сместить канал на одну-две единицы из-за округления - это нормально и происходит в любом инструменте цвета, поддерживающем HSL.
Как создаётся шкала оттенков?
Оттенок и насыщенность цвета остаются неизменными, изменяется только яркость в пространстве HSL - от почти чёрного до почти белого. Это простая, предсказуемая шкала, а не перцептивно равномерная (для которой потребовалось бы более сложное цветовое пространство), как это делает большинство обычных инструментов работы с цветом.