Перевірка контрастності
Перевірте коефіцієнти контрастності пар кольорів WCAG із вердиктами AA та AAA та пропозиціями щодо виправлення.
Перевірка контрастності
Вставте пари переднього плану та фону, по одній на рядок — #7a1f2b на #ffffff, #333, #eee або rgb(0, 0, 0) #fff — і коефіцієнт контрастності WCAG 2 кожної пари миттєво повернеться з вердиктом «пройшов» або «не пройшов» для кожного рівня відповідності. Співвідношення варіюється від 1 : 1 (зовсім без контрасту) до 21 : 1 (чорне на білому) і обчислюється на основі відносної яскравості точно так, як це визначено в інструкціях, тому цифри узгоджуються з інспекторами браузера та інструментами аудиту.
WCAG називає два рівні. AA, єдине посилання на закони та контракти, вимагає 4,5 : 1 для нормального тексту та 3 : 1 для великого тексту. AAA, більш жорстка ціль, вимагає 7 : 1 і 4,5 : 1. Текст вважається великим від 18 pt (приблизно 24 px) у звичайній товщині або від 14 pt (приблизно 18,7 px) у жирному шрифті — тому заголовок може пройти в такому співвідношенні, як абзац. У звіті зазначаються всі чотири перевірки на пару; перемкніть вивід на «Компактний» для одного рядка на пару, що швидше читається, коли ви підмітаєте всю палітру.
Якщо пара пропускає AA для звичайного тексту, увімкніть «Запропонувати виправлення», і інструмент затемнить або освітлить передній план невеликими кроками, зберігаючи його відтінок, доки не досягне 4,5 : 1 — тоді надрукує найближчий прохідний шістнадцятковий текст, готовий для вставлення назад у вашу таблицю стилів.
Все працює у вашому браузері; неопубліковані брендові палітри ніколи не залишають ваш пристрій. Кольори можуть складатися з 3- або 6-значного шістнадцяткового коду з хешем або без нього, rgb() або rgba(), або загальної назви CSS — базові 16 плюс популярні розширені. Повний список CSS із 148 імен навмисно не переноситься, тому пишіть екзотичні імена у шістнадцятковому вигляді. Рядок, який не є парою кольорів, спокійно відзначається, а решта продовжує оброблятися.