Используйте палитру как источник вариантов
В «Палитра изображения» можно получить основные группы цветов фотографии или иллюстрации. Принимаются JPG, PNG и WebP до 20 МиБ, 24 мегапикселей и 8192 пикселей по стороне. Выбирайте число цветов исходя из того, сколько вариантов действительно нужно сравнить.
Палитра строится по уменьшенной выборке и не перечисляет каждый оттенок. Недостаточно непрозрачные пиксели пропускаются. Поэтому преобладающий цвет картинки не обязательно совпадает с конкретным фоном под текстом; для проверки нужен реальный цвет этого участка.
Приведите обозначения к одному формату
«Конвертер цветов» показывает непрозрачный цвет в HEX, RGB и HSL. Это разные записи цвета, а не варианты увеличения контраста. Изменение записи с RGB на HEX само по себе не делает буквы темнее.
Для проверки контраста используйте трёх- или шестизначный HEX. Полупрозрачность не поддерживается: если текст или фон прозрачный, сначала нужно определить итоговый цвет на реальной подложке. Конвертер не рассчитывает печатные профили CMYK.
Проверьте текст и фон как одну пару
В «Контраст цветов» задайте отдельно цвет текста и фона. Отчёт показывает соотношение контраста и результаты AA/AAA для обычного и крупного текста. Размер букв не определяется автоматически: выбирайте соответствующую категорию по своему макету.
В расчёте обычный текст сопоставляется с порогами 4,5 и 7, крупный — с 3 и 4,5. Прошедшая пара не подтверждает доступность всего сайта. Клавиатурная навигация, подписи, смысл текста и другие требования этим расчётом не проверяются.
Сравните варианты на реальном размере
Если пара не подходит, попробуйте более тёмный текст или более светлый фон и пересчитайте отношение. Не выбирайте новый оттенок только потому, что он есть в палитре. У одного изображения может быть несколько выразительных, но неподходящих для мелкой надписи цветов.
Проверьте обычное состояние, наведение и другие состояния в своём макете. На фотографии фон под текстом меняется по площади; расчёт одной сплошной пары не оценивает все участки. Для такого случая сначала выберите понятную однотонную подложку.
- Определите точный фон под надписью.
- Получите HEX обоих цветов.
- Проверьте пару и выберите подходящую категорию текста.
- Сравните результат на фактическом размере и во всех нужных состояниях.
Пример подписи на карточке
Для условной карточки можно начать с чёрного текста и белого фона: эта пара даёт отношение 21 к 1. Затем сравните с выбранным брендовым вариантом. Число контраста не заменяет проверку слишком мелкого шрифта или длинной трудночитаемой надписи.
Взять самый частый оттенок иллюстрации для любой подписи.
Проверить конкретную пару цветов отдельно и посмотреть надпись в её реальном размере.
Цвет палитры — кандидат, а не готовая гарантия читаемости.
Вопросы и ответы
Соотношение контраста проверяет шрифт целиком?
Нет, рассчитывается пара цветов. Размер, толщина, содержание и расположение надписи требуют отдельной проверки.
Можно использовать прозрачный HEX с восемью знаками?
В этих инструментах поддерживаются непрозрачные цвета. Для прозрачности сначала определите итоговый цвет на фоне.
Палитра показывает точный цвет каждого пикселя?
Нет, это основные группы по уменьшенной выборке. Для конкретного участка нужен его фактический цвет.
Перевод RGB в HEX увеличивает контраст?
Нет, меняется обозначение того же цвета. Для контраста нужно изменить сами цвета пары.
Можно проверить фон с градиентом одной парой?
Один расчёт относится к одному сплошному цвету. Проверьте все существенные участки либо используйте однотонную подложку.
Успешный AA означает доступность всей страницы?
Нет, отчёт ограничен выбранной парой. Остальные свойства интерфейса и текста остаются вне этой проверки.