ÐÑовеÑка конÑÑаÑÑа ÑвеÑа
ÐÑовеÑÑÑе коÑÑÑиÑÐ¸ÐµÐ½Ñ ÐºÐ¾Ð½ÑÑаÑÑа WCAG Ð¼ÐµÐ¶Ð´Ñ ÑвеÑом ÑекÑÑа и Ñона.
ÐÑедпÑоÑмоÑÑ ÐºÑÑпного ÑекÑÑа
Так вÑглÑÐ´Ð¸Ñ Ð¿ÑедпÑоÑмоÑÑ Ð¾Ð±ÑÑного ÑекÑÑа.
РпÑовеÑке конÑÑаÑÑа ÑвеÑа
ÐÑовеÑÑÑе, ÑооÑвеÑÑÑвÑÐµÑ Ð»Ð¸ вÑбÑанное ÑоÑеÑание ÑвеÑа ÑекÑÑа и Ñона ÑÑебованиÑм конÑÑаÑÑа доÑÑÑпноÑÑи WCAG 2.1. AA â минималÑнÑй ÑекомендÑемÑй ÑÑандаÑÑ; AAA â ÑаÑÑиÑеннÑй ÑÑандаÑÑ Ð´Ð»Ñ Ð»ÑÑÑей ÑиÑаемоÑÑи.
Что это за инструмент?
Проверьте, соответствует ли сочетание цвета переднего плана (текста) и фона стандартам контраста доступности WCAG 2.1. Получите мгновенный коэффициент контраста и результаты прохождения/непрохождения для уровней соответствия AA и AAA.
Как использовать
- Выберите или введите шестнадцатеричное значение для цвета переднего плана (текста).
- Выберите или введите шестнадцатеричное значение для цвета фона.
- Просмотрите живой предпросмотр и результаты прохождения/непрохождения для каждого уровня WCAG.
Типичные случаи использования
- Проверка соответствия выбора цвета текста и фона требованиям доступности перед публикацией дизайна
- Выбор читаемых цветовых сочетаний для кнопок, ссылок и основного текста
- Аудит существующего сайта или приложения на соответствие требованиям доступности
Советы и хитрости
- AA (4,5:1) — минимальный стандарт, которому должно соответствовать большинство сайтов для обычного текста.
- Крупный текст (от 18pt, или от 14pt жирным) имеет более низкое требуемое соотношение, так как его легче читать при меньшем контрасте.
Часто задаваемые вопросы
В чём разница между соответствием WCAG AA и AAA?
AA — это минимальный стандарт, которому должна соответствовать большинство сайтов, требуя коэффициент контраста 4,5:1 для обычного текста. AAA — более строгий стандарт, требующий 7:1, предназначенный для контента, где максимальная читаемость критична.
Почему крупный текст имеет более низкое требуемое соотношение контраста?
Больший текст (от 18pt обычный, или от 14pt жирный) по сути легче читать при более низком контрасте, поэтому WCAG устанавливает сокращённый минимум 3:1 для AA соответствия крупного текста в сравнении с 4,5:1 для обычного.
Как на самом деле вычисляется коэффициент контраста?
Он основан на относительной светности обоих цветов, вычисленной в соответствии с формулой WCAG, и выражена как соотношение от 1:1 (нет контраста, идентичные цвета) до 21:1 (максимальный контраст, чёрный на белом).
Что делать, если моё цветовое сочетание не проходит проверку контраста?
Попробуйте затемнить цвет текста, осветлить фон или увеличить размер текста, чтобы попасть под более низкий порог крупного текста, у которого требуемое соотношение ниже.
Цвета, которые я тестирую, отправляются куда-нибудь?
Нет. Коэффициент контраста вычисляется полностью в вашем браузере, используя стандартные формулы WCAG — никакие данные о цвете не передаются или не сохраняются.
Проверьте коэффициент контраста WCAG между цветом текста и фона. Мгновенно проверьте соответствие уровням доступности AA/AAA, бесплатно и онлайн.