Web Content Accessibility Guidelines (WCAG) 2.1 требуют минимальных коэффициентов контраста между текстом и цветами фона для обеспечения читаемости для всех пользователей, включая людей с нарушениями зрения. Уровень AA требует коэффициент не менее 4.5:1 для обычного текста и 3:1 для крупного текста. Уровень AAA требует 7:1 и 4.5:1 соответственно. Этот инструмент вычисляет точный коэффициент контраста и показывает, проходит ли ваша цветовая комбинация каждый уровень.
Large Text (24px Bold)
Large Text (18.66px / 18pt)
Normal text. The quick brown fox jumps over the lazy dog.
Small text. Pack my box with five dozen liquor jugs.
14.63:1
Excellent contrast -- passes all WCAG levels
Required: ≥ 4.5:1
Required: ≥ 3:1
Required: ≥ 3:1
Required: ≥ 7:1
Required: ≥ 4.5:1
Введите цвет переднего плана (текста) и цвет фона с помощью палитр цветов или набрав HEX-коды. Инструмент вычисляет коэффициент контраста и показывает результаты прохождения/непрохождения для стандартов WCAG 2.1 Level AA и Level AAA при обычном и крупном размерах текста. Живой предпросмотр отображает образец текста с выбранными вами цветами. Предложения доступных цветовых альтернатив предоставляются, когда коэффициент контраста не соответствует требованиям.
Проверка контраста WCAG требуется для соответствия ADA и Section 508 в правительственных и корпоративных веб-сайтах, обеспечения читаемости для пользователей с низким зрением или нарушениями зрения, соблюдения требований European Accessibility Act, прохождения автоматизированных аудитов доступности (Lighthouse, axe), создания доступных дизайн-систем и библиотек компонентов и валидации цветов бренда для использования в вебе по стандартам доступности.
Коэффициент контраста вычисляется по формуле WCAG 2.1: (L1 + 0.05) / (L2 + 0.05), где L1 и L2 являются относительными яркостями более светлого и более тёмного цветов. Относительная яркость вычисляется линеаризацией значений sRGB (применение обратной гамма-коррекции: value <= 0.03928 ? value/12.92 : ((value+0.055)/1.055)^2.4), затем взвешиванием: L = 0.2126×R + 0.7152×G + 0.0722×B. Коэффициент варьируется от 1:1 (идентичные) до 21:1 (чёрный на белом).
Коэффициент контраста WCAG - это мера разницы относительной яркости между двумя цветами, варьирующаяся от 1:1 (нет контраста, одинаковый цвет) до 21:1 (максимальный контраст, чёрный и белый). Вычисляется по формуле, определённой в WCAG 2.1.
Для WCAG 2.1 Level AA (минимум): 4.5:1 для обычного текста, 3:1 для крупного текста (18px+ жирный или 24px+). Для Level AAA (улучшенный): 7:1 для обычного текста, 4.5:1 для крупного текста.
Коэффициент контраста вычисляется как (L1 + 0.05) / (L2 + 0.05), где L1 является относительной яркостью более светлого цвета, а L2 является относительной яркостью более тёмного цвета. Относительная яркость учитывает, как человеческие глаза воспринимают различные длины волн света.
Согласно WCAG, крупный текст - это как минимум 18.66px (14pt) жирный или 24px (18pt) обычный. Крупный текст имеет более низкие требования к контрасту, потому что более крупные символы легче читать.
Трансформируйте, форматируйте, генерируйте и кодируйте данные мгновенно. Приватно, быстро и всегда бесплатно.
Смотреть все инструменты