Перевірник контрасту кольорів
Перевіряйте контрастне співвідношення WCAG між кольором тексту та фону — дивіться оцінки AA/AAA для звичайного тексту, великого тексту та елементів інтерфейсу разом із живим прев'ю та пропозиціями доступних кольорів.
Швидка коричнева лисиця
Великий текст читається комфортно, коли контраст достатній.
Це зразковий абзац звичайного тексту. Хороший контраст кольорів робить ваш контент читабельним для всіх, включно з людьми зі слабким зором або кольоровою сліпотою. зразкове посилання.
Дрібний шрифт і підписи найважче читати — вони потребують найбільшого контрасту.Усе обчислюється в реальному часі у вашому браузері за формулою відносної яскравості WCAG 2.x — без завантажень, без реєстрації, повністю безкоштовно.
Про Перевірник контрасту кольорів
Color Contrast Checker вимірює коефіцієнт контрастності WCAG між кольором тексту та кольором фону, а потім оцінює пару за рівнями доступності AA та AAA для звичайного тексту, великого тексту та компонентів інтерфейсу. Коефіцієнт і кожен вердикт «пройдено/не пройдено» оновлюються наживо при зміні будь-якого кольору.
Реалістична панель попереднього перегляду відображає заголовки, основний текст, дрібний шрифт, кнопку та посилання в обраному вами поєднанні, щоб ви могли оцінити читабельність на реальному вмісті, а не на абстрактних зразках. Якщо пара не проходить перевірку, інструмент пропонує найближчий доступний колір тексту, що досягає порогу AA 4,5:1, готовий до застосування одним кліком.
Розрахунок ґрунтується на формулі відносної яскравості WCAG 2.x і виконується повністю у вашому браузері — нічого не завантажується, а перевірки безкоштовні. Також можна скопіювати компактний текстовий звіт із коефіцієнтом і оцінками для вставки в перевірку доступності чи pull request.
Як використовувати Перевірник контрасту кольорів
- Встановіть колір тексту та колір фону за допомогою піпеток або введенням значень.
- Ознайомтеся з коефіцієнтом контрастності та результатами AA/AAA для звичайного тексту, великого тексту та компонентів інтерфейсу.
- Перегляньте живий попередній перегляд, щоб побачити реальні заголовки, абзаци, кнопки та посилання у ваших кольорах.
- Якщо пара не проходить перевірку, застосуйте запропонований доступний колір тексту або поміняйте місцями два кольори.
- Натисніть «Copy report», щоб поділитися коефіцієнтом і результатами відповідності.