Перейти к содержимому

Проверка контраста

Проходит ли пара цветов WCAG AA и AAA — для обычного и крупного текста, иконок и рамок. С подсказкой ближайшего цвета, который проходит, APCA и симуляцией дальтонизма.

  • WCAG 2.2 AA · AAA
  • APCA Lc
  • 5 типов зрения
  • Бесплатно, без входа

Пара цветов

Размер текста

Крупный — от 24px, или от 18,7px полужирным.

Уровень

Результат

Съешь ещё этих мягких булок

Съешь же ещё этих мягких французских булок да выпей чаю. Так выглядит текст этого размера на вашем фоне.

Контраст WCAG18.89:1
AA пройден

Обычный текст · нужно 4.5:1

APCALc 105

любой текст

  • Обычный текст · AA4.5:1Да
  • Обычный текст · AAA7:1Да
  • Крупный текст · AA3:1Да
  • Крупный текст · AAA4.5:1Да
  • Иконки и границы полей · 1.4.113:1Да

Как пару видят люди с дальтонизмом

Симуляция Machado et al. (2009) в линейном RGB. Контраст под каждой плашкой посчитан для смоделированных цветов.

  • Обычное зрение18.89:1
  • Протанопиянет красных колбочек · ~1% мужчин18.89:1
  • Дейтеранопиянет зелёных колбочек · ~1% мужчин18.89:1
  • Тританопиянет синих колбочек · редко18.89:1
  • Ахроматопсиябез цвета, только яркость18.89:1
Как это работает

Четыре шага до читаемости

  1. Шаг 1. Выберите цвета

    Пипеткой или HEX-кодом — короткая запись вроде #fff тоже подходит.

  2. Шаг 2. Получите коэффициент

    Считаем по формуле относительной яркости WCAG 2 и показываем без округления вверх.

  3. Шаг 3. Проверьте соответствие

    AA или AAA, обычный или крупный текст, иконки и границы — и APCA для WCAG 3.

  4. Шаг 4. Исправьте и поделитесь

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

Вопросы

Про контраст

Что такое коэффициент контрастности WCAG и как он считается?

Коэффициент контрастности WCAG измеряет разницу относительной светимости между двумя цветами. Светимость — это воспринимаемая яркость цвета, рассчитываемая из его RGB-каналов с гамма-коррекцией под человеческое зрение. Коэффициент варьируется от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Чем выше коэффициент, тем легче читать текст — особенно пользователям со слабым зрением или дальтонизмом.

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

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

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

Крупный текст — это 18pt (24px) и больше для обычного начертания, или 14pt (~18.67px) для жирного. Порог ниже, потому что физический размер делает глифы более читаемыми. Основной текст 16px не считается крупным.

Как тестировать доступность тёмной темы?

Поменяйте местами цвет текста и фон — введите тёмный фон как background и светлый текст как foreground. Многие дизайны проваливают тёмную тему, потому что дизайнеры просто инвертируют пару без повторной проверки. Всегда тестируйте обе темы независимо.

Применяется ли контрастность WCAG к иконкам и UI-элементам?

Да. WCAG 1.4.11 (Non-text Contrast) требует 3:1 для иконок, передающих информацию, границ форм и индикаторов фокуса относительно соседних цветов.
Дальше

Другие инструменты UIXColors, которые хорошо дополняют «Проверка контрастности WCAG».

Руководство

Смотрите также

Популярные цвета и их контраст

Скопировано