Крупный текст
Обычный основной текст
Мелкая подпись
#000000 Об этом инструменте
Коэффициент контрастности цвета измеряет перцептивную разницу яркости (luminance) между двумя цветами, выраженную значением от 1:1 (идентичные) до 21:1 (чисто чёрный на чисто белом). Формула WCAG 2.x линеаризует каждый канал sRGB — линейный отрезок ниже 0.03928 и степенная кривая 2.4 выше него — взвешивает их как 0.2126 R / 0.7152 G / 0.0722 B, чтобы получить относительную яркость, а затем вычисляет (светлее + 0.05) / (темнее + 0.05). Web Content Accessibility Guidelines задают четыре порога: AA требует 4.5:1 для обычного текста и 3:1 для крупного текста (>=24px, или >=18.66px полужирным); AAA повышает эти значения до 7:1 и 4.5:1.
Используйте инструмент, чтобы убедиться, что основной текст, кнопки, ссылки и подписи к полям форм отвечают требованиям доступности перед выпуском, чтобы отладить пару цветов дизайн-системы, помеченную аудитом, или чтобы найти проходящую альтернативу, не отказываясь от своей палитры. Введите любой цвет CSS — hex, rgb(), hsl() или именованный цвет — в любое из полей, считайте коэффициент в реальном времени и сетку оценок, а когда уровень AA не проходит, примените предложенный цвет переднего плана, который сдвигает яркость OKLCH исходного цвета ровно настолько, чтобы достичь 4.5:1.
Коэффициент контрастности зависит только от яркости, а не от оттенка — два цвета с одинаковой светлотой могут радикально отличаться по цвету и всё равно не пройти проверку, потому что пользователи с дальтонизмом и слабым зрением полагаются на разницу яркости.
Часто задаваемые вопросы
Какой коэффициент контрастности нужен для прохождения WCAG?
WCAG 2.1 уровня AA требует коэффициента контрастности не менее 4.5:1 для обычного текста и 3:1 для крупного текста (24px или больше, либо 18.66px полужирным). Уровень AAA требует 7:1 для обычного текста и 4.5:1 для крупного текста.
Что считается крупным текстом для целей контрастности?
Крупный текст — это 18.66px (14pt) или больше полужирным, либо 24px (18pt) или больше обычной насыщенности. К нему применяется более низкий порог контрастности, потому что более крупные глифы остаются разборчивыми при меньшей контрастности.
Как вычисляется коэффициент контрастности WCAG?
Относительная яркость каждого цвета находится путём линеаризации его каналов sRGB и их взвешивания как 0.2126 R + 0.7152 G + 0.0722 B. Затем коэффициент равен (более светлая яркость + 0.05) / (более тёмная яркость + 0.05), давая значение в диапазоне от 1:1 до 21:1, которое не зависит от того, какой цвет является передним планом.