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

Конвертер в реальном времени переводит один цвет между HEX (#rrggbb), RGB (rgb(r, g, b)) и HSL (hsl(h, s%, l%)), так что можно вставить любой формат, который использует ваша дизайн-система, и получить два других. Проверка контраста берёт передний план и фон, линеаризует оба по гамма-кривой sRGB и сообщает коэффициент контраста WCAG 2.x вместе с вердиктами AA / AAA для обычного и крупного размеров текста.

Пример

Ввод — типичный фирменный синий:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

В паре с белым (#ffffff) в качестве фона:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

Почему WCAG AAA не проходит для этой пары цветов?

Вот наиболее распространённые ловушки контраста и конверсии, за которыми стоит следить:

• Путаница AA large с AA normal. Крупному тексту нужно всего 3:1, поэтому ссылка, хорошо читаемая в H1, всё ещё может не пройти на размере основного текста. Если пара достигает 3.5:1, она проходит заголовки, но не проходит абзацы.
• Использование светлоты HSL как замены контрасту. hsl(0, 100%, 50%) (красный) и hsl(240, 100%, 50%) (синий) оба имеют L=50%, но очень разную яркость. Всегда вычисляйте контраст из значений RGB, а не из светлоты HSL.
• Забытая альфа-композиция. Текст rgba(0, 0, 0, 0.6) на белом фактически — #666666. Проверяйте сплющенный HEX, а не полупрозрачное значение.
• Неправильная длина hex. #fff разворачивается в #ffffff, но #ffff — это 4-значная короткая форма с альфа-байтом. Перепроверьте количество цифр, когда поле HEX тихо отклоняет ввод.
• Смешивание display-P3 и sRGB. Цвета, взятые из дизайн-инструментов вроде Figma в широкогамутном режиме, могут выходить за пределы sRGB, и браузеры их обрежут. Сконвертируйте в sRGB в исходном инструменте перед копированием HEX.
• Проверка контраста только на чисто белом. Если настоящая разметка помещает текст на #f3f4f6 или на фото, видимый контраст ниже. Проверяйте с реальным фоном.

Какой коэффициент контраста нужен, чтобы пройти WCAG AA?

WCAG 2.1 AA требует 4.5:1 для обычного основного текста и 3:1 для крупного текста, где крупный означает минимум 18 pt (24 px) обычного или 14 pt (18.66 px) жирного. UI-компоненты и графические объекты требуют 3:1 относительно их фона. AAA поднимает планку до 7:1 для обычного текста и 4.5:1 для крупного.

Почему HSL, который я вводу обратно, даёт немного другие значения RGB?

HSL хранится как целые проценты в большинстве инструментов, поэтому круговой путь RGB в HSL в RGB может сдвинуться на одну единицу на каждом канале. Этот дрейф в пределах JND и невидим на экране, но если нужна точная круговая точность, держите значение HEX или RGB как источник истины, а HSL считайте представлением.

Использует ли этот инструмент гамма-коррекцию sRGB для контраста?

Да. Вычисление контраста следует формуле WCAG 2.x, которая линеаризует каждый канал sRGB гамма-кривой, вычисляет относительную яркость и берёт (L1 + 0.05) / (L2 + 0.05). Простое усреднение каналов или наивная светлота HSL дают обманчивые цифры и не совпадут с результатом WCAG.

Как мне обращаться с альфой или полупрозрачными цветами?

Контраст WCAG определяется относительно сплошного фона, поэтому сначала сплющите любую альфу, скомпоновав передний план над реальным фоном. Например, блок 50% чёрного текста на белой странице фактически — #808080 на #ffffff. Передайте этот сплющенный HEX в проверку вместо полупрозрачного значения.

HEX #rgb — это то же, что #rrggbb?

Да. 3-значная короткая форма разворачивает каждый ниббл, повторяя его, так что #f0c становится #ff00cc. 4-значные и 8-значные формы добавляют альфа-канал. Этот инструмент принимает 3-значный, 6-значный и 8-значный HEX и рассматривает альфа-байт только как информационный для контраста, поскольку WCAG требует сплошной композитный цвет.

Сохраняете ли вы цвета, которые я ввожу или выбираю?

Нет. Мы не храним никакой записи цветов, которые вы тестируете, конвертируете или проверяете на контраст. Всё, что вы вводите или перетаскиваете в пипетку, удаляется при закрытии вкладки — никакого логирования, никакой аналитики по вашим значениям цветов. Заглянете в developer tools вашего браузера, если хотите увидеть сами.