Генератор доступной цветовой палитры

Создайте цветовую палитру и мгновенно увидите, какие комбинации соответствуют коэффициентам контрастности WCAG 2.2 AA (4,5:1) и AAA (7:1). Каждая пара тестируется автоматически.

Ваша палитра

Матрица контрастности

Нажмите «Проверить все пары», чтобы сгенерировать матрицу контрастности.

Доступные пары

Запустите проверку, чтобы увидеть пары, которые проходят.

📚 Научные основы и источники

Для кого создан этот инструмент

Адекватный цветовой контраст важен для людей с нарушением зрения, людей с нарушением цветового зрения (CVD) и тех, у кого есть возрастные нарушения зрения. ВОЗ оценивает, что не менее 2,2 миллиарда людей по всему миру страдают от ближнего или дальнего нарушения зрения (ВОЗ, 2019). Исследования Owsley (2011) показывают, что чувствительность к контрасту значительно снижается с возрастом, что делает дизайн с высоким контрастом тем более важным для пожилых людей. CVD затрагивает около 300 миллионов людей по всему миру (Colour Blind Awareness). Дизайнеры, разработчики и команды бренда используют этот инструмент, чтобы гарантировать, что их цветовые палитры соответствуют минимальным требованиям контрастности WCAG и сохраняют удобство использования для всех этих групп населения.

Требования контрастности WCAG 2.2

  • SC 1.4.3 (минимальный контраст, уровень AA): обычный текст требует коэффициента контрастности ≥ 4,5:1. Крупный текст (18 pt+ или 14 pt+ жирный) требует ≥ 3:1.
  • SC 1.4.6 (усиленный контраст, уровень AAA): обычный текст требует коэффициента контрастности ≥ 7:1. Крупный текст требует ≥ 4,5:1.
  • SC 1.4.11 (нетекстовый контраст, уровень AA): компоненты интерфейса и графические объекты требуют контраста ≥ 3:1 с соседними цветами.

Научные источники

  • W3C (2023). «Web Content Accessibility Guidelines (WCAG) 2.2.» w3.org/TR/WCAG22 · Определяет пороги коэффициента контрастности (4,5:1, 7:1, 3:1) и алгоритм расчёта относительной яркости, используемый в этом инструменте.
  • Owsley, C. (2011). «Aging and vision.» Vision Research, 51(13), 1610–1622. · Документирует, что чувствительность к контрасту значительно снижается с возрастом из-за оптических и нейронных изменений, подчёркивая важность дизайна с высоким контрастом для стареющих популяций.
  • Всемирная организация здравоохранения (2019). Глобальный отчёт о зрении. · Устанавливает, что не менее 2,2 миллиарда людей по всему миру страдают от нарушения зрения, причём низкое зрение и пресбиопия являются наиболее распространёнными формами.
  • Legge, G.E. (2007). Psychophysics of Reading in Normal and Low Vision. Lawrence Erlbaum Associates. · Основополагающее исследование о влиянии контраста, размера шрифта и интервала на эффективность чтения у людей с пониженным зрением.
  • Arditi, A. & Faye, E. (2004). «Monocular and binocular letter contrast sensitivity and letter acuity in a diverse ophthalmologic practice.» Optometry and Vision Science, 81(4), 287–292. · Демонстрирует клиническую важность чувствительности к контрасту как индикатора функционального зрения.

Алгоритм

Относительная яркость рассчитывается согласно определению WCAG 2.2: значения каналов sRGB линеаризуются (удаляется гамма-коррекция), затем взвешиваются (0,2126 R + 0,7152 G + 0,0722 B) согласно стандарту ITU-R BT.709. Коэффициент контрастности = (Lсветлее + 0,05) / (Lтемнее + 0,05).

Отказ от ответственности

Этот инструмент рассчитывает коэффициенты контрастности с помощью алгоритма, указанного в WCAG 2.2. Достижение математических порогов контраста — это необходимое, но недостаточное условие читаемости: такие факторы, как насыщенность шрифта, его размер, сглаживание и калибровка экрана, также влияют на читаемость. Соответствие WCAG требует оценки всех критериев успеха, а не только контраста. Этот инструмент не предоставляет юридических консультаций. Для официальных аудитов доступности проконсультируйтесь с квалифицированным специалистом.

Связанные инструменты

Проверка контрастности цветов Симулятор цветовой слепоты Конвертер цветов Средство проверки заголовков WCAG