◐

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

Перевірте коефіцієнт контрастності WCAG між кольором тексту й тла з результатами AA/AAA.

Ваші файли залишаються на цьому пристрої

Файли обробляються у браузері й не надсилаються на сервер. Сайт завантажує код і ресурси для роботи інструментів. Без акаунтів і трекерів.

Натисніть «Завантажити», щоб зберегти інструмент одним HTML-файлом для роботи офлайн.

Конфіденційність →

Колір тексту

Тло

Цей чуйний хлопець із Київщини голосно бере фагот, дзвінко віддячує жінці.

Великий зразок тексту

Спробуйте розібраний приклад

Приклад

Задайте колір тексту #767676 і тло #ffffff. Коефіцієнт становить 4.54:1 — це проходить AA для звичайного тексту. На відтінок світліший #777777 дає 4.48:1 і не проходить, бо AA вимагає щонайменше 4,5:1 для звичайного тексту.

Зважайте

Великому тексту (близько 24px або 18,7px жирним) для AA досить 3:1. Коефіцієнт не враховує тонкі шрифти, текст на зображеннях і прозорість, тож перевіряйте й реальний макет і не передавайте зміст лише кольором.

Про цей інструмент

Порівняйте колір переднього плану й тла, щоб побачити коефіцієнт контрастності WCAG і чи проходить він рівні AA та AAA — усе обчислюється локально у вашому браузері.

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

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

WCAG вважає великим текст розміром 18pt (24px) або 14pt (18.66px) жирним, для якого потрібен нижчий коефіцієнт 3:1 для AA.

Які коефіцієнти проходять?

Звичайний текст потребує 4.5:1 для AA та 7:1 для AAA; великий текст потребує 3:1 для AA та 4.5:1 для AAA.