Первая ошибка доступности, которую я когда-либо отправлял, была меткой серого цвета на белой карте. В Figma он выглядел элегантно, на моем калиброванном мониторе он выглядел нормально, и он был совершенно невидим для клиента, читающего электронное письмо на телефоне в припаркованной машине. Он не был нарушен зрением. Это был просто солнечный свет. Этот единственный билет в поддержку научил меня чему-то, что дизайн макета никогда не мог: контраст не вопрос вкуса, это измеримая собственность, и если вы не измеряете его, вы отправляете предположения.
С тех пор я построил Проверка цветового контраста на Toolz.dev, встроил правила контрастности в токены дизайна для WP Adminify, и проверил больше компонентов React, чем я хочу посчитать Это руководство является версией того опыта, который я хотел бы, чтобы кто-то вручил мне в начале. Оно объясняет, что на самом деле коэффициент контрастности, как рассчитывается число, что WCAG пороговые значения означают, и как исправить неисправную пару цветов, не выбрасывая палитру бренда.
TL;DR: Контраст WCAG — это соотношение от 1:1 до 21:1, основанное на относительной яркости двух цветов. Для обычного основного текста вам нужно как минимум 4,5:1, чтобы пройти АА и 7:1, чтобы пройти ААА. Большой текст (около 24 пикселей или 18,66 пикселя жирный) уменьшается до 3:1 для AA и 4,5:1 для AAA. не -Текстовый пользовательский интерфейс, как значки и входные границы, нуждается в 3:1. Измерьте каждую пару текста на заднем плане, рассматривайте AA как полосу прохода, и пусть инструмент предлагает проходящий цвет, когда вы падаете.
Почему так значима цветовая контрастность?
Контраст — это самый распространенный сбой в Интернете. Год за годом автоматизированные проверки основных домашних страниц на миллионы показывают, что текст с низким контрастом является наиболее частым нарушением WCAG с большим отрывом. Это также то, что затрагивает большинство людей, потому что это касается не только пользователей, которые зарегистрированы вслепую. Это касается любого, у кого меньший зрение, с возрастом, у любого, у кого есть общее состояние, например, катаракта, любой, кто использует дешевый дисплей, любой в светлой комнате и каждый из нас, когда солнце падает на экран.
Есть и бизнес, и я не собираюсь притворяться в обратном. Закон о доступности теперь ссылается на WCAG непосредственно во многих регионах, что означает, что недоступный интерфейс является юридической разоблачением, а не просто проблемой вежливости. Но причина, по которой меня волнует, и причина, по которой я создал для него специальный инструмент, проще. Текст, который люди не могут читать, — это текст, который не удался при своей единственной работе. Великолепный интерфейс, который никто не может использовать, не является достижением в дизайне.
Ловушка в том, что наши глаза — ненадежные рассказчики. Мы адаптируемся к нашим собственным экранам, мы знаем, что должен сказать текст, чтобы наш мозг заполнял его, и смотрим на дизайн в идеальных условиях. Контрастность убирает все это. Он дает вам номер, который не заботится о вашем мониторе или ваших ожиданиях.
Что такое коэффициент контрастности?
Контрастность — это сравнение относительной яркости двух цветов: вашего переднего плана (обычно текста) и вашего фона. Относительная яркость — это мера того, сколько света излучает или отражает цвет, при взвешивании человеческим глазом на самом деле воспринимает красный, зеленый и синий цвет. Зеленый вносит наибольший вклад в воспринимаемую яркость, а синий — меньше всего, поэтому чистый синий текст на черном гораздо труднее читать, чем чистый зеленый.
Сама % определяется как WCAG:
(L1 + 0.05) / (L2 + 0.05)
где L1 - относительная яркость светлого цвета и L2 это более темный. выше 0.05 Термины модели окружающий свет, отражающийся от экрана, поэтому шкала никогда не достигает бесконечности. Идентичные цвета дают соотношение ровно 1:1. Чистый черный текст на чистом белом цвете дает максимум 21:1. Все настоящие жизни между этими двумя крайностями.
Важно усвоить, что соотношение не является линейным по отношению к тому, как "разные" два цвета выглядят в смысле оттенка. Два цвета могут сильно различаться по оттенку - скажем, насыщенный красный и насыщенный зеленый - и при этом иметь почти одинаковую яркость, что делает их кошмаром для читаемости, даже если они сильно сталкиваются. Контраст касается разницы в легкости, а не разницы в цвете. Именно поэтому вы не можете смотреть на это глазами и почему Проверка цветового контраста Преобразует оба цвета в яркость перед выполнением любого сравнения.
Как на самом деле рассчитывается число?
Если вы хотите понять инструмент, а не просто доверять ему, вот полный конвейер, который точно следует определениям WCAG 2.2.
Во-первых, каждый цветовой канал нормализован из диапазона 0–255 до 0–1. Затем каждый канал линеаризуется для отмены гамма-кривой sRGB. Формула применяет небольшой линейный сегмент для очень темных значений и кривую мощности для остальных:
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
Затем три линеаризованных канала сочетаются с коэффициентами яркости, которые отражают восприятие человека:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
Эти веса не являются произвольными. Они исходят из того, как конусные клетки глаз реагируют на разные длины волн, и поэтому доминирует зеленый. Наконец, два значения яркости подключены к приведенной выше формуле отношения, причем более легкая сверху.
Есть одна тонкость, которая сбивает людей с толку, и это прозрачность. Контрастность имеет значение только между двумя непрозрачными цветами, потому что реальный внешний вид полупрозрачного цвета зависит от того, что находится за ним. Если цвет текста имеет значение альфа, вы не можете измерить его напрямую. Правильный подход, и инструмент, который принимает инструмент, состоит в том, чтобы составить полупрозрачный передний план над фоном, сначала используя стандартное смешивание источника, а затем измерить соотношение по отношению к уплощенному результату. Это соответствует тому, что на самом деле видит пользователь, а не тот цвет, который вы номинально установили.
Каковы пороги WCAG, которые мне нужно достичь?
WCAG определяет требования к контрасту на двух уровнях соответствия и для трех широких типов контента. Вот вся картина в одном месте.
| Тип содержимого | АА минимум | ААА минимум |
|---|---|---|
| Обычный текст (менее ~24px) | 4.5:1 | 7:1 |
| Большой текст (~24px или ~ 18,66 пикселей жирный) | 3:1 | 4.5:1 |
| Компоненты и графика пользовательского интерфейса | 3:1 | 3:1 (нет отдельного ААА) |
| Логотипы и случайный текст | освобожденный | освобожденный |
Несколько заметок от многократного применения этой таблицы. «Большой текст» определяется отображаемым размером, а не тем, насколько важным ощущается текст. Порог составляет 18pt для обычного веса и 14pt жирным шрифтом, что переводится примерно в 24px и 18,66 пикселей. Все, что выше или выше, что получает 3:1 бар для АА, потому что более крупные формы буквы остаются читабельными при более низкой контрастности.
Правило UI-компонентов - это Критерий успеха 1.4.11, и это тот, который команды забывают чаще всего. говорится, что визуальная граница интерактивного компонента - граница ввода текста, контур кнопки, форма значка, передающего смысл - требует 3:1 против окружающей среды. Форма, полная текста метки, проходящей через АА, с невидимыми входными границами до сих пор не работает, и я видел именно это в производстве не раз.
Наконец, декоративный текст, отключенные элементы управления и логотипы освобождаются. Это освобождение узкое. На ярлыке с серым цветом все в порядке, а абзац с низким контрастом, который вы назвали «второстепенным», — нет.
Как использовать проверку цветоконтрастности?
Рабочий процесс, который я использую ежедневно, занимает около десяти секунд на пару. откройте Проверка цветового контраста и введите свой цвет текста в первом поле. вы можете вставить любой формат - шестизначный шестигранник, как #4b5563, восьмизначный гекс с альфа, rgb() или rgba() струна, hsl() значение или простое ключевое слово CSS, например navy, йо- Инструмент нормализует все, что вы ему даете, поэтому вы можете свободно смешивать форматы между двумя полями.
Введите цвет фона во втором поле. В тот момент, когда оба действительны, точное соотношение появляется вместе с живым образцом большого, нормального и текстового текста, отображаемого на вашем фактическом фоне. Это превью имеет значение. Число сообщает вам, проходит ли оно, но вид настоящих слов на реальном цвете говорит вам, удобно ли это, что более высокая планка, чем просто юридическая.
Ниже соотношения вы получаете сетку пропусков и отказов значки: АА и ААА как для нормального, так и для большого текста, плюс 3:1 UI-компонент проверки. если комбинация не удалась, инструмент предлагает один клик исправления. он ходит ваш цвет текста светлее или темнее в HSL пространства - сохраняя оттенок и насыщенность вы выбрали - пока он очищает целевое соотношение, то передает вам проходное значение вы можете скопировать прямо в ваш таблица стилей. Эта последняя часть является разница между шашкой, которая ругает вас и тот, который действительно помогает: он сохраняет ваш бренд оттенок нетронутым и только перемещает светлость на минимум необходимый.
Все запускается локально в вашем браузере. Не оставляйте ваше устройство, которое не оставляет цвета, палитра или неизданные значения бренда, что имеет значение при аудите системы проектирования клиента. Это тот же подход, который я использую для каждого инструмента на сайте, и я писал о том, почему эта архитектура имеет значение в Руководство по конфиденциальности данных, йо-
Общие варианты использования реальных проектов
Аудит токенов системы проектирования
Когда я настраиваю цветные токены для нового проекта, я проверяю каждое семантическое сопряжение перед отправкой одного компонента: основной текст на фоне, приглушенный текст на фоне, текст на первичном, текст на карте, текст на каждом варианте предупреждения. Токен, который когда-то терпит неудачу, везде, где он используется, не работает, поэтому поймать его на уровне токена огромно дешевле, чем поймать его на компонент. Я держу простой контрольный список и запускаю каждую пару через чекер, записывая соотношение рядом с именем маркера.
Спасение цвета бренда, который "должен быть"
Маркетинг вручает вам синий цвет и говорит, что кнопки должны использовать его. вы тестируете белый текст на нем и получаете 3.1:1 - хорошо для большого текста, не подходит для этикетки кнопки нормального размера. У вас есть три честных варианта: слегка затемнить синий цвет бренда для интерактивных поверхностей, использовать большую или более смелую этикетку, чтобы применяется порог 3:1, или переключить этикетку на более темный цвет, если кнопка светлая. функция предложения инструмент's находит ближайший проходящий оттенок, чтобы вы могли показать маркетинг конкретного, минимальное изменение, а не плоский "нет. "
Проверка текста заполнителя и помощника
Текст-заполнитель является повторяющим преступления, потому что браузеры по умолчанию рендерят его с уменьшенной непрозрачностью, а дизайнеры затем выбирают сверху светло-серый. Не забудьте проверить составной результат, а не номинальный цвет. Композитирование Alpha Checker's делает это за вас: введите цвет заполнителя с его реальной непрозрачностью по входному фону и прочитайте соотношение истинного значения.
Проверка видимости значка и границы
Для проверки пользовательского интерфейса 1.4.11 я проверяю значок или цвет границы на соответствие тому, что находится сразу за ним. Серый разделитель на белой карте, шеврон на цветном заголовке, кольцо фокусировки на поле - все это требует 3:1. Это быстрая проверка, которая ловит " технически все есть, но я могу и #39; не вижу ничего из этого и квоты; класс ошибки.
Как это соотносится с использованием встроенного чека для дизайна?
Инструменты дизайна добавили индикаторы контраста, а инструменты разработки браузера показывают соотношение в палитре цветов, поэтому справедливый вопрос заключается в том, почему вообще хватать специальный инструмент. Вот мое честное сравнение.
| подход | сила | ограничение |
|---|---|---|
| Специальная проверка контрастности | Точное соотношение, все пороги, альфа-композиции, предложения по цвету прохождения, работают на любой цветовой струне | Вы вставляете цвета вручную |
| Плагин инструмента дизайна | в соответствии с вашим монтажным оборудованием | Часто приблизительно, может игнорировать альфа, привязанную к этому приложению |
| Инструменты разработки браузера | Проверяет страницу Live Rendered | Одна пара за раз, никаких предложений, требует, чтобы страница существовала в первую очередь |
| пристально глядя на это | торжественный | Неправильно, постоянно |
Выделенный инструмент выигрывает всякий раз, когда вы работаете с значений, а не с визуализированной страницы - просматривая токены, проверяя спецификацию или исправляя сообщенную ошибку - и всякий раз, когда вам нужна проходящая альтернатива, а не просто вердикт. инструменты разработки браузера лучше, когда страница существует, и вы хотите точно проверить, что на самом деле отправлено. Я использую оба на разных этапах.
Расширенные заметки для команд, которые заботятся
Несколько вещей, которые я узнал, выходит за рамки основ. Во-первых, контраст необходим, но не достаточен. Проход 4.5:1 устраняет один барьер, он не делает интерфейс доступным сам по себе. Вам все еще нужны видимые состояния фокусировки, вы все равно должны избегать передачи смысла только через цвет, и вам все равно нужно настоящее тестирование с помощью реальной вспомогательной технологии. Относитесь к соотношению как к полу, а не к финишу.
Во-вторых, темный режим не является бесплатным. Палитра, которая проходит в режиме Light, может выйти из строя в темном режиме, потому что отношения яркости инвертируются. Проверьте обе темы. Переключатель предварительного просмотра темного фона шашки существует именно потому, что я все время забывал.
В-третьих, будьте осторожны с «достаточно близко». Соотношение 4,48:1 — это провал, а не круглая победа. Экраны различаются, пользователи различаются, а порог имеет встроенную маржу по определенной причине. Если вы на грани, пройдите мимо.
Если вы собираете более широкий набор инструментов, Руководство по набору инструментов для разработчиков веб-разработчика Описывает, как контрастность подходит к другим проверкам, которые стоит автоматизировать. И как только ваши цвета пройдут, такие инструменты, как градиент генератора а палитра Помогите построить остальную часть палитры на уже проверенном фундаменте. Если вы также генерируете метаданные страницы и предварительные просмотры в социальных сетях, Генератор метатегов Хорошо сочетается с тем же проходом перед запуском.
часто задаваемые вопросы
Что такое хороший коэффициент цветового контраста?
Для обычного основного текста стремитесь не менее 4,5:1, чтобы соответствовать WCAG AA и 7:1, чтобы соответствовать более строгому уровню AAA. Большой текст, что означает около 24px или 18,66 пикселей, выделенный жирным шрифтом, для AAA требуется только 3:1 и 4,5:1. Иконки и интерактивные компоненты пользовательского интерфейса требуют не менее 3:1 против своего окружения.
Что считается большим текстом под WCAG?
Большой текст не менее 18pt, примерно 24px, для обычного веса или не менее 14pt, примерно 18,66 пикселя, если выделен жирным шрифтом. Текст на уровне или выше соответствует порогу 3:1 AA или выше, потому что большие формы букв остаются четкими при меньшем контрасте, чем маленькие.
В чем разница между WCAG AA и AAA?
AA — это уровень, на который нацелены большинство законов и организаций, и для обычного текста требуется 4,5:1. AAA — это расширенный уровень и требует 7:1, который подходит для контента, предназначенного для пользователей с низким зрением, но его трудно поразить по всей палитре. Большинство команд рассматривают АА как полосу пропускания, а AAA — стремление к содержанию критического чтения.
Как рассчитывается коэффициент контрастности?
Каждый цвет преобразуется в свою относительную яркость WCAG, скорректированную гамма и перцептивно взвешенную меру яркости. Соотношение (L_Lighter + 0,05) делится на (L_Darker + 0,05), что дает значение от 1:1 для одинаковых цветов до 21:1 для чисто черного на чисто белой.
Влияет ли прозрачность на результат контраста?
да. Полупрозрачный цвет текста позволяет фону просвечивать, что меняет его эффективный цвет. Правильный метод состоит в том, чтобы сначала соединить полупрозрачный передний план над фоном, а затем измерить соотношение, чтобы оценка отражает то, что на самом деле видит пользователь, а не номинальный цвет, который вы установили.
Почему мой текст проходит с большим размером, но не работает при нормальном размере?
Пороги различаются. Нормальному тексту требуется 4.5:1 для AA, в то время как большой текст требует только 3:1, поэтому соотношение между 3 и 4,5 проходит для заголовков, но не выполняется для копирования тела. Либо поднимите контраст для основного текста, либо убедитесь, что сопряжение используется только при больших размерах, где применяется ослабленный порог.
Достаточно ли проходного коэффициента контрастности для доступности?
нет Контрастность необходима, но не достаточна. Вам также нужны видимые состояния фокусировки, вы должны избегать передачи смысла только по цвету, а также тестировать с реальным содержанием и вспомогательными технологиями. Прохождение соотношения устраняет один общий барьер, но сам по себе не делает интерфейс доступным.
Отправляет ли контроль цвет цветоконтрастной ямы куда-нибудь?
нет , йо- Все синтаксические анализы и математика выполняются локально в вашем браузере с помощью JavaScript. Никакие цветовые значения, палитра брендов или скриншоты не загружаются или сохраняются, а инструмент продолжает работать без сетевого подключения после загрузки страницы.
