Калькулятор контрастности цветов (WCAG)
Калькулятор контрастности цветов (WCAG)
Введите цвет текста и цвет фона в виде hex-кодов. Это рассчитает их контрастность по формуле WCAG и покажет, какие уровни соответствия доступности (AA, AAA) проходит это сочетание.
- Формула: Коэффициент контрастности = (L1 + 0.05) ÷ (L2 + 0.05), где L1 и L2 — относительная яркость более светлого и более тёмного цвета по формуле WCAG 2.x.
- Пороги WCAG: AA требует 4.5:1 для обычного текста и 3:1 для крупного текста (18pt+ или 14pt+ жирный); AAA требует 7:1 для обычного текста и 4.5:1 для крупного текста.
- Работает полностью в браузере: ваши цвета рассчитываются локально с помощью JavaScript и никогда не отправляются на сервер.
Что считается "крупным текстом" для более низкого порога AA/AAA?
18pt (24px) обычного начертания или 14pt (~18.5px) жирного или крупнее — крупный текст легче читать при меньшей контрастности.
Мои цвета не проходят WCAG AA — что изменить?
Затемните более тёмный цвет, осветлите более светлый, или и то, и другое — даже небольшие изменения яркости могут значительно увеличить контрастность.
Калькулятор контрастности цветов (WCAG)
Введите цвет текста и цвет фона в виде hex-кодов. Это рассчитает их контрастность по формуле WCAG и покажет, какие уровни соответствия доступности (AA, AAA) проходит это сочетание.
- Формула: Коэффициент контрастности = (L1 + 0.05) ÷ (L2 + 0.05), где L1 и L2 — относительная яркость более светлого и более тёмного цвета по формуле WCAG 2.x.
- Пороги WCAG: AA требует 4.5:1 для обычного текста и 3:1 для крупного текста (18pt+ или 14pt+ жирный); AAA требует 7:1 для обычного текста и 4.5:1 для крупного текста.
- Работает полностью в браузере: ваши цвета рассчитываются локально с помощью JavaScript и никогда не отправляются на сервер.
Что считается "крупным текстом" для более низкого порога AA/AAA?
18pt (24px) обычного начертания или 14pt (~18.5px) жирного или крупнее — крупный текст легче читать при меньшей контрастности.
Мои цвета не проходят WCAG AA — что изменить?
Затемните более тёмный цвет, осветлите более светлый, или и то, и другое — даже небольшие изменения яркости могут значительно увеличить контрастность.