Поставете цвят на преден план и фон (или изберете от екранна снимка); получете коефициента на контраст и кои WCAG нива преминава. WCAG 2.1 AA е законовата базова линия за достъпност в повечето юрисдикции; AAA е по-високият стандарт, препоръчан за критично съдържание.
Праговете
- WCAG AA, нормален текст: минимум 4.5:1.
- WCAG AA, голям текст (18pt+ или 14pt+ удебелен): минимум 3:1.
- WCAG AAA, нормален текст: минимум 7:1.
- WCAG AAA, голям текст: минимум 4.5:1.
- Не-текстови UI компоненти (бутони, граници на формуляри): минимум 3:1 (WCAG 2.1+).
Защо контрастът е важен
Текст с нисък контраст е нечетим за потребители с ниско зрение (около 4% от населението), потребители на ярка слънчева светлина, потребители с евтини монитори и стареещи очи (всички, рано или късно). Много дизайнерски системи по подразбиране използват сиво върху сиво, защото изглежда елегантно на калибрирания 5K дисплей на дизайнера — и е нечетимо другаде.
Неспазването на WCAG AA също е правно обжалваемо в САЩ (ADA Title III), ЕС (EAA) и много други юрисдикции. Евтина застраховка: проверявайте всяка двойка текст/фон чрез инструмент за проверка, преди да пуснете продукта.
Какво докладваме
- Коефициент на контраст като число (напр. 4.71:1).
- Преминава/не преминава за всяко WCAG ниво и размер на текста.
- Предложени корекции: най-близкия по-тъмен цвят на преден план или по-светъл фон, който би преминал.
- Преглед на живо с примерен текст в двойката цветове.
Комбинирайте със симулатора за цветна слепота
Контрастът и цветната слепота са различни оси на достъпност. Изпълнете Color Blindness Simulator върху същия UI, за да проверите дали работи и за потребители с CVD.
Често задавани въпроси
Какво е определението за 'голям текст'?
WCAG: 18pt нормален или 14pt удебелен. Приблизително 24px нормален или 19px удебелен в CSS.
Работи ли върху градиенти?
Тествайте най-лошата точка — обикновено най-светлата част от градиента спрямо вашия преден план.
Мога ли да проверя от екранна снимка?
Да — качете екранна снимка и кликнете върху цветовете на преден и заден план.
Какво е минималното приемливо съотношение?
WCAG AA: 4.5:1 за основен текст. Всичко под това не отговаря на изискванията.
Винаги ли по-тъмното означава по-добро?
По-високият контраст е по-добър за четливост. Но чисто черно върху чисто бяло може да бъде рязко; много системи използват #1A1A1A върху #FAFAFA за малко по-мек контраст, който все още покрива AAA.
Какво относно контраста на иконите?
WCAG 2.1 добави минимум 3:1 за не-текстови UI компоненти — бутони, граници на формуляри, фокусни пръстени.
Мога ли да проверявам двойки цветове наведнъж?
Премиум: поставете CSV с двойки и получете всички съотношения в един отчет.
Качванията частни ли са?
Да — изтриват се в рамките на 24 часа.
Относно Contrast Checker
Contrast Checker е безплатен онлайн инструмент от Wallpapers.com, който работи изцяло в браузъра ви — без инсталация, без воден знак, без имейл регистрация за първия опит.
Проверете дали двойката цвят на преден план / фон отговаря на WCAG изискванията за достъпност.
Как да използвате Contrast Checker
- Пуснете изображението си в зоната за качване (единично или групово — включете Bulk отгоре).
- Изберете настройки, които инструментът предлага (размер, формат, качество).
- Натиснете Run. Резултатът се изтегля автоматично — без ръчно запазване.
Кога да го използвате
Чести случаи на употреба включват:
подготовка на изображения за уеб качване, електронна търговия, социални платформи с ограничения на формата и конвертиране на файлове между устройства или приложения.
Безплатно срещу Премиум
Всеки посетител получава безплатен пробен период; влезлите безплатни потребители имат по-висока дневна квота. Абонирайте се за
Премиум
за неограничени изпълнения, групова обработка до 200 изображения на задача, приоритетна опашка и сърфиране без реклами.
Свързани инструменти
Търсите нещо малко по-различно? Опитайте
EXIF Stripper
,
Премахване на EXIF метаданни
или
EXIF Viewer
— или разгледайте всички
Метаданни и достъпност Инструменти.
