Разбирање на WCAG 2.1 / 2.2 стандардите за контраст
Веб-пристапноста во голема мера зависи од читливоста на текстуалните содржини и видливоста на елементите од корисничкиот интерфејс. Алатката „Проверка на контраст“ овозможува прецизна евалуација на соодносот на боите според официјалните препораки на WCAG 2.1 / 2.2 стандардите. Овие стандарди дефинираат конкретни прагови на контраст кои мора да бидат исполнети за да се обезбеди непречен пристап до информациите за сите корисници, вклучително и лицата со оштетен вид.
Соодносот на контраст се пресметува како математички однос помеѓу релативната светлина на најсветлата боја и најтемната боја. Овој сооднос се движи во опсег од 1:1, што означува целосно отсуство на контраст (идентични бои), па сè до 21:1, што претставува максимален можен контраст, односно црн текст на бела позадина. Алатката ја користи токму оваа официјална WCAG 2.1 / 2.2 формула за да ги одреди резултатите за премин или пад.
Влезни параметри и поддржани формати на бои
За да се изврши пресметката, потребно е да се дефинираат две вредности во соодветните полиња за внес:
- Боја на текст: Вредноста на бојата која се користи за предниот план (текстот).
- Боја на позадина: Вредноста на бојата врз која се прикажува текстот.
Алатката прифаќа три стандардни формати на бои кои се применуваат во веб-дизајнот и развојот:
- Hex вредности: На пример,
#1a1a1a. - RGB вредности: На пример,
rgb(26, 26, 26). - HSL вредности.
Доколку внесете невалиден формат во некое од полињата, алатката ќе прикаже соодветна порака за грешка. За невалидна боја на текст се прикажува пораката: „Внесете валидна боја на текст, како #1a1a1a or rgb(26, 26, 26).“. Доколку внесената боја на позадина е невалидна, се прикажува пораката: „Внесете валидна боја на позадина, како #ffffff или rgb(255, 255, 255).“.
Интерфејсот содржи и практично копче за замена кое овозможува брзо превртување на вредностите помеѓу текстот и позадината. Почетните вредности при вчитување на алатката се поставени на #4f46e5 за текст и #ffffff за позадина, што резултира со сооднос на контраст од 6.29.
Разлики помеѓу AA и AAA нивоата на пристапност
Усогласеноста со WCAG е поделена на различни нивоа на строгост, при што AA и AAA се клучните референтни точки за контраст на текстот. Разликата помеѓу нив се состои во висината на минималниот сооднос кој мора да се постигне:
| Категорија на елемент | Ниво AA (Минимален сооднос) | Ниво AAA (Построг сооднос) |
|---|---|---|
| Нормален текст | 4.5:1 | 7:1 |
| Голем текст | 3:1 | 4.5:1 |
| Кориснички интерфејс и графики | 3:1 (без поделба на AA/AAA) | 3:1 (без поделба на AA/AAA) |
Нивото AA претставува стандардна цел за повеќето комерцијални и јавни веб-страници, додека нивото AAA е наменето за специјализирани платформи каде се бара максимална пристапност.
Дефинирање на нормален и голем текст
Во рамките на стандардите за пристапност, големината на фонтот директно влијае на потребниот праг на контраст. Поголемиот текст е полесен за читање, па затоа за него важат поблаги критериуми.
- Нормален текст: Секој текст што е помал од границите дефинирани за голем текст. За него е потребен сооднос од најмалку 4.5:1 за AA, односно 7:1 за AAA.
- Голем текст: Се дефинира како текст со големина од најмалку 18pt (што е приближно 24px), или текст со големина од најмалку 14pt (приближно 18.5px) доколку е задебелен (bold). За голем текст, прагот за задоволување е намален на 3:1 за AA и 4.5:1 за AAA.
Контраст кај графичките елементи и корисничкиот интерфејс
Покрај текстуалната содржина, WCAG 2.1 / 2.2 стандардите воведуваат и правила за визуелните компоненти на интерфејсот. Ова ги опфаќа активните кориснички компоненти (како рамки на полиња за внес, копчиња) и клучните графички објекти (икони, дијаграми).
За разлика од текстот, категоријата „Кориснички интерфејс и графики“ не содржи поделба помеѓу AA и AAA нивоата. Алатката за оваа категорија прикажува само еден резултат за премин или пад, базиран на единствен праг од 3:1. Доколку соодносот е еднаков или поголем од 3:1, елементот ја задоволува проверката.
Толкување на резултатите и финалната оцена
По внесувањето на боите, алатката веднаш го прикажува пресметаниот сооднос во формат „X:1“ и дава јасни индикатори за секоја категорија. За нормален текст, голем текст и графички компоненти се прикажува ознаката „Задоволува“ или „Не задоволува“.
На крајот, алатката генерира финална оцена (вердикт) која го сумира највисокото ниво на усогласеност:
- „Задоволува AA и AAA за нормален текст.“ – Кога комбинацијата ги надминува најстрогите критериуми.
- „Задоволува AA за нормален текст.“ – Кога е исполнет стандардниот праг за нормален текст, но не и AAA.
- „Задоволува AA само за голем текст.“ – Кога соодносот е доволен само за поголеми фонтови.
- „Под минимумот за AA — зголемете го контрастот.“ – Кога комбинацијата не ги исполнува ниту основните барања за пристапност.
Овие информации се од суштинско значење за дизајнерите кои ја проверуваат читливоста, програмерите кои ги имплементираат стиловите и тимовите за содржина кои ги верификуваат материјалите пред објавување.
Локална обработка и приватност
При користење на оваа алатка, сигурноста на Вашите податоци е целосно заштитена. Секоја проверка се извршува во Вашиот прелистувач. Ништо од она што го внесувате не се испраќа на BroBroGo, што овозможува безбедна работа со шеми на бои директно на Вашиот уред.
Често поставувани прашања (FAQ)
Што значат резултатите AA и AAA?
AA е нивото кон кое се стремиме на повеќето сајтови: бара сооднос од најмалку 4.5:1 за нормален текст и 3:1 за голем текст. AAA е построго — 7:1 за нормален текст и 4.5:1 за голем текст. Соодносот се движи од 1:1 (без контраст) до 21:1 (црно на бело).
Што се смета за голем текст?
Текст од 18pt (околу 24px), или 14pt (околу 18.5px) кога е задебелен. Поголемиот текст останува читлив и при помал контраст, па затоа ги задоволува AA на 3:1 и AAA на 4.5:1 наместо построгите прагови за нормален текст.
Кои формати на бои можам да ги внесам?
Внесете hex вредност како #1a1a1a, rgb() вредност како rgb(26, 26, 26) или hsl() вредност — или кликнете на кој било примерок за да изберете боја. Користете го копчето за замена за да ги превртите боите на текстот и позадината.
Дали ова е WCAG 2 или новиот метод APCA?
Ја користи формулата WCAG 2.1 / 2.2, онаа на која денес се повикуваат правилата и ревизиите за пристапност. APCA е понов метод за перцепција кој сè уште се подготвува за WCAG 3 — ветувачки, но сè уште не е стандард за усогласеност, па затоа резултатите за премин тука не го користат.