Конвертер цветов - HEX, RGB, HSL и контраст по WCAG
Конвертер цветов и проверка контраста
HEX, rgb(), hsl() или название цвета CSS — читаются все четыре.
Оттенки
Тот же оттенок в одиннадцати уровнях светлоты. Нажмите, чтобы сделать его текущим цветом.
Контраст
Отношение между двумя цветами, измеренное так, как определяет WCAG.
| Пара | Отношение | AA (4,5:1) | AAA (7:1) |
|---|
Что делает этот инструмент
Перевести цвет из одной записи в другую это пять строк арифметики. Труднее вопрос, читается ли текст такого цвета на самом деле, и этот ответ требует шага, который большинство инструментов пропускает. Здесь есть и то и другое, для того же цвета, что вы ввели.
Как пользоваться
- 1 Введите цвет в любой записи или воспользуйтесь палитрой.
- 2 Скопируйте нужную запись или нажмите на оттенок, чтобы перейти к нему.
- 3 Прочитайте таблицу контраста. Всё, что помечено «не проходит», кому-то будет читать тяжело.
Почему один и тот же тон в HSL выглядит иначе
HSL округляет до целых градусов и целых процентов, поэтому перевод в HSL и обратно не всегда возвращает исходные байты. Именно поэтому показанный здесь HEX всегда выводится из вашего ввода, а не из круга через HSL, иначе поле смещалось бы на шаг при каждом щелчке.
Что означают числа контраста
Отношение идёт от 1:1 для двух одинаковых цветов до 21:1 для чистого чёрного на чистом белом. Пороги ниже это те, по которым инструмент выносит вердикт.
| 4.5:1 | Обычный текст, WCAG AA |
| 3:1 | Крупный или жирный текст, WCAG AA |
| 7:1 | Обычный текст, WCAG AAA |
| 21:1 | Максимально возможное отношение: чёрное на белом |
Шаг, который пропускает большинство инструментов
Относительная яркость это не среднее значений каналов. Каждый канал сначала нужно линеаризовать, потому что числа в HEX-коде закодированы гаммой, а не пропорциональны свету. Пропустите этот шаг, и отношение всё равно выйдет правдоподобным числом, просто неверным, а ошибка максимальна в средних тонах, где живёт большинство цветов интерфейса.
Контраст необходим, но недостаточен
Пара может пройти 4,5:1 и всё равно оказаться плохим выбором: дальтонизм делает некоторые пары неразличимыми даже при высоких отношениях, а смысл никогда не должен держаться только на цвете. Считайте здешний «проходит» взятой нижней планкой, а не приговором дизайну.