Проверка контрастности цветов
Проверьте коэффициенты контрастности для соответствия WCAG 2.1. Мгновенная проверка стандартов AA и AAA.
Что такое коэффициент контрастности WCAG?
Коэффициент контрастности WCAG измеряет разницу яркости между цветами переднего и заднего плана. От 1:1 до 21:1.
Каковы требования WCAG AA и AAA?
WCAG AA требует минимум 4.5:1 для обычного текста и 3:1 для крупного. AAA требует 7:1 и 4.5:1 соответственно.
Что считается крупным текстом?
Крупный текст — 18pt (24px) или больше, или 14pt (18.66px) жирный или больше.
Почему важна контрастность?
Правильная контрастность обеспечивает читаемость для людей с нарушениями зрения и улучшает читаемость для всех.
Как рассчитать коэффициент контрастности?
Он рассчитывается с использованием значений относительной яркости. Формула: (L1 + 0.05) / (L2 + 0.05).
Какова минимальная контрастность для UI элементов?
WCAG требует минимум 3:1 для UI компонентов и графических объектов.
Могу ли я использовать любые комбинации цветов?
Не все комбинации соответствуют стандартам доступности. Используйте этот инструмент для проверки.
Что такое относительная яркость?
Это воспринимаемая яркость цвета, от 0 (черный) до 1 (белый). Рассчитывается с использованием цветового пространства sRGB.
Нужно ли проверять контрастность изображений?
Текст на изображениях должен соответствовать тем же требованиям. Для декоративных изображений это не применяется.
Какие инструменты помогают с контрастом?
Используйте инструменты разработчика браузера, плагины для дизайна или онлайн-инструменты, такие как этот.
Как использовать Проверка контрастности цветов
Мгновенно проверяйте контраст текста и интерфейса по порогам AA и AAA стандарта WCAG 2.1 — прямо в браузере. Введите два цвета, соотношение посчитается локально и не покинет устройство.
- Введите или вставьте цвет текста в поле Foreground Color в любом поддерживаемом формате, например HEX или RGB.
- Укажите в поле Background Color цвет подложки под текстом, чтобы вычислить коэффициент контраста.
- Посмотрите итоговое соотношение и отметки AA и AAA о прохождении для обычного и крупного текста.
- Подправьте любой из цветов, пока соотношение не превысит 4,5:1 для основного текста или 3:1 для крупного текста и элементов UI.
- Поменяйте местами значения Foreground Color и Background Color, чтобы проверить обратную пару — например, светлый текст на тёмной теме.
AAA (7:1) — отличная цель для длинного чтения, но минимальный порог большинства гайдлайнов доступности — 4,5:1 (AA).
Похожие инструменты
- Пипетка цветов Выбирайте любой цвет с экрана с помощью пипетки. Копируйте коды HEX, RGB, HSL мгновенно. Бесплатный онлайн-инструмент.
- Генератор цветовых палитр Создавайте красивые гармоничные цветовые палитры мгновенно с нашим бесплатным онлайн-генератором. Поддерживает монохроматический, аналоговый, комплементарный, триадический, расщеплённо-комплементарный и тетрадический режимы. Настраивайте цвета с помощью HSL-слайдеров, блокируйте избранные и экспортируйте в CSS, Tailwind, JSON или SVG. 100% на базе браузера, ваши данные никогда не покидают устройство.
- Симулятор дальтонизма Бесплатный онлайн-симулятор дальтонизма. Тестируйте дизайны для протанопии, дейтеранопии, тританопии и других типов. 100% конфиденциально, работает в браузере.
- GIF Разбор Кадров Извлеките и скачайте отдельные кадры из GIF-анимаций как PNG или спрайт-лист. Бесплатный онлайн-инструмент с просмотром и экспортом ZIP.
- GIF Реверс Измените порядок воспроизведения GIF-анимаций бесплатно онлайн. Загрузите, просмотрите и скачайте мгновенно.
- Изменитель скорости GIF Измените скорость анимации GIF онлайн. Мгновенно ускорьте или замедлите GIF-файлы.
- Видео в GIF Конвертируйте видео в анимированные GIF онлайн. Настраивайте качество, частоту кадров и разрешение прямо в браузере без загрузки файлов.
- Генератор мемов Бесплатный онлайн генератор мемов. Добавьте классические подписи сверху и снизу к любому изображению, перетащите текст и сразу скачайте мем в PNG или JPEG.