Проверка доступности цветов

Введите цвет текста и фона (шестнадцатеричные коды) для проверки их коэффициента контрастности и соответствия стандартам WCAG.

Ввод цветов

Цвет текста

Цвет фона

Предпросмотр текста

Это крупный полужирный текст.

Это обычный текст.

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

21.00:1

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

Обычный текст (AA)

AAA

Крупный текст (AA)

18pt+ or 14pt+ bold

AAA

Компоненты UI (AA)

Buttons, form controls, etc.

WCAG Accessibility Guidelines

Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1

Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1

Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image

Как пользоваться Проверка доступности цветов

1
Введите два цвета
Укажите цвет переднего плана (текста) и цвет фона в виде hex-кодов, например #1a1a1a и #ffffff.
2
Проверьте контраст
Нажмите «Проверить доступность», чтобы вычислить коэффициент контрастности между двумя цветами.
3
Просмотрите результаты WCAG
Посмотрите значки «пройдено» или «не пройдено» для AA и AAA для обычного текста, крупного текста и элементов интерфейса, а также живой предпросмотр.

4
Скорректируйте при необходимости
Поменяйте цвета местами или измените hex-значение, пока сочетание не достигнет уровня WCAG, требуемого вашим проектом.

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

Что такое коэффициент контрастности и что считается хорошим значением?

Коэффициент контрастности измеряет разницу яркости между текстом и его фоном, от 1:1 до 21:1. WCAG требует не менее 4.5:1 для обычного текста и 3:1 для крупного текста на уровне AA, а также 7:1 и 4.5:1 на более строгом уровне AAA.

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

AA — это стандарт, на который ориентируется большинство сайтов и юридических требований, а AAA — это повышенный уровень для максимальной читаемости. Инструмент показывает «пройдено» или «не пройдено» для обоих, чтобы вы могли выбрать подходящую планку.

Почему крупный текст проходит проверку, когда обычный не проходит?

Крупный текст, определяемый примерно как 18pt или 14pt полужирный и выше, легче читать, поэтому WCAG допускает для него более низкий порог контрастности. Одна и та же пара цветов может удовлетворять правилам для крупного текста, но не проходить требование для обычного.

В каком формате вводить цвета?

Вводите цвета в виде hex-кодов в формате #RRGGBB или сокращённом #RGB. Инструмент проверяет ваш ввод и показывает живой предпросмотр обычного и крупного текста, чтобы вы видели реальный результат.

Бесплатный ли инструмент и отправляет ли он мои цвета куда-либо?

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

Проверка доступности цветов

Как пользоваться Проверка доступности цветов

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

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