Как проверить контрастность цвета текста и фона

Что проверяет инструмент

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

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

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

Как проверить пару цветов

1. Подготовьте цвет текста и цвет фона. Запишите их в поддерживаемом формате, например #333333 и #ffffff. Если вы хотите проверить стандартные значения, оставьте оба поля пустыми. При проверке одного из цветов не рассчитывайте на то, что второй будет выбран из макета автоматически: для него используется значение по умолчанию только при пустом вводе.

2. Введите цвет переднего плана в первое поле, а цвет фона во второе. Для шестнадцатеричной записи используйте # и три либо шесть шестнадцатеричных символов. Для RGB-подобной записи укажите начало rgb, затем три числовых компонента через запятые. Не подставляйте название цвета, произвольную CSS-запись или другую форму шестнадцатеричного значения, если она не соответствует этим вариантам.

3. Запустите проверку и прочитайте возвращённый результат. Для разобранной пары сначала отображается коэффициент контрастности, округлённый до двух знаков после запятой. Затем выводятся четыре оценки по порогам: 4,5 и 7,0 для обычного текста, а также 3,0 и 4,5 для крупного текста.

4. Сопоставьте нужную оценку с задачей. Если вас интересует обычный текст, смотрите две оценки, связанные с порогами 4,5 и 7,0. Для крупного текста используйте оценки по 3,0 и 4,5. Зафиксируйте, какой именно цветовой паре принадлежит результат, особенно если проверяете несколько вариантов подряд.

5. Если результат содержит указание на ошибку вместо обычных оценок, проверьте обе записи. Убедитесь, что в них нет неподдерживаемого синтаксиса, лишних символов или неверного количества компонентов, затем повторите проверку после исправления ввода. Неразбираемый цвет не превращается в обычную оценку контрастности.

Как читать результат и понимать границы проверки

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

Округление происходит до применения пороговых оценок. Из этого следует, что пограничный результат нужно читать вместе с показанным округлённым коэффициентом, а не пытаться восстановить дополнительные знаки самостоятельно. Если передний план и фон одинаковы, коэффициент составляет 1,0, что означает отсутствие контрастного различия между этими двумя цветами.

Например, для текста #767676 на фоне #ffffff передайте первый цвет как передний план, второй как фон и запустите проверку. Проверяемый результат должен иметь форму: коэффициент с двумя знаками после запятой и четыре отдельные пороговые оценки для обычного и крупного текста. Конкретное решение о замене цвета принимайте по фактическим оценкам, которые вернул инструмент.

Если запись цвета не распознана, наличие результата само по себе не означает, что расчёт выполнен: вместо обычного набора оценок возвращается указание на ошибку. Исправьте формат и повторите действие. Поддержка RGB-подобной записи не означает автоматическую проверку диапазона её числовых компонентов, поэтому для предсказуемой проверки используйте осмысленные значения компонентов и проверяйте полученный результат.

Практический пример

Дизайнер проверяет серый текст #767676 на белом фоне #ffffff перед публикацией макета.

Передайте указанные цвета как передний план и фон, запустите проверку и рассмотрите форму возвращённого набора оценок.

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

Ограничения

• Проверка относится к контрасту выбранной пары цветов и не подтверждает полную доступность или соответствие всего дизайна.

Частые ошибки

• Причина: введено название цвета, неподдерживаемая CSS-запись или шестнадцатеричное значение не из трёх и не из шести символов после #. Действие: замените ввод на поддерживаемую форму и повторите проверку; при ошибке ориентируйтесь на указание об ошибке, а не на оценки.

Частые вопросы

Можно ли проверить контраст без ввода цветов?

Да, если оставить оба поля пустыми, проверяются значения по умолчанию: чёрный передний план #000000 и белый фон #ffffff. Если пуст только один ввод, значение по умолчанию применяется к нему.

Какие форматы цветов принимает проверка?

Поддерживаются трёхзначные и шестизначные шестнадцатеричные записи, начинающиеся с #, а также RGB-подобная запись с тремя числовыми компонентами через запятые. Названия цветов и произвольные CSS-формы не относятся к перечисленным вариантам.

Что покажет проверка для одинакового цвета текста и фона?

При одинаковых разобранных цветах коэффициент равен 1,0. Это результат для пары цветов, а не оценка всего макета или интерфейса.