QuickATools

Инструменты разработчика · Free browser tool

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

Проверяйте контраст текста и фона в реальном времени. Мгновенно подтверждайте соответствие WCAG 2.1 AA и AAA для доступного веб-дизайна.

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

Какие соотношения контраста реально требует WCAG 2.1?

Критерий успеха WCAG 2.1 1.4.3 (Contrast Minimum) требует соотношение не менее 4.5:1 для обычного текста и 3:1 для крупного текста на уровне AA. Уровень AAA (1.4.6 Contrast Enhanced) поднимает пороги до 7:1 для обычного текста и 4.5:1 для крупного. Соотношения считаются по относительной яркости (relative luminance) каждого цвета и лежат в диапазоне от 1:1 (одинаковые цвета) до 21:1 (чистый чёрный на чистом белом).

В чём практическая разница между AA и AAA?

AA — самый распространённый целевой уровень для публичных сайтов, госуслуг и коммерческих продуктов: он балансирует читаемость и гибкость дизайна. AAA — более строгий расширенный уровень, когда нужна максимальная читаемость (например, длинные тексты или аудитория со значительной слабостью зрения). Достигать AAA для каждого элемента UI часто непрактично, поэтому многие команды целится в AA глобально и в AAA для критичного основного текста.

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

Крупный текст — это не менее 18 point (обычно ~24px) обычного начертания или не менее 14 point (обычно ~18.66px) жирного. Заголовки и hero-тексты часто подходят; абзацы body обычно нет. У крупного текста ниже порог контраста, потому что крупные глифы остаются читаемыми при более слабом контрасте — но проверяйте фактический размер в CSS, а не только в макете.

Почему контраст цвета так важен для доступности?

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

Инструменты, которые тоже могут понадобиться

Откройте другие бесплатные браузерные утилиты для продавцов, создателей и профессионалов.

Почему контраст цвета обязателен для доступных интерфейсов

Безбарьерный дизайн — не «полировка напоследок», а то, как люди со слабым зрением, нарушением цветового восприятия или сильным уличным бликом всё ещё читают ваш UI. WCAG 2.1 задаёт минимальные соотношения контраста между текстом и фоном, чтобы контент оставался разборчивым для гораздо более широкого круга пользователей. Невыполнение этих порогов тихо исключает людей из форм, документации, дашбордов и маркетинговых страниц, которые дизайнерам на откалиброванных мониторах кажутся нормальными.

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

AA требует 4.5:1 для обычного текста и 3:1 для крупного; AAA поднимает планку до 7:1 и 4.5:1. Крупный текст обычно означает 18pt (около 24px) regular или 14pt (около 18.66px) bold. Используйте этот инструмент как быстрый gate на дизайн-ревью, затем подтверждайте финальный UI в контексте — иконки, градиенты и оверлеи могут менять эффективный контраст даже когда два плоских hex проходят проверку.

Другие инструменты для разработчиков на этом сайте: проверить шаблоны форм в Regex Tester, разобрать auth-токены в JWT Decoder, привести design tokens в JSON с JSON Formatter & Validator или закодировать ассеты через Base64 Encode/Decode. Для товарных фото маркетплейсов Product Photo Background Checker использует ту же математику яркости на реальных изображениях.