Логотип XTools
XTools

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

Проверить контраст текста и фона по WCAG AA и AAA
  • Файлы не покидают устройство
  • Работает в браузере
  • Бесплатно, без регистрации и водяных знаков

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

Как пользоваться: Проверка контраста

Проверьте пару цветов текста и фона по WCAG 2 (AA и AAA для обычного текста, крупного текста и компонентов интерфейса) и посмотрите контраст светлоты APCA из черновика WCAG 3. Если пара не проходит, предлагаются ближайшие проходящие цвета.

  1. 1

    Введите цвет текста и цвет фона как HEX, rgb(), hsl(), oklch() или имя цвета либо нажмите образец, чтобы открыть палитру.

  2. 2

    Прочитайте коэффициент контраста и результат «Пройдено» или «Не пройдено» для каждой проверки AA и AAA.

  3. 3

    Посмотрите предпросмотр, введите свой образец текста и используйте «Поменять цвета», чтобы проверить обратную пару.

  4. 4

    В «Ближайших проходящих цветах» нажмите «Применить» у предложения «Подогнать текст» или «Подогнать фон» для AA (4.5:1) или AAA (7:1).

  5. 5

    Как только вы меняете цвет, URL страницы хранит оба цвета, и его можно скопировать, чтобы поделиться результатом.

Частые вопросы

Какой коэффициент контраста нужен?

WCAG AA требует 4.5:1 для обычного текста и 3:1 для крупного текста (от 24px или 18.66px жирным) и компонентов интерфейса вроде значков и рамок полей. AAA требует 7:1 и 4.5:1.

Почему 4.497:1 показано как 4.49, а не 4.50?

Коэффициент никогда не округляется вверх через порог, поэтому пара, которая чуть не дотягивает до 4.5:1, не выглядит прошедшей.

Можно ли проверить полупрозрачный текст?

Да. Используйте ползунок непрозрачности текста; полупрозрачный текст смешивается с фоном до измерения коэффициента.

Что такое число APCA?

APCA из черновика WCAG 3 даёт контраст светлоты (Lc), который зависит от того, какой цвет является текстом; отрицательные значения означают светлый текст на тёмном фоне. Это всё ещё черновик, поэтому коэффициенты WCAG 2 остаются обычной целью соответствия.

Как выбираются предложенные цвета?

Меняется только светлота (в OKLCH), поэтому оттенок и характер вашего цвета остаются. Если ни одно направление не достигает цели, сказано «Недостижимо одной сменой светлоты; попробуйте другой цвет».