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

Перевірте контраст переднього плану/фону за WCAG AA та AAA. Переглядайте оновлення співвідношення під час вибору кольорів.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Перевірте контраст переднього/фону відповідно до рекомендацій WCAG AA та AAA.
Запускається у вашому браузері
Безкоштовне використання

Як користуватися

Виберіть кольори тексту (переднього плану) і фону.
Прочитайте коефіцієнт контрастності та результати AA/AAA.
Коригуйте, поки не пройдете цільовий рівень.

How this tool works

Виберіть кольори тексту (переднього плану) і фону.
Прочитайте коефіцієнт контрастності та результати AA/AAA.
Коригуйте, поки не пройдете цільовий рівень.

Recommended settings

Спочатку скористайтеся параметрами за замовчуванням, а потім відкоригуйте, якщо потрібно

Supported formats

Text / on-page input

File size and limits

Дуже складні багатошарові попередні перегляди можуть працювати повільніше на старих телефонах.

Privacy

Генератори кольорів і CSS повністю працюють у вашому браузері. Попередній перегляд і конверсія ніколи не завантажують ваші стилі.

Common use cases

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

Troubleshooting

Після вставлення попередній перегляд виглядає інакше

Перевірте наявність конкуруючих CSS на вашій сторінці (скидання, успадковані кольори). Спершу скопіюйте згенероване правило в ізольовану таблицю стилів.

FAQ

Це завантажує мій CSS?

Ні. Генератори та конвертери працюють у вашому браузері з попереднім переглядом.

Чи потрібен мені обліковий запис?

Ні. Відкрийте інструмент, налаштуйте елементи керування та скопіюйте CSS.