Проверка доступности цветов

Введите цвет текста и фона (шестнадцатеричные коды) для проверки их коэффициента контрастности и соответствия стандартам WCAG.

Ввод цветов

Цвет текста

Цвет фона

Предпросмотр текста

Это крупный полужирный текст.

Это обычный текст.

Коэффициент контрастности

21.00:1

Коэффициент контрастности

Обычный текст (AA)

AAA

Крупный текст (AA)

18pt+ or 14pt+ bold

AAA

Компоненты UI (AA)

Buttons, form controls, etc.

WCAG Accessibility Guidelines

Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1

Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1

Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image

Как пользоваться Проверка доступности цветов

1
Введите два цвета
Укажите цвет переднего плана (текста) и цвет фона в виде hex-кодов, например #1a1a1a и #ffffff.
2
Проверьте контраст
Нажмите «Проверить доступность», чтобы вычислить коэффициент контрастности между двумя цветами.
3
Просмотрите результаты WCAG
Посмотрите значки «пройдено» или «не пройдено» для AA и AAA для обычного текста, крупного текста и элементов интерфейса, а также живой предпросмотр.

4
Скорректируйте при необходимости
Поменяйте цвета местами или измените hex-значение, пока сочетание не достигнет уровня WCAG, требуемого вашим проектом.

Цветовой контраст WCAG без тайн

Что означает коэффициент контрастности

Цветовой контраст выражается как отношение между более светлым и более тёмным из двух цветов и изменяется от 1:1 до 21:1. Отношение 1:1 означает, что два цвета идентичны, так что текст был бы полностью невидим на своём фоне, тогда как 21:1 — это максимум, контраст между чисто чёрным и чисто белым. Любая другая пара оказывается где-то посередине. Это отношение не о том, какие цвета вы взяли или насколько различаются их оттенки; оно исключительно об их разнице по светлоте, и именно поэтому два цвета, которые кажутся вам различными, всё равно могут не пройти проверку.

Это единственное число — основа доступного цвета, потому что оно предсказывает, будет ли текст разборчив для самого широкого круга людей и условий. Инструмент вычисляет его для любой введённой вами пары цвета текста и фона и сравнивает результат с опубликованными пороговыми значениями.

Пороги AA, которых необходимо достичь

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

Если сочетание проходит AA и для обычного, и для крупного текста, у вас есть надёжное, отстаиваемое основание. Если оно не проходит для обычного текста, но проходит для крупного, вы всё ещё можете его использовать, но только в крупных размерах — а это ограничение стоит выбирать осознанно, а не обнаруживать потом.

AAA и что означает крупный текст

Уровень AAA — это повышенный ярус, предназначенный для максимальной читаемости, и он поднимает требование до 7:1 для обычного текста и 4.5:1 для крупного текста. AAA не ожидается для целых сайтов и часто непрактичен для фирменных палитр, но это достойная цель для длинных текстов, критически важного контента и аудитории со слабым зрением. Инструмент сообщает AAA наряду с AA, чтобы вы видели, какой запас есть у пары.

У крупного текста есть точное определение, которое удивляет людей: это примерно 18pt и больше, либо 14pt и больше, если текст полужирный, что соответствует примерно 24px обычного начертания или 18.66px полужирного. Порог ниже просто потому, что более крупные и насыщенные формы букв остаются разборчивыми при меньшем контрасте. Всё, что меньше этой границы, должно соответствовать более строгому отношению для обычного текста, поэтому не считайте, что крупный на вид заголовок подходит, не проверив фактический размер и насыщенность.

Почему контраст важен для реальных пользователей

Достаточный контраст — это не формальность для галочки; он определяет, смогут ли реальные люди пользоваться вашим интерфейсом. Пользователи со слабым зрением, число которых растёт с возрастом, полагаются на него напрямую, как и любой, кто читает экран под ярким солнцем, на тусклом или дешёвом дисплее или просто уставшим. Контраст также взаимодействует с нарушениями цветовосприятия: поскольку отношение основано на светлоте, а не на оттенке, пара, которая держится на различии красного и зелёного, может рухнуть для того, кто не различает эти оттенки, тогда как сильное различие по светлоте всё равно читается.

Из этого последнего пункта вытекает следствие, которое стоит сформулировать прямо: никогда не полагайтесь только на цвет для передачи смысла. Сочетайте цвет с текстом, значками, подчёркиванием или формой, чтобы информация переживала и низкий контраст, и дальтонизм.

Как вычисляется отношение

Математика, стоящая за значком, начинается с относительной яркости — меры того, насколько ярким кажется каждый цвет человеческому глазу. Это не простое среднее каналов красного, зелёного и синего, потому что глаз гораздо чувствительнее к зелёному, чем к синему, поэтому зелёный имеет наибольший вес, а синий — наименьший. Каждый канал также сначала проходит через небольшую гамма-коррекцию, чтобы результат отслеживал восприятие, а не сырой сигнал.

Как только у обоих цветов есть значение яркости, коэффициент контрастности — это более светлая яркость плюс небольшая константа, делённая на более тёмную яркость плюс та же константа. Эта константа удерживает формулу от сбоев вблизи чёрного. Вам не нужно считать это вручную, но понимание того, что результат определяет яркость, а не оттенок, объясняет, почему просто подобрать цвета, которые выглядят различными, недостаточно.

Контраст нетекстовых и интерфейсных элементов

Правила контраста не ограничиваются текстом. WCAG также устанавливает минимум 3:1 для визуальных границ интерактивных компонентов и значимой графики — то, что инструмент помечает как компоненты UI. Сюда входят рамка поля ввода, контур кнопки, галочка внутри флажка, индикаторы фокуса и те части значка или диаграммы, которые пользователь должен различать, чтобы их понять. Бледно-серая рамка поля ввода на белой карточке — классический провал этого правила, даже когда текст подписи внутри легко проходит проверку.

Проектирование элементов управления так, чтобы они преодолевали порог 3:1 относительно окружения, означает, что люди действительно смогут их находить и пользоваться ими, а не только читать слова рядом с ними. Проверяйте края и состояния компонента, а не только его текст.

Частые провалы и как их исправить

Несколько шаблонов проваливаются снова и снова. Светло-серый текст подсказок или второстепенный текст на белом — самый частый; значения вроде среднего серого около #999999 на белом оказываются ниже 4.5:1 и нуждаются в затемнении. Фирменные цвета — ещё один постоянный нарушитель, особенно средние по тону синие, зелёные и оранжевые, используемые для основного текста или для белого текста на цветной кнопке, где пара часто оказывается чуть-чуть не дотягивающей до AA. Тонкие светлые рамки на светлом фоне тоже регулярно не дотягивают до интерфейсного порога 3:1.

Исправления обычно невелики. Затемните цвет текста или осветлите фон, пока отношение не преодолеет черту, что в терминах HSL часто означает корректировку светлоты на умеренную величину при сохранении оттенка, чтобы бренд всё ещё считывался. Для текста на пёстром изображении или градиенте добавьте за ним сплошную или полупрозрачную подложку, чтобы даже самый неблагоприятный участок всё равно проходил. Введите здесь свои реальные цвета, наблюдайте, как обновляются отношение и значки AA и AAA, и подправляйте значения, пока каждый требуемый вашим проектом уровень не загорится зелёным.

Часто задаваемые вопросы

Что такое коэффициент контрастности и что считается хорошим значением?

Коэффициент контрастности измеряет разницу яркости между текстом и его фоном, от 1:1 до 21:1. WCAG требует не менее 4.5:1 для обычного текста и 3:1 для крупного текста на уровне AA, а также 7:1 и 4.5:1 на более строгом уровне AAA.

В чём разница между AA и AAA?

AA — это стандарт, на который ориентируется большинство сайтов и юридических требований, а AAA — это повышенный уровень для максимальной читаемости. Инструмент показывает «пройдено» или «не пройдено» для обоих, чтобы вы могли выбрать подходящую планку.

Почему крупный текст проходит проверку, когда обычный не проходит?

Крупный текст, определяемый примерно как 18pt или 14pt полужирный и выше, легче читать, поэтому WCAG допускает для него более низкий порог контрастности. Одна и та же пара цветов может удовлетворять правилам для крупного текста, но не проходить требование для обычного.

В каком формате вводить цвета?

Вводите цвета в виде hex-кодов в формате #RRGGBB или сокращённом #RGB. Инструмент проверяет ваш ввод и показывает живой предпросмотр обычного и крупного текста, чтобы вы видели реальный результат.

Бесплатный ли инструмент и отправляет ли он мои цвета куда-либо?

Он полностью бесплатный и не требует регистрации, а расчёт контрастности полностью выполняется в вашем браузере, поэтому проверяемые цвета никогда не загружаются на сервер.