AnyTools
🌓
Калькулятор контраста цвета
Проверяйте коэффициенты контраста WCAG 2.1 между любыми цветами переднего плана и фона, предварительный просмотр образца текста и мгновенные результаты прохождения AA/AAA.
Ввод цветов
Передний план
Фон
Предварительный просмотр
Образец текста
Заголовок предварительного просмотраДоступные интерфейсы сочетают яркие цвета бренда с достаточным контрастом, чтобы сохранить текст читаемым.
Результаты контраста
Коэффициент контраста
19.79:1
Относительная яркость
Передний план0.003
Фон1.000
| Критерий | Требуется | Статус | Примечания |
|---|---|---|---|
| AA – обычный текст | 4.5:1 | Пройдено | Основной текст ≥ 4.5:1 |
| AAA – обычный текст | 7.0:1 | Пройдено | Текст высокой важности ≥ 7:1 |
| AA – крупный текст | 3.0:1 | Пройдено | Текст ≥ 18pt обычный или 14pt жирный ≥ 3:1 |
| AAA – крупный текст | 4.5:1 | Пройдено | Крупный текст ≥ 4.5:1 |
| Графика/значки пользовательского интерфейса | 3.0:1 | Пройдено | Основные значки и визуальные состояния ≥ 3:1 |
Руководство по дизайну
Используйте таблицу коэффициентов в качестве ориентира и итерируйте, пока каждое состояние не достигнет целевого уровня.
- Добавьте прозрачность или наложения при размещении текста на фотографиях для сохранения контраста.
- Зарезервируйте AAA для критически важного текста; AA - отличный выбор по умолчанию для большинства панелей.
- Документируйте утвержденные пары цветов в вашей системе дизайна, чтобы разработчики повторно использовали соответствующие палитры.
❓Что такое тестирование контраста цвета
Тестирование контраста цвета гарантирует, что текст или значки остаются читаемыми, измеряя разницу между яркостью переднего плана и фона, ключевое требование в WCAG и большинстве руководств по брендингу.
✨Основные функции
🎨
Выбор цвета в реальном времени
Настраивайте цвета переднего плана и фона с помощью палитры выбора цветов или вводите точные значения HEX.
📊
Матрица WCAG
Просматривайте требования AA/AAA для обычного текста, крупного текста и графики пользовательского интерфейса в одной таблице.
🧮
Точная яркость
Коэффициенты контраста соответствуют WCAG 2.1, используя линеаризованные RGB-каналы и включают показания яркости для каждого цвета.
👁️
Блок предварительного просмотра
Тестируйте заголовки и абзацы внутри живой примерной карточки с выбранной палитрой.
📋Руководство по использованию
Выбрать цвета
Выберите или вставьте значения HEX для переднего плана и фона.
Просмотреть коэффициент
Проверьте рассчитанный коэффициент контраста и таблицу AA/AAA для получения информации о прохождении/непрохождении.
Настроить копию
Отредактируйте образец текста для предварительного просмотра реальных ярлыков, кнопок или маркетингового текста.
📚Техническое введение
🔢Относительная яркость
Каждый RGB-канал преобразуется в линейное значение с использованием гамма-кривой WCAG перед вычислением яркости с коэффициентами 0.2126, 0.7152 и 0.0722.
⚖️Коэффициент контраста
Формула коэффициента (L1 + 0.05) / (L2 + 0.05) сравнивает более светлые и более темные цвета для обеспечения постоянной читаемости на всех устройствах.
📐Пороги
AA обычный текст требует ≥ 4.5:1, крупный текст ≥ 3:1, AAA обычный нуждается в 7:1, AAA крупный 4.5:1, а графические объекты должны соответствовать 3:1.
❓
Frequently Asked Questions
❓
Крупный текст использует другие пороги?
Да. Текст ≥ 18px обычный или 14px жирный считается крупным и требует только 3:1 для AA или 4.5:1 для AAA.
💬
Как тестировать градиенты?
Проверьте самые светлые и самые темные остановки в градиенте. Каждая пара остановок должна соответствовать желаемому коэффициенту.
🔍
Значки считаются текстом?
Сплошные значки и основная графика пользовательского интерфейса должны соответствовать как минимум 3:1 контраста относительно их фона.
💡How To & Tips
🧭
Начните с палитры бренда
Быстро меняйте цвета для тестирования светлых и темных тем из одной базовой палитры.
🪄
Итерируйте небольшими шагами
Настраивайте значения HEX или используйте ползунок палитры цветов, чтобы увидеть, как небольшие настройки влияют на соответствие.
📝
Предварительный просмотр контента
Вставьте реальный текст пользовательского интерфейса в блок предварительного просмотра для оценки иерархии и акцентов.
🔗Related Documents
📖WCAG 2.1 Контраст (Критерий успеха 1.4.3)-Официальное руководство по минимальным уровням контрастности для текста и изображений текста.
🧭MDN - Вычисление яркости-Справочная информация о линейной формуле RGB, используемой в инструментах доступности.
📐W3C - Математика коэффициента контраста-Подробности о формуле коэффициента, округлении и обосновании.
📝Журнал обновлений
📌v1.0.251117v1.0.0Первый выпуск с таблицей WCAG, считыванием яркости и живой карточкой предварительного просмотра.(17 November 2025)
📦Рекомендуемые компоненты
User Comments
Loading...