Инструмент
Конвертер цветов и контраст
Переводит цвет из любого формата CSS в hex, rgb, hsl, oklch и lab, проверяет контраст текста с фоном по WCAG и APCA и предупреждает, если цвет не помещается в sRGB.
Подойдёт любая запись: #1e90ff, dodgerblue, rgb(30 144 255), hsl(210 100% 56%), oklch(65% 0.18 250), lab(…), с прозрачностью через «/».
Крупный текст Обычный текст: так цвет выглядит на выбранном фоне.
- hex
#b83217 - rgb
rgb(184 50 23) - hsl
hsl(10.1 77.8% 40.6%) - hwb
hwb(10.1 9% 27.8%) - oklch
oklch(52.05% 0.1749 33.05) - oklab
oklab(52.05% 0.1466 0.0954) - lch
lch(42.77 71.59 41.8) - lab
lab(42.77 53.38 47.72)
Контраст текста с фоном
Контраст 5,73:1
- Обычный текст, AA (4,5:1) — проходит
- Обычный текст, AAA (7:1) — не проходит
- Крупный текст, AA (3:1) — проходит
- Крупный текст, AAA (4,5:1) — проходит
- Элементы интерфейса и графика (3:1) — проходит
APCA: Lc 75,6 — подходит для основного текста
WCAG 2 — действующий стандарт: для обычного текста нужен контраст не меньше 4,5:1, для крупного (от 24 px или от 18,66 px жирным) — 3:1. APCA — новый алгоритм, который точнее отражает восприятие, особенно на тёмном фоне; он ещё не стал стандартом, поэтому его значение — ориентир. Знак Lc показывает полярность: плюс — тёмный текст на светлом фоне.