Почему HSL в HEX не идет туда и обратно?

Значения HSL округляются до целых чисел, поэтому обратное преобразование может сдвинуть канал на один шаг. Разницы не видно.

Поддерживает ли он прозрачность?

Значения альфа в rgba() и hsla() принимаются, но игнорируются, поскольку контрастность зависит от того, что скрывается за прозрачным цветом.

Поддерживается ли трехзначный HEX?

Да. #f80 читается как #ff8800.

Конвертер цветов и проверка контрастности – HEX, RGB, HSL, WCAG

Конвертер цветов и проверка контрастности

Введите цвет в любом распространенном формате, чтобы получить остальные, а затем проверьте, читаем ли он на вашем цвете фона.

Запускается в вашем браузере

Ваши данные: Этот инструмент обрабатывает ваш ввод в этом браузере. CapyHelp не загружает эти данные для генерации результата. Подробности конфиденциальности

Как использовать конвертер цветов и средство проверки контрастности

Введите цвет в формате HEX (#4f46e5), rgb() или hsl()или воспользуйтесь сборщиком.
Введите цвет фона, чтобы проверить контрастность.
Посмотрите коэффициент контрастности и проверьте, соответствует ли он стандартам WCAG AA и AAA для обычного и большого текста.

Понимание коэффициентов контрастности

Рекомендации по доступности веб-контента (WCAG) сравнивают относительную яркость двух цветов по шкале от 1:1 (идентичный) до 21:1 (черный на белом).

АА требуется не менее 4,5:1 для обычного текста и 3:1 для большого текста (около 24 пикселей или 19 пикселей для жирного шрифта).
ААА требуется 7:1 для обычного текста и 4,5:1 для крупного текста.

Хороший контраст помогает читать каждому при ярком освещении или на плохом экране, а не только людям со слабым зрением.

Примеры

Текст #4F46E5 на белом фоне.

Контрастность 6,29:1 · соответствует AA, не соответствует AAA для обычного текста

hsl(243, 75%, 59%)

#5048E5 · RGB(80, 72, 229)