Перевірка контрасту палітри (до 12 кольорів)

Звичайна перевірка контрасту відповідає на одне питання для однієї пари. У бренду десяток кольорів і десятки пар. Введіть палітру, до 12 кольорів, і таблиця покаже коефіцієнт контрасту WCAG для кожної пари: які пари безпечні для тексту, а які годяться лише для великого тексту, іконок і рамок. Розрахунок іде у вашому браузері; кольори нікуди не надсилаються.

Як вводити кольори

Один колір на рядок або через крапку з комою. Назва перед двокрапкою необов'язкова: Primary: #2f47d9. Підтримуються hex (і з альфа-каналом), rgb(), rgba(), hsl(), hsla(), назви кольорів на кшталт navy та CSS-змінні, скопійовані з таблиці стилів, як-от --brand-500: #2f47d9;. Рядок, який не вдалося прочитати, показано під полем, тож одруківка не загубить колір непомітно. Напівпрозорі кольори спершу змішуються з тлом.

Як читати матрицю

Рядки — кольори тексту, стовпці — тло. У кожній клітинці — маленька картинка пари, коефіцієнт і найвищий рівень, якого пара досягає:

Коефіцієнт рахується за формулою WCAG 2.x і відкидається, а не округлюється, до двох знаків: 4,49 — це не 4,5. Кожна клітинка має й текст для програм читання з екрана («Чорнило на Папері: 16,1 : 1, AAA»), а таблиця має заголовки рядків і стовпців, тож її можна читати клітинка за клітинкою з клавіатури.

Фільтр і експорт

Оберіть рівень, якого пара має досягти, щоб вважатися прийнятною, і поставте позначку «Показувати в матриці лише прийнятні пари», щоб сховати решту. Список під матрицею містить прийнятні пари, найкращі першими. Копіювати як CSS-змінні дає палітру як користувацькі властивості з прийнятними парами в коментарі; Копіювати як таблицю Markdown дає прийнятні пари для сторінки дизайн-системи чи pull request.

Чого матриця не скаже

• Стани елементів. Кольори наведення, фокусу, натискання, відвіданого посилання й вимкненого стану — окремі пари; додайте їх окремими рядками.
• Нерівне тло. Текст на фото чи градієнті треба перевіряти на найсвітлішому й найтемнішому місці в перевірці контрасту, яка вміє брати кольори із зображення.
• Зміст, переданий лише кольором. Червона помилка й зелений успіх однакової яскравості схожі для багатьох людей. WCAG вимагає ще одну ознаку, наприклад іконку чи текст (1.4.1 Використання кольору).
• Контраст на ваших реальних сторінках. Палітра, що проходить, усе одно може бути застосована неправильно. Перевіряйте живу сторінку в WCAG-перевірці.

Це автоматичний розрахунок, а не повний аудит, і не юридична консультація.

Як зібрати палітру, що проходить

Почніть із двох опор: темного чорнила для тексту й світлого паперу для тла. Перевірте колір бренду щодо обох, бо більшість кольорів проходить лише з одного боку. Для кожного кольору бренду підготуйте темніший відтінок для тексту на білому й світліший для тексту на темному. Залиште відтінок 3 : 1 для рамок та іконок, адже контраст нетекстових елементів стосується рамок полів і кілець фокусу. Важливо не те, яка пара дозволена в теорії, а до яких пар тема дійсно дотягується на практиці.

За EAA і німецьким BFSG стандарт EN 301 549 переймає контраст WCAG рівня AA, тож орієнтуйтеся на 4,5 : 1 і 3 : 1. AAA не вимагається. Pandus перевіряє кольори, які ваші сторінки справді використовують, на кожній сторінці щотижня.

Відповіді на часті питання

Скільки кольорів можна ввести?

До 12. Для 12 кольорів у матриці 132 пари. Якщо ввести більше, беруться перші 12, а перевірка повідомить, скільки пропущено.

За якою формулою працює матриця?

За коефіцієнтом контрасту WCAG 2.x, (L1 + 0,05) / (L2 + 0,05), де L — відносна яскравість двох кольорів, з відкиданням до двох знаків. Саме на цю формулу посилаються критерії WCAG 1.4.3, 1.4.6 і 1.4.11.

Чи надсилаються мої кольори на сервер?

Ні. Матриця рахується у вашому браузері, про палітру нічого не зберігається й не надсилається.

Чому пара відрізняється в обох напрямках?

Для непрозорих кольорів вона не відрізняється: коефіцієнт A на B дорівнює B на A. Матриця все одно показує обидва рядки, щоб швидко знайти колір тексту. Для напівпрозорих кольорів напрямки різні, бо колір тексту змішується з тлом.

Чи робить палітра, що проходить, мій сайт доступним?

Ні. Це лише означає, що в цих пар достатній контраст. Чи правильно їх застосовано на сторінках і все інше в WCAG, ще треба перевірити.