Как рассчитывается коэффициент контрастности?

С использованием официальной формулы относительной яркости WCAG 2.x, которая гамма-корректирует каждый цветовой канал перед взвешиванием по человеческому восприятию яркости.

В чём разница между AA и AAA?

AA — это стандартное требование доступности (4,5:1 для обычного текста, 3:1 для крупного текста); AAA — более строгое повышенное требование (7:1 и 4,5:1 соответственно).

Что считается «крупным текстом»?

Текст размером 18pt и крупнее, или 14pt жирным начертанием, подпадает под более мягкие пороги для крупного текста.

Проверяет ли этот инструмент контрастность для UI-элементов, а не только текста?

Нет, он проверяет только четыре стандартных порога контрастности текста (AA и AAA, обычный и крупный текст) — он не проверяет отдельное соотношение 3:1, которое WCAG требует для нетекстовых компонентов интерфейса и графических объектов.

Могу ли я вводить цвета в формате HEX, RGB или названиями цветов?

Большинство версий принимают коды HEX и значения RGB напрямую; проверьте поле ввода, чтобы узнать, какие форматы поддерживаются, прежде чем вводить название цвета.

Почему мои цвета прошли проверку AA, но не прошли AAA?

AAA требует более строгого соотношения 7:1 для обычного текста по сравнению с 4,5:1 для AA, поэтому пара цветов с умеренной контрастностью может соответствовать более мягкому стандарту AA, но не дотягивать до AAA.

В чём разница между соответствием AA и AAA?

AA — стандартный минимум, к которому стремится большинство сайтов (4,5:1 для обычного текста); AAA — более строгий, необязательный уровень (7:1), рекомендуемый для контента, ориентированного на пользователей со слабым зрением.

Обрабатывается на 100% локально в вашем браузере

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

Проверьте, соответствуют ли цвета текста и фона требованиям контрастности доступности WCAG.

Краткий Ответ

Проверка Контрастности Цветов WCAG lets you: Проверьте, соответствуют ли цвета текста и фона требованиям контрастности доступности WCAG. To start, выберите или введите цвет переднего плана (текста) и цвет фона.

Loading tool…

Как использовать этот инструмент

1
Выберите цвета
Выберите или введите цвет переднего плана (текста) и цвет фона.
2
Проверьте коэффициент
Узнайте точный коэффициент контрастности и соответствует ли он порогам AA и AAA.
3
Проверьте читаемость
Посмотрите живой образец текста, отображённый в выбранных цветах обычного и крупного размера.

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

Color Picker

Щёлкните в любом месте загруженного изображения, чтобы определить точный цвет пикселя — HEX, RGB и HSL мгновенно.

SVG Optimizer

Очищайте и уменьшайте SVG-разметку, удаляя комментарии, метаданные и неиспользуемые ID.

Как использовать этот инструмент

Выберите цвета

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

Проверьте коэффициент

Узнайте точный коэффициент контрастности и соответствует ли он порогам AA и AAA.

Проверьте читаемость

Посмотрите живой образец текста, отображённый в выбранных цветах обычного и крупного размера.

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

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

Как использовать этот инструмент

Выберите цвета

Проверьте коэффициент

Проверьте читаемость

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

Как рассчитывается коэффициент контрастности?

В чём разница между AA и AAA?

Что считается «крупным текстом»?

Проверяет ли этот инструмент контрастность для UI-элементов, а не только текста?

Могу ли я вводить цвета в формате HEX, RGB или названиями цветов?

Почему мои цвета прошли проверку AA, но не прошли AAA?

В чём разница между соответствием AA и AAA?

Похожие Инструменты

Color Picker

SVG Optimizer

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

Как использовать этот инструмент

Выберите цвета

Проверьте коэффициент

Проверьте читаемость

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

Как рассчитывается коэффициент контрастности?

В чём разница между AA и AAA?

Что считается «крупным текстом»?

Проверяет ли этот инструмент контрастность для UI-элементов, а не только текста?

Могу ли я вводить цвета в формате HEX, RGB или названиями цветов?

Почему мои цвета прошли проверку AA, но не прошли AAA?

В чём разница между соответствием AA и AAA?

Похожие Инструменты

Color Picker

SVG Optimizer