Конвертер цветов и проверка контрастности
Переведите цвет между HEX, RGB, HSL, HSV и CMYK и проверьте, достаточно ли контраста между двумя цветами для читаемого текста.
Работает полностью в браузере
- HEX
- RGB
- HSL
- HSV / HSB
- CMYK
- Название в CSS
Проверка контрастности
Коэффициент контрастности –
| Назначение | Требуется | Результат |
|---|---|---|
| Обычный текст, AA | 4,5:1 | |
| Обычный текст, AAA | 7:1 | |
| Крупный текст, AA | 3:1 | |
| Крупный текст, AAA | 4,5:1 | |
| Значки и элементы интерфейса, AA | 3:1 |
Понимает HEX (3, 4, 6 или 8 цифр), rgb(), hsl(), hsv(), cmyk() и названия цветов CSS; другие записи цвета CSS читает ваш браузер, если может. HSL, HSV и CMYK показываются с одним знаком после запятой.
Как перевести цвет
- Введите или вставьте цвет в любом распространённом формате, например
#1636a3,rgb(22, 54, 163),hsl(226, 76%, 36%)илиnavy, либо выберите его палитрой. - Скопируйте из списка нужный формат. Значения обновляются по мере ввода.
- В разделе Проверка контрастности введите цвет текста и цвет фона, и вы увидите коэффициент контрастности и то, проходят ли они уровни WCAG AA и AAA.
Форматы цвета и контраст
HEX и RGB описывают экранный цвет как количества красного, зелёного и синего от 0 до 255; HEX просто записывает каждое количество двумя шестнадцатеричными цифрами, при желании с третьей парой для непрозрачности. HSL и HSV описывают те же цвета через тон (угол на цветовом круге), насыщенность и светлоту или значение, что упрощает выбор более светлого или более блёклого варианта цвета. Это разные координаты одних и тех же цветов sRGB, поэтому переводы между ними точны с точностью до округления.
CMYK устроен иначе: он описывает краску, и точный перевод зависит от процесса печати. Показанное значение получено по наивной формуле (чёрный равен 1 минус самый яркий канал, а остальные краски добирают остаток): для грубой работы этого достаточно, но печатный профиль она не заменяет.
Проверка контрастности использует формулу контраста WCAG 2, ту же, что применяют при аудитах доступности и в инструментах разработчика браузеров. Она измеряет только контраст по яркости, поэтому не скажет вам о сочетаниях, трудных при дальтонизме, например красного на зелёном, а для очень тонких или мелких шрифтов может потребоваться контраст выше минимального.
Советы
- Нужен цвет пикселя на фото или скриншоте? Используйте «Определить цвет на изображении».
- Делаете QR-код в фирменных цветах? «Генератор QR-кодов» предупредит, если контраста слишком мало для считывания.
- Переводите шестнадцатеричные числа, которые не являются цветами? Попробуйте «Перевод между системами счисления».
Вопросы и ответы
Подходит ли значение CMYK для печати?
Лишь приблизительно. Здесь CMYK получен по простой формуле, которая переводит экранный RGB без цветового профиля, как это делает большинство онлайн-конвертеров. Типографии работают с конкретными красками и бумагой, которые описывает профиль ICC, поэтому для печати конвертируйте цвета в дизайнерской программе с профилем, который вам даст типография.
Как рассчитывается коэффициент контрастности?
По формуле WCAG 2: относительная яркость каждого цвета вычисляется по его значениям sRGB, а коэффициент равен (более светлый + 0,05), делённому на (более тёмный + 0,05). Он лежит в пределах от 1:1 (нет контраста) до 21:1 (чёрный на белом). В действующем тексте WCAG в формуле используется порог 0,04045; в старых редакциях стояло 0,03928, что даёт тот же результат для любого 8-битного цвета.
Какие коэффициенты требуют AA и AAA?
Обычному тексту нужно 4,5:1 для AA и 7:1 для AAA. Крупному тексту, то есть не менее 24 px обычного начертания или примерно 18,7 px полужирного, нужно 3:1 для AA и 4,5:1 для AAA. Значкам, границам полей ввода и другим элементам интерфейса нужно 3:1 (WCAG 1.4.11). Коэффициент не округляется вверх: 4,49:1 не проходит AA для обычного текста.
Как обрабатываются прозрачные цвета?
Частично прозрачный цвет текста сначала смешивается с фоном так, как это показал бы экран, и измеряется смешанный цвет. Частично прозрачный фон считается лежащим на белом. После смешивания каналы округляются до целых значений, как это отображал бы дисплей.
Почему значения HSL немного меняются после обратного перевода?
У экранных цветов 256 уровней на канал, поэтому большинство значений HSL и HSV не попадают точно ни на один из них. Конвертер хранит полную точность внутри и округляет только для показа: HEX и RGB до целых, HSL, HSV и CMYK до одного знака после запятой.
Знает ли он названия цветов CSS?
Да, все 148 именованных цветов CSS, например rebeccapurple и cornflowerblue. Введите название, чтобы перевести цвет; если цвет точно совпадает с названием, оно тоже показывается. У некоторых цветов два названия, например aqua и cyan.