Погляд усередину
Цей безпечний перегляд показує, для чого потрібен інструмент, не виконуючи дій, що потребують акаунта.
Що вміє Перевірка контрасту CSS
Контраст це не питання смаку, а доступність. Люди зі слабким зором, літні люди, усі, хто сидить за дешевим екраном чи на сонці, залежать від контрасту між текстом і тлом. CSS-Kontrast-Checker робить це значення видимим, а не залишає його на відчуття.
Checker обчислює коефіцієнт контрасту за WCAG 2.1 і одразу каже, чи досягає твоя комбінація рівня AA або AAA, окремо для звичайного і великого тексту, бо там діють різні пороги. Колір тексту й тла вводиш як Hex, RGB, RGBA, HSL, HSLA або як назву кольору CSS; Checker розуміє всі поширені варіанти запису.
Крім класичного співвідношення WCAG, інструмент рахує ще й APCA, Accessible Perceptual Contrast Algorithm. APCA це проєкт для майбутніх версій WCAG і поки не є обов'язковим. APCA оцінює контраст ближче до сприйняття, особливо для тонких шрифтів і темного режиму, де старе співвідношення часто помиляється. Так ти бачиш обидві перспективи одразу.
Щоб отримати не лише вердикт, а й вихід, Checker симулює поширені форми дальтонізму: протанопію (немає червоного), дейтеранопію (немає зеленого), тританопію (немає синього) та ахроматопсію (немає кольорів). А коли комбінація не проходить, рушій підказок пропонує скориговані кольори, які відповідають вимогам, не перевертаючи твій стиль догори дриґом.
Для більших завдань є ще два режими. У режимі палітри перевіряєш цілу колірну схему одразу й бачиш, які пари працюють разом. У режимі Batch вставляєш справжній CSS, а Checker витягує значення кольорів і перевіряє їх за один прохід. Це зручно, коли треба перевірити наявний дизайн на доступність.
Це більше, ніж вправа для пальців: за Barrierefreiheitsstärkungsgesetz (BFSG, німецький закон про посилення доступності) вимоги до контрасту для багатьох цифрових пропозицій у Німеччині обов'язкові з червня 2025 року. Готові пресети, від довільно підібраних кольорів у відомчому стилі до навмисної сірої катастрофи відомчого сайту, показують, як виглядають добрі й погані контрасти на практиці.
Усе працює у твоєму браузері. Жодне значення кольору, жоден фрагмент CSS не надсилається на сервер. Без акаунта, без входу, без передавання даних. Тільки швидкі й чесні значення контрасту.
Функції
WCAG 2.1 AA і AAA
Коефіцієнт контрасту за WCAG 2.1, окремо для звичайного та великого тексту.
APCA (чернетка, не обов'язковий)
Додатково значення APCA, ближче до сприйняття; особливо показове для тонких шрифтів і темного режиму.
Симуляція дальтонізму
Перегляд для протанопії, дейтеранопії, тританопії та ахроматопсії: подивись, як інші бачать твої кольори.
Поради щодо покращення
Якщо комбінація не проходить, Checker пропонує скориговані кольори, які досягають порогу.
Аудит палітри та Batch
Перевіряй цілі колірні схеми одразу або встав справжній CSS і перевір усі значення за один прохід.
Гнучке введення кольору
Hex, RGB, RGBA, HSL, HSLA і назви кольорів CSS: Checker розуміє всі поширені варіанти запису.
Пресети контрасту
Готові приклади з Bund.de, Elster та інших і відлякувальні невдалі кольори для порівняння.
Як це працює
- 1
Ввести кольори
Введи колір тексту й тла як Hex, RGB, HSL чи назву кольору CSS або візьми пресет.
- 2
Прочитати значення WCAG і APCA
Checker показує коефіцієнт контрасту, чи досягнуто AA/AAA, і значення APCA.
- 3
Перевірити дальтонізм
Подивись симуляції, щоб переконатися, що твої кольори працюють і для людей з порушенням кольорового зору.
- 4
Прийняти пропозиції
Якщо комбінація не проходить, візьми одне із запропонованих значень або перевір увесь CSS у режимі Batch.
Кому це потрібно
Поширені запитання
Що означають рівні AA та AAA?
AA це звичайна мінімальна вимога WCAG: щонайменше 4,5:1 для звичайного й 3:1 для великого тексту. AAA суворіший (відповідно 7:1 і 4,5:1). Checker показує для кожної комбінації, якого рівня досягнуто.
Що таке APCA і навіщо воно мені?
APCA це метод контрасту, передбачений для WCAG 3.0. Він оцінює контраст ближче до людського сприйняття, особливо для тонких шрифтів і темного режиму, де класичне співвідношення WCAG часто надто оптимістичне або надто суворе. Обидва значення поруч дають повнішу картину.
Чи має Checker значення для відповідності BFSG?
Barrierefreiheitsstärkungsgesetz (німецький закон про посилення доступності) з червня 2025 року зобов'язує багато цифрових пропозицій до доступного оформлення, до чого належить і достатній контраст. Checker допомагає перевірити цю вимогу, але не замінює повної оцінки доступності всієї твоєї пропозиції.
Чи можна перевірити цілий файл стилів CSS?
Так. У режимі Batch вставляєш свій CSS, а Checker витягує значення кольорів і перевіряє комбінації за один прохід. У режимі палітри перевіряєш складену колірну схему.
Які формати кольорів розуміє Checker?
Hex (короткий і довгий), RGB, RGBA, HSL, HSLA та іменовані кольори CSS. Значення можна вводити змішано, наприклад колір тексту як Hex, а тла як HSL.
Чи десь зберігаються мої кольори?
Ні. Усе працює у твоєму браузері. Жодне значення кольору й жоден CSS не надсилається на сервер і не зберігається без твоєї дії.
Схожі інструменти
Інструмент для кольорів
Конвертуй між HEX, RGB, HSL і CMYK. Генеруй гармонійні палітри кольорів.
Витягування палітри кольорів
Витягуй домінантні кольори із зображень. Копіюй HEX, RGB, HSL, OKLCH. Експорт у CSS, Tailwind…
Доступність
Підлаштуй Werkzeu.ge під свої потреби: розмір тексту, контрастність, анімації та шрифт для ди…
Майстерня коду
Редактор із вкладками, підсвічуванням синтаксису, живим переглядом, консоллю, понад 20 шаблон…
Lesbarkeits-Score
Виміряй читабельність своїх текстів. Flesch-DE, Wiener Sachtextformel, індекс Lix.
Власна тема
Підлаштуй колір акценту, розмір шрифту й режим темний/світлий. Твій робочий стіл, твій вигляд.
Починаємо з Перевірка контрасту CSS?
Без встановлення. Входить від Plus. Відкривається прямо в браузері.
Відкрити зараз