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

Всі інструменти
Перевірник контрасту кольорів
Перевіряйте контрастне співвідношення WCAG між кольором тексту та фону — дивіться оцінки AA/AAA для звичайного тексту, великого тексту та елементів інтерфейсу разом із живим прев'ю та пропозиціями доступних кольорів.
Колір тексту
Тінт
Колір фону
Тінт
Контрастне співвідношення
--:1
Звичайний текст
Текст тіла менше 18px (або менше 14px жирний)
AA AAA
Великий текст
18px+ звичайний або 14px+ жирний
AA AAA
Елементи інтерфейсу
Іконки, рамки, елементи форм і графіка
AA AAA
Живе прев'ю

Швидка коричнева лисиця

Великий текст читається комфортно, коли контраст достатній.

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

Дрібний шрифт і підписи найважче читати — вони потребують найбільшого контрасту.
Зразкова кнопка Зразкова кнопка
Пропозиція

Усе обчислюється в реальному часі у вашому браузері за формулою відносної яскравості WCAG 2.x — без завантажень, без реєстрації, повністю безкоштовно.

Поділитися
Пов'язані інструменти
Симулятор кольорової сліпоти

Побачте своє зображення або палітру так, як їх сприймають люди з протанопією, дейтеранопією, тританопією або ахроматопсією — все відбувається у вашому браузері, нічого не завантажується.
Конвертер кольорових кодів

Конвертуйте кольори між HEX, RGB, RGBA, HSL, HSLA та HSV — оберіть колір, налаштуйте прозорість і миттєво скопіюйте будь-який формат.
Експортер палітр

Вставте або імпортуйте набір кольорів і миттєво експортуйте їх у CSS-змінні, SCSS, конфіг Tailwind, JSON або SVG-свотчі — завершальний крок для будь-якої палітри.
Популярні запити
перевірка контрасту кольорів коефіцієнт контрасту wcag перевірка контрасту доступності перевірка контрасту тексту тест контрасту aa aaa перевірити контраст кольорів онлайн

Додайте цей безкоштовний інструмент на власний вебсайт — скопіюйте та вставте код нижче.