Читаемость текста
Проверьте читаемость текста с разными сочетаниями цвета текста и фона, измеряя контраст по WCAG, чтобы гарантировать чёткое восприятие на любом экране.
Предпросмотр в реальном времени
Пример заголовка
Вот пример текста для проверки читаемости. The quick brown fox jumps over the lazy dog. 0123456789
Более мелкий текст для сравнения
Оценка читаемости
Соответствие WCAG 2.1
Обычный текст (≥4,5:1)
Крупный текст (≥3:1)
Обычный текст (≥7:1)
Крупный текст (≥4,5:1)
Настройки
Проверьте читаемость текста с разными сочетаниями цвета текста и фона, измеряя контраст по WCAG, чтобы гарантировать чёткое восприятие на любом экране.
Читаемость текста показывает только элементы управления и результаты, относящиеся к его функции. Доступные параметры зависят от инструмента и исходных данных.
Поддерживаемые форматы
Как это работает
Шаг 1
Откройте Читаемость текста и подготовьте данные, которые запрашивает интерфейс
Шаг 2
Настройте видимые параметры под нужный результат
Шаг 3
Проверьте результат перед копированием, экспортом или повторным использованием
Распространённые ошибки
- Не считайте формат или параметр поддерживаемым, если он не показан в интерфейсе.
- Проверяйте значения перед использованием в фирменном стиле, интерфейсе или рабочем файле.
- Для текста и элементов UI дополнительно проверяйте контраст.
Советы профессионалов
- Сохраняйте исходное значение вместе с результатом для сравнения вариантов.
- Используйте форматы, которые действительно показывает инструмент, а не приблизительные преобразования.
- На телефоне и планшете позволяйте тексту и элементам управления переноситься на новые строки.
Обработка данных
Обработка зависит от используемой функции. Согласие, аналитика и функции аккаунта сайта отделены от операции с цветом.
Что делает этот инструмент
Проверьте читаемость текста с разными сочетаниями цвета текста и фона, измеряя контраст по WCAG, чтобы гарантировать чёткое восприятие на любом экране. Читаемость текста сосредоточен на этой задаче и не предполагает функций, которых нет в интерфейсе. Используйте доступные элементы управления, чтобы получить нужный результат, а затем проверьте показанные значения перед переносом в другой инструмент, таблицу стилей, макет или документ.
Подготовка подходящих данных
Начните с данных, которые запрашивает Читаемость текста: цвета, значения, изображения или настройки в зависимости от экрана. На этой странице указаны форматы HEX, RGB, HSL, Texte. Если формат или параметр не показан в интерфейсе, не считайте его поддерживаемым этой конкретной функцией.
Чтение и проверка результата
Оценивайте результат в контексте выполненной операции. Сравните его с исходным значением и проверьте параметры, которые повлияли на вычисление. Для важной визуальной работы также посмотрите результат в реальном интерфейсе, где он будет использоваться, а не только в коде.
Работа на телефоне и планшете
Читаемость текста использует адаптивную разметку сайта. Заголовки, подзаголовки, breadcrumbs и элементы управления могут переноситься на узких экранах, чтобы длинные переводы не обрезались. Всё равно проверьте итоговый результат на устройстве и в контексте будущего использования.
Повторное использование результата
После проверки используйте только действия, которые действительно предлагает Читаемость текста, например копирование или экспорт, если они доступны. Сохраните исходное значение для воспроизведения настройки, а для цветов интерфейса документируйте их назначение и требуемый контраст.
Похожие инструменты
Руководства и уроки
Узнайте, как использовать наши инструменты с подробными руководствами.
text-readability: практическое руководство по accessibility
Локализованное руководство по text-readability: лучшие практики accessibility и частые ошибки.
text-readability: практическое руководство по accessibility
Локализованное руководство по text-readability: лучшие практики accessibility и частые ошибки.
text-readability: практическое руководство по accessibility
Локализованное руководство по text-readability: лучшие практики accessibility и частые ошибки.
Часто задаваемые вопросы
Узнайте, как использовать наши инструменты с подробными руководствами.