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

Введіть кольори тексту та фону, щоб дізнатися коефіцієнт контрастності WCAG та перевірити відповідність стандартам AA й AAA.

Коефіцієнт контрастності
Звичайний текстAA4.5:1
Звичайний текстAAA7:1
Великий текстAA3:1
Великий текстAAA4.5:1
Інтерфейс та графіка3:1
Введіть кольори тексту та фону для перевірки.

Усі перевірки виконуються локально у вашому браузері. Введені дані не надсилаються на BroBroGo.

Поширені запитання

Що означають результати AA та AAA?

Рівень AA — це стандарт, до якого прагне більшість сайтів: він вимагає коефіцієнт не менше 4.5:1 для звичайного тексту та 3:1 для великого. Рівень AAA суворіший — 7:1 для звичайного тексту та 4.5:1 для великого. Шкала контрастності варіюється від 1:1 (відсутність контрасту) до 21:1 (чорне на білому).

Що вважається великим текстом?

Текст розміром від 18pt (приблизно 24px) або від 14pt (приблизно 18.5px) для напівжирного накреслення. Великий текст легше читати при меншому контрасті, тому для нього вимоги м’якші: проходження AA при 3:1 та AAA при 4.5:1 замість суворіших порогів для звичайного тексту.

Які формати кольорів можна вводити?

Ви можете ввести значення HEX (наприклад, #1a1a1a), rgb() (наприклад, rgb(26, 26, 26)) або hsl(), або просто клікнути на кольоровий квадрат для вибору. Кнопка заміни дозволяє миттєво поміняти місцями кольори тексту та фону.

Тут використовується WCAG 2 чи новіший метод APCA?

Цей інструмент використовує формулу WCAG 2.1 / 2.2, на яку сьогодні спираються офіційні вимоги та аудити доступності. APCA — це новіший метод візуального сприйняття, який наразі розробляється для WCAG 3. Він перспективний, але ще не став стандартом відповідності, тому результати перевірки тут його не використовують.