Формула коэффициента контрастности WCAG
Formula
Контраст = (L1 + 0,05) / (L2 + 0,05), где L1 — более низкая яркость.
Variables
- Р, Г, Б
- Каналы sRGB (нормализованные 0–255 или 0–1)
- Ч, С, Л
- Оттенок (градусы), насыщенность и яркость (0–1) в HSL.
- л
- Относительная яркость (WCAG) или яркость в HSL/OKLCH
FAQ
- Точная ли формула коэффициента контрастности WCAG для рабочих процессов печати?
- Экран RGB и печатный CMYK используют разные гаммы. Относитесь к конверсиям как к приблизительным доказательствам; калибровать с помощью профилей ICC для коммерческой печати.
- Могу ли я использовать эту формулу в CSS?
- Современный CSS поддерживает функции color-mix(), oklch() и lab() для многих операций. Для сложных конвейеров выполните вычисления в JavaScript и экспортируйте переменные CSS.
- Загружает ли Color DevByte мои цвета?
- Нет. Справочные страницы формул являются статической документацией; интерактивные инструменты работают на 100% на стороне клиента вашего браузера.
Обзор
Рассчитайте относительный контраст яркости между цветами переднего плана и фона.
Color DevByte документирует эту формулу для разработчиков, дизайнеров и специалистов по обеспечению доступности, которым нужна воспроизводимая цветовая математика без отправки данных на сервер.
Используйте связанные инструменты цвета, чтобы применить эту формулу в интерактивном режиме с предварительным просмотром в реальном времени и многоформатным экспортом.
Когда использовать эту формулу
Применяйте формулу коэффициента контрастности wcag при создании токенов дизайна, проверке контрастности WCAG или автоматизации конвейеров цвета в CSS, Tailwind или JSON системы дизайна.
Для производственного пользовательского интерфейса всегда проверяйте результаты с помощью средства проверки контрастности или визуального предварительного просмотра — крайние случаи гамма-коррекции и сопоставления гаммы могут изменить результаты.
Замечания по реализации
Браузерные инструменты должны линеаризировать sRGB перед расчетом яркости или ΔE.
Предпочитайте интерполяцию OKLCH или LAB для градиентов и тем, чтобы избежать сероватых средних точек, характерных для смесей RGB.