Color Contrast Checker

Проверяйте контрастность цветов переднего плана и фона по стандартам WCAG AA и AAA

Попробовать пример

Цвет переднего плана (текст)

Цвет фона

Крупный текст (18px жирный)

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

Коэффициент контрастности

14.63:1

Соответствие WCAG

Пройдено

Обычный AA

Пройдено

Обычный AAA

Пройдено

Крупный AA

Пройдено

Крупный AAA

WCAG AAОбычный текст: 4.5:1, Крупный текст (18px+ или 14px жирный): 3:1

WCAG AAAОбычный текст: 7:1, Крупный текст (18px+ или 14px жирный): 4.5:1

Что такое проверка контрастности цветов?

Проверка контрастности цветов измеряет разницу в яркости между цветом переднего плана (как правило, текстом) и цветом фона, выражая результат в виде соотношения. Соотношение 1:1 означает, что цвета идентичны; максимальное значение — 21:1, соответствующее чёрному тексту на белом фоне или наоборот. Руководство по обеспечению доступности веб-контента (WCAG), опубликованное консорциумом W3C, определяет минимальные коэффициенты контрастности, которым должен соответствовать текст, чтобы люди со слабым зрением или нарушениями цветовосприятия могли его читать.

Формула расчёта контрастности взята из WCAG 2.x и основана на относительной яркости — показателе того, насколько ярким воспринимается цвет человеческим глазом. Относительная яркость рассчитывается путём линеаризации каждого канала sRGB (удаления гаммы) и взвешивания каналов по коэффициентам ITU-R BT.709: 0,2126 для красного, 0,7152 для зелёного и 0,0722 для синего. Зелёный вносит наибольший вклад, поскольку человеческий глаз наиболее чувствителен к зелёному свету. Само соотношение вычисляется по формуле (L1 + 0,05) / (L2 + 0,05), где L1 — яркость более светлого цвета.

WCAG определяет два уровня соответствия. Уровень AA требует коэффициента контрастности не менее 4,5:1 для обычного текста и 3:1 для крупного (18px и выше или 14px жирным). Уровень AAA повышает порог до 7:1 и 4,5:1 соответственно. WCAG 2.1 также ввёл критерий успеха 1.4.11, требующий соотношения 3:1 для нетекстовых элементов интерфейса: рамок, иконок и индикаторов фокуса.

Зачем использовать этот инструмент?

Визуальная оценка контрастности ненадёжна. Цвета, которые кажутся различимыми на откалиброванном мониторе, могут сливаться на экране бюджетного ноутбука, под прямыми солнечными лучами или у людей с дейтеранопией. Числовое соотношение устраняет неопределённость и даёт однозначный ответ о соответствии стандарту WCAG.

Мгновенный расчёт
Выберите или введите два цвета — коэффициент контрастности обновляется в реальном времени. Никаких форм для отправки, никакой перезагрузки страницы.
🔒
Обработка данных в браузере
Вычисления яркости выполняются полностью в вашем браузере. Значения цветов не покидают ваше устройство, а куки и аналитика не отслеживают ваши действия.
🎯
Вердикт по AA и AAA
Результаты отображают статус прохождения для WCAG AA и AAA — как для обычного, так и для крупного текста. Вы сразу видите, какие пороги выполнены.
📋
Без регистрации
Откройте страницу и сразу начинайте проверку. Никакой регистрации, никаких ограничений. Инструмент работает офлайн после загрузки страницы.

Сценарии использования

Разработка интерфейса
Перед публикацией изменений интерфейса вставьте цвет текста и фона из вашего CSS в инструмент и убедитесь, что пара соответствует WCAG AA. Это позволяет выявить нарушения контрастности до code review и автоматизированных аудитов.
Передача дизайн-макетов
Дизайнеры могут проверить все пары цветов в файле Figma на соответствие требуемому уровню WCAG перед передачей спецификаций разработчикам. Исправить контрастность на этапе дизайна значительно дешевле, чем после реализации.
Аудит доступности
QA-инженеры, проводящие аудит WCAG, могут точечно проверять конкретные комбинации цветов, выявленные автоматизированными инструментами вроде Lighthouse или axe. Инструмент подтверждает точное соотношение и показывает, какие уровни пройдены.
Токены дизайн-системы
При определении цветовых токенов для дизайн-системы проверяйте каждую пару «передний план / фон», чтобы палитра токенов соответствовала как минимум уровню AA. Документируйте соотношения рядом с токенами — это позволит командам доверять принятым решениям.
Тестирование email-шаблонов
Почтовые клиенты удаляют такие CSS-возможности, как opacity и режимы смешивания, поэтому реальные цвета могут отличаться от исходных. Проверяйте итоговые значения цвета текста и фона в том виде, в котором они отображаются во входящих сообщениях.
Изучение стандартов доступности
Студенты, изучающие WCAG, могут экспериментировать с различными парами цветов и сразу видеть, как меняется соотношение. Изменение одного канала за раз формирует практическое понимание связи яркости с воспринимаемой контрастностью.

Требования WCAG к коэффициенту контрастности

Таблица ниже содержит минимальные коэффициенты контрастности, требуемые WCAG 2.1 для различных типов контента и уровней соответствия. Крупным считается текст размером 18px (24 CSS-пикселя) и выше при обычном начертании, или 14px (18,66 CSS-пикселя) и выше при жирном начертании.

УровеньМин. соотношениеПрименяется кПримечание
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Яркость, AA и AAA: пояснение

Расчёт коэффициента контрастности состоит из трёх этапов: вычисление яркости каждого цвета, получение соотношения и сравнение его с порогами WCAG.

Относительная яркость
Число от 0 (чёрный) до 1 (белый), отражающее воспринимаемую яркость цвета. Оно учитывает нелинейную гамма-кривую sRGB и неодинаковую чувствительность человеческого глаза к красному, зелёному и синему. Чистый зелёный (#00FF00) имеет яркость 0,7152, а чистый синий (#0000FF) — всего 0,0722.
WCAG AA
Базовый уровень доступности, требуемый большинством правовых стандартов, в том числе Европейским законом о доступности (EAA) и Section 508 в США. AA требует соотношения 4,5:1 для обычного текста и 3:1 для крупного. Большинство дизайн-систем устанавливают AA как минимальный уровень для всех текстовых элементов.
WCAG AAA
Расширенный уровень, предназначенный для контента, который должен быть читаем максимально широкой аудиторией, включая пользователей со значительными нарушениями зрения. AAA требует соотношения 7:1 для обычного текста и 4,5:1 для крупного. Мало какие сайты полностью соответствуют уровню AAA, но критически важный контент — юридические уведомления, медицинская информация — нередко ориентируется именно на этот уровень.

Примеры кода

Расчёт коэффициентов контрастности WCAG программным способом. В каждом примере реализованы формула относительной яркости из WCAG 2.x и расчёт коэффициента контрастности. Для сравнения протестированы одинаковые пары: чёрный на белом и индиго на белом.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

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

Каким должен быть хороший коэффициент контрастности текста?
Для основного текста на веб-странице стремитесь к значению не менее 4,5:1 (WCAG AA). Значения выше 7:1 соответствуют WCAG AAA и комфортнее для длительного чтения. Чёрный на белом даёт максимальное соотношение 21:1, однако очень тёмно-серый (#1e293b) на белом фоне всё равно обеспечивает около 12,6:1, что значительно превышает уровень AAA.
Что считается крупным текстом в WCAG?
WCAG определяет крупный текст как 18px (24 CSS-пикселя) при обычном начертании или 14px (18,66 CSS-пикселя) при жирном. Крупный текст получает более низкий порог контрастности, поскольку более крупные буквы легче воспринимаются. В CSS 1px равен 0,75pt, то есть 18pt соответствует 24px.
Является ли WCAG AA юридически обязательным?
Во многих юрисдикциях — да. Европейский закон о доступности (EAA), вступающий в силу в июне 2025 года, ссылается на WCAG 2.1 AA. Section 508 Закона о реабилитации США обязывает федеральные ведомства соответствовать WCAG 2.0 AA. Американский закон об инвалидах (ADA) трактуется судами США как требование создания доступных веб-сайтов со стандартом WCAG AA. Аналогичные требования действуют в Канаде, Австралии и Великобритании.
Как рассчитывается относительная яркость?
Значение каждого канала sRGB (0–255) делится на 255, затем линеаризуется: значения до 0,04045 включительно делятся на 12,92, а значения выше преобразуются по формуле ((c + 0,055) / 1,055) ^ 2,4. Три линеаризованных канала взвешиваются по коэффициентам ITU-R BT.709 (0,2126 R, 0,7152 G, 0,0722 B) и суммируются. Результат — число от 0 до 1.
Зачем в формуле контрастности используется смещение 0,05?
Смещение 0,05 предотвращает деление на ноль, когда один из цветов является чистым чёрным (яркость = 0). Оно также учитывает окружающее освещение и отражения от экрана, которые незначительно повышают воспринимаемую яркость даже самых тёмных пикселей. Без этого смещения чёрный на любом тёмном цвете давал бы бесконечное или ложно высокое соотношение.
Могут ли два цвета пройти AA, но при этом плохо читаться?
Да. Коэффициенты контрастности WCAG измеряют разницу в яркости, а не в оттенке. Насыщенный красный на насыщенном зелёном может технически соответствовать порогу соотношения, но при этом быть некомфортным для некоторых пользователей — особенно для тех, у кого нарушено красно-зелёное цветовосприятие. Сочетания цветов, различающихся как по яркости, так и по оттенку, как правило, воспринимаются лучше.
В чём разница между контрастностью по WCAG 2.x и APCA?
WCAG 2.x использует простое соотношение яркостей, симметричное для переднего плана и фона. APCA (Advanced Perceptual Contrast Algorithm), предлагаемый для WCAG 3.0, применяет модель перцептивной светлоты, учитывающую полярность: тёмный текст на светлом фоне воспринимается иначе, чем светлый текст на тёмном фоне при одинаковой разнице яркостей. APCA пока является рабочим черновиком и не заменил метод WCAG 2.x ни в одном нормативном документе.