Go Toolstack

Проверка контрастности цветов (WCAG 2.1)

Тестирование читаемости текста на фоне по стандартам доступности WCAG AA и AAA

Проверка контрастности цветов (WCAG 2.1)

Тестирование читаемости текста на фоне по стандартам доступности WCAG AA и AAA

Как это работает

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

Другие клиентские утилиты в этой категории

Хаб: Инструменты Разработчика • Рабочие процессы и руководство по сравнению

Ознакомьтесь со всеми инструментами категории «Инструменты Разработчика», лимитами и руководством по выбору.

Перейти в хаб →
JSON Форматировщик и Валидатор

Форматируйте, сжимайте и валидируйте данные JSON с 64-битной точностью и правилами JSON Schema (Draft-07 / 2020-12).
Base64 Кодировщик и Декодер

Быстрое двустороннее кодирование и декодирование текста, двоичных данных и изображений в Base64
SQL Форматировщик и Бьютификатор

Автоматическое приведение к стандарту и форматирование сложных SQL-запросов (PostgreSQL, MySQL, Oracle)

Связанные руководства в блоге

Технические руководства, устранение неполадок и практические инструкции

Инструменты Разработчика • ~4 мин чтения

Распространенные ошибки синтаксиса JSON: Руководство по стандарту RFC 8259 | GoToolstack

Устранение лишних запятых, одинарных кавычек и ключей без кавычек в JSON. Защита точности больших целых чисел BigInt и форматирование данных.

Читать руководство →
Инструменты Разработчика • ~4 мин чтения

Почему CSV файлы ломаются в Excel: Кодировка UTF-8, разделители и ведущие нули | GoToolstack

Устранение ошибок открытия CSV в Excel. Разбор кодировки UTF-8 с BOM, конфликта запятой и точки с запятой, удаления нулей и ограничения точности в 15 знаков.

Читать руководство →
Центр знаний и экспертное руководство

WCAG Калькулятор Контрастности Цветов, Проверка Доступности Текста и Относительная Яркость

Проверка контрастности цветов по международному стандарту доступности веб-контента WCAG 2.1 (Web Content Accessibility Guidelines) гарантирует удобство чтения текста всеми категориями пользователей, включая людей с пониженной остротой зрения и особенностями цветовосприятия. Алгоритм рассчитывает математическое отношение относительной яркости между цветом шрифта и цветом подложки.

Пользователь вводит цвета текста и фона в формате HEX, RGB или HSL (либо выбирает их пипеткой). Например, при проверке серого текста #64748b на белом фоне #ffffff калькулятор вычисляет точный коэффициент контрастности 4.62:1. Инструмент мгновенно отображает статус прохождения уровней доступности: Уровень AA (пройден для нормального текста с порогом 4.5:1) и Уровень AAA (не пройден, требуется порог 7.0:1). Встроенный интерактивный блок предпросмотра демонстрирует начертание заголовков и обычного текста, а алгоритм рекомендаций предлагает скорректировать оттенок в один клик для достижения соответствия AAA.

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

Архитектура и математическая формула

Относительная яркость (L) = 0.2126R' + 0.7152G' + 0.0722B' ; Коэффициент контрастности = (L₁ + 0.05) / (L₂ + 0.05)

Цветовые каналы sRGB линеаризуются с компенсацией гамма-коррекции для вычисления взвешенной яркости L, после чего находится соотношение между более светлым (L₁) и более темным (L₂) цветом.

Лучшие практики и ключевые рекомендации

  • Стремитесь к минимальному коэффициенту контрастности 4.5:1 для обычного текста: Это базовое требование уровня WCAG 2.1 AA для всех основных текстовых параграфов сайта.
  • Для крупного текста (от 18pt или жирного 14pt) допустим порог 3.0:1: Заголовки и крупные баннеры легче воспринимаются глазом, поэтому стандарт допускает меньший контраст.
  • Не забывайте про контрастность элементов интерфейса и иконок: Кнопки, поля форм и графические маркеры должны иметь контраст не менее 3.0:1 относительно окружающего фона.
  • Используйте подсказку автоподбора цвета для быстрого достижения стандарта AAA: Нажмите кнопку 'Подобрать оттенок', чтобы инструмент слегка затемнил или осветлил цвет до необходимого порога 7.0:1.

Часто задаваемые вопросы (FAQ)

В чем разница между уровнями соответствия WCAG AA и AAA?
Уровень AA — общепринятый мировой стандарт для коммерческих сайтов (порог 4.5:1 для текста). Уровень AAA — строгий стандарт повышенной доступности для государственных порталов и медицины (порог 7.0:1).
Каков максимальный и минимальный возможный коэффициент контрастности?
Минимальный коэффициент равен 1:1 (одинаковые цвета), а максимальный — 21:1 (абсолютно черный текст #000000 на абсолютно белом фоне #ffffff).
Что считается 'крупным текстом' (Large Text) по спецификации WCAG?
Крупным считается текст размером от 18 пунктов (примерно 24px) для обычного начертания или от 14 пунктов (примерно 18.66px) для полужирного (bold) начертания.
Помогает ли калькулятор подобрать правильный оттенок, если тест не пройден?
Да, интеллектуальный модуль оптимизации автоматически рассчитывает ближайший оттенок того же цветового тона, который удовлетворяет требованиям стандартов AA или AAA.