ЛОКАЛЬНЫЙ ДВИЖОК // В БРАУЗЕРЕ

Проверка Контрастности Цветов WCAG

Проверьте соответствие текста критериям доступности WCAG 2.1 AA и AAA. Расчет коэффициента контрастности для фона и шрифта в памяти браузера.

ИНСТРУМЕНТ // CONTRAST-CHECKER ПРОВЕРЕНО OK // 0.0 мс

Таблица Быстрого Сравнения

Минимальный Контраст 1:1 (одинаковые цвета)

Максимальный Контраст 21:1 (черный на белом)

Уровень WCAG AA (Обычный Текст) Минимум 4.5:1

Уровень WCAG AA (Крупный Текст) Минимум 3.0:1

Уровень WCAG AAA (Обычный Текст) Минимум 7.0:1

Уровень WCAG AAA (Крупный Текст) Минимум 4.5:1

Математическая Формула

C = \frac{L_{\max} + 0.05}{L_{\min} + 0.05}, \quad L = 0.2126 R_{\text{lin}} + 0.7152 G_{\text{lin}} + 0.0722 B_{\text{lin}}

Контрастность вычисляется нормализацией цветовых каналов sRGB в линейное пространство с последующим взвешиванием по спектральной чувствительности человеческого зрения.

Обзор и Технические Особенности

Контрастность текста и элементов пользовательского интерфейса относительно фона — ключевой фактор доступности цифровых продуктов для людей с ослабленным зрением, нарушениями цветовосприятия (дальтонизмом) и пользователей мобильных устройств при ярком солнечном свете. Руководство по обеспечению доступности веб-контента W3C Web Content Accessibility Guidelines (WCAG 2.1 / 2.2) законодательно закрепляет обязательные пороги контрастности для государственных, коммерческих и образовательных веб-сайтов в США (Section 508, ADA), Европейском союзе (European Accessibility Act) и ряде других стран.

Kitiverse Contrast Checker автоматически рассчитывает точный коэффициент контрастности (от 1:1 до 21:1) между цветом переднего плана и фоном по официальной спектральной формуле относительной яркости CIE. Инструмент мгновенно валидирует проверяемую пару цветов по уровням соответствия WCAG AA (минимум 4.5:1 для обычного текста и 3:1 для крупного текста) и WCAG AAA (минимум 7:1 для обычного текста и 4.5:1 для крупного), наглядно отображая живое превью типографики и интерфейсных компонентов без задержек и передачи персональных данных.

В новейшей версии спецификации доступности WCAG 3.0 разрабатывается усовершенствованный алгоритм контрастности APCA (Accessible Perceptual Contrast Algorithm). В отличие от классического соотношения WCAG 2.1, APCA учитывает полярность контраста (темный текст на светлом фоне читается легче, чем светлый на темном), особенности пространственной частоты шрифта и рендеринг тонких начертаний. Наш калькулятор помогает дизайнерам создавать интерфейсы, которые гарантированно пройдут все государственные и международные аудиты.

Как проверить доступность и контрастность шрифта по стандарту WCAG

Введите или выберите цвет текста (переднего плана) в формате HEX или RGB.

Введите или выберите цвет фонового элемента интерфейса.

Инструмент мгновенно вычислит коэффициент контрастности и отобразит бейджи прохождения стандартов AA и AAA.

Оцените читаемость текста в интерактивном окне предварительного просмотра обычного и крупного начертания.

Используйте кнопку автоподбора светлоты для быстрой корректировки цвета до достижения проходного порога.

Часто Задаваемые Вопросы

Какой текст считается 'крупным' (Large Text) по критериям WCAG?

Согласно спецификации WCAG, крупным считается текст размером не менее 18pt (24px) для обычного начертания либо не менее 14pt (примерно 18.66px) для полужирного (bold) начертания.

Что произойдет при нарушении требований стандарта доступности WCAG AA?

В США и странах ЕС несоблюдение стандартов доступности сайтов коммерческих и государственных структур может повлечь судебные иски по закону ADA (Americans with Disabilities Act) и штрафные санкции регулирующих органов.

Почему формула относительной яркости отдает наибольший вес зеленому цвету (0.7152)?

Человеческий глаз наиболее чувствителен к зеленой части светового спектра (пик чувствительности палочек и колбочек сетчатки), поэтому зеленый компонент вносит наибольший вклад в субъективное ощущение яркости.

Требуется ли проверка контрастности для отключенных (disabled) кнопок?

Нет. Спецификация WCAG исключает неактивные элементы управления, декоративные элементы и логотипы из обязательных требований по минимальному контрасту.

Можно ли менять цвета местами одним кликом?

Да. Нажмите кнопку смены направления (⇄), чтобы мгновенно поменять местами цвет текста и фона.

Сохраняются ли введенные корпоративные цвета бренда конфиденциальными?

Да. Все вычисления производятся в локальной памяти вашего браузера. Никакие дизайн-токены не передаются по сети.

Как влияет толщина и начертание шрифта (font-weight) на читаемость при граничном контрасте?

Тонкие начертания (Light, Thin 100–300) требуют более высокого коэффициента контрастности для комфортного восприятия глазом, поэтому для пограничных значений контраста рекомендуется увеличивать насыщенность шрифта до Medium или Bold.

Требуется ли соблюдать контраст 4.5:1 для иконок интерфейса и границ полей ввода?

Согласно критерию WCAG 2.1 Non-Text Contrast (1.4.11), графические элементы пользовательского интерфейса, иконки кнопок и границы активных полей ввода должны иметь контраст не менее 3:1 относительно окружающего фона.

Связанные Инструменты в Этом Разделе

Все инструменты категории «Цвет и Дизайн» →

Цвет и Дизайн →

Конвертер HEX в RGB и HSL

Мгновенно преобразуйте шестнадцатеричные коды цвета HEX (#RRGGBB) в RGB, HSL, HSV и CMYK. 100% расчет на стороне клиента без передачи данных.

Цвет и Дизайн →

Палитра Цветов и Eyedropper

Профессиональная палитра цветов и пипетка EyeDropper API. Мгновенная конвертация HEX, RGB, HSL, HSV, расчет относительной яркости и контрастности.

Изображения и Графика →

Изменение Размера Изображений и Пропорций

Изменяйте разрешение PNG, JPEG и WebP в пикселях, блокируйте соотношение сторон (16:9, 4:5, 1:1) и рассчитывайте размер для печати при 300 DPI прямо в браузере.

Документы и PDF →

Преобразование PDF в Оттенки Серого

Конвертируйте цветные документы PDF в оттенки серого (Grayscale) и монохромный Ч/Б режим для экономии тонера при печати и уменьшения размера файла.

Документы и PDF →

Сортировка и Разделение PDF

Визуально переставляйте, поворачивайте, удаляйте и извлекайте страницы PDF через интерактивную сетку миниатюр. Разделяйте тяжелые документы на части.

Документы и PDF →

Конвертер Изображений в PDF

Конвертируйте JPG, PNG, WebP, GIF и BMP в PDF высокого разрешения. Изменение порядка страниц, поворот на 90°, поля, форматы A4 и Letter, 100% локально.

Неинституциональное уведомление:

Этот сервис предоставляется исключительно в ознакомительных и расчетных целях. Проверяйте критические расчеты.