Проверьте коэффициенты цветового контраста на соответствие требованиям веб-доступности. Тестируйте комбинации цветов текста и фона в соответствии с рекомендациями WCAG с предварительным просмотром в реальном времени, оценками доступности и предложениями по улучшению.
Выберите цвет текста
Нажмите на первый инструмент выбора цвета, чтобы выбрать цвет текста, или введите шестнадцатеричный код напрямую.
Выберите цвет фона
Используйте второй инструмент выбора цвета, чтобы выбрать цвет фона для проверки контраста.
Просмотрите результаты контраста
Проверьте рассчитанный коэффициент контрастности и посмотрите оценки AA/AAA для обычного и крупного текста.
Предварительный просмотр вашего дизайна
Просмотрите предварительный просмотр в реальном времени, чтобы увидеть, как ваша цветовая комбинация выглядит с фактическим текстовым содержимым.
Проверка контраста в реальном времени
Мгновенно рассчитывайте коэффициенты контрастности, выбирая различные комбинации цветов текста и фона.
Оценки соответствия WCAG
Получайте оценки AA и AAA для обычного и крупного текста в соответствии с Рекомендациями по обеспечению доступности веб-контента.
Панель предварительного просмотра в реальном времени
Точно увидите, как ваши цветовые комбинации будут выглядеть с образцом текста обычного и крупного размера.
Визуальный индикатор оценки
Оценивайте контрастность с помощью интуитивно понятной круговой диаграммы, показывающей баллы от 0 до 100.
Интерактивные палитры цветов
Легко выбирайте цвета с помощью встроенных инструментов выбора цвета как для текста, так и для фона.
Советы по доступности
Получите практические рекомендации по улучшению контраста и соблюдению стандартов доступности.
Инструмент проверки цветового контраста — это инструмент, который измеряет разницу в яркости между цветами текста и фона. Он рассчитывает коэффициенты контрастности в соответствии со стандартами WCAG (Руководство по обеспечению доступности веб-контента), чтобы гарантировать читаемость контента для пользователей с нарушениями зрения, включая дальтонизм и слабовидение.
Соответствие WCAG
Убедитесь, что ваши проекты соответствуют международным стандартам доступности с точными оценками AA и AAA.
Обратная связь в реальном времени
Видите мгновенные результаты при настройке цветов, что упрощает поиск соответствующих комбинаций.
Система визуальной оценки
Мгновенно оценивайте контрастность с помощью нашей интуитивно понятной системы оценки от 0 до 100.
Не требует установки
Мгновенно проверяйте цветовые комбинации в браузере без загрузки какого-либо программного обеспечения.
Для обычного текста стремитесь к соотношению не менее 4.5:1 для соответствия AA или 7:1 для AAA. Крупный текст (18pt или 14pt жирный) требует 3:1 для AA или 4.5:1 для соответствия AAA.
AA — это стандартный уровень соответствия доступности, требуемый большинством правил. AAA — это наивысший уровень, обеспечивающий расширенную доступность для пользователей с более серьезными нарушениями зрения.
Коэффициент контрастности рассчитывается с использованием относительной яркости цветов, как это определено в рекомендациях WCAG. Он варьируется от 1:1 (без контраста) до 21:1 (максимальный контраст).
Крупный текст определяется как 18 пунктов (24px) или крупнее, или 14 пунктов (18.66px) или крупнее, если он жирный. Крупный текст имеет более мягкие требования к контрастности.
Хороший цветовой контраст гарантирует читаемость контента для всех, включая пользователей с нарушениями зрения, дальтонизмом или тех, кто просматривает контент при ярком солнечном свете или на плохих дисплеях.
Инструмент принимает шестнадцатеричные цветовые коды. Вы можете конвертировать из других форматов (RGB, HSL и т.д.) в шестнадцатеричный, используя онлайн-конвертеры или дизайнерские инструменты.