Како функционише Провера контраста
Алат „Провера контраста“ омогућава вам да унесете боју текста и боју позадине како бисте одредили њихов међусобни однос контраста у складу са WCAG 2.1 / 2.2 стандардима. Након уноса вредности, алат приказује које нивое приступачности (AA и AAA) ова комбинација боја задовољава за обичан текст, велики текст и компоненте корисничког интерфејса.
Почетне вредности у алату су подешене на #4f46e5 за боју текста и #ffffff за боју позадине, што даје однос контраста од 6.29. Корисницима је на располагању и дугме за замену које брзо мења места боји текста и боји позадине.
Улазни подаци и подржани формати боја
Да бисте извршили проверу, потребно је да дефинишете следеће улазне параметре:
- Боја текста: Вредност боје која се користи за приказ текстуалног садржаја.
- Боја позадине: Вредност боје која се налази иза текста.
Оба поља прихватају следеће формате уноса:
- Хексадецималне вредности (нпр.
#1a1a1a). rgb()вредности (нпр.rgb(26, 26, 26)).hsl()вредности.
Уколико унесете неисправну вредност за боју текста, алат ће приказати поруку о грешци: „Унесите исправну боју текста, нпр. #1a1a1a or rgb(26, 26, 26).“. Ако је унета неисправна вредност за боју позадине, појавиће се порука: „Унесите исправну боју позадине, нпр. #ffffff или rgb(255, 255, 255).“.
Излазни резултати и тумачење вредности
Након обраде унетих боја, алат генерише следеће излазне податке:
- Однос контраста: Израчунати однос између боје текста и позадине, који се приказује у формату „X:1“. Овај однос се креће у распону од 1:1 (потпуно одсуство контраста) до 21:1 (црна слова на белој позадини).
- Обичан текст: Приказује ознаку „Задовољава“ или „Не задовољава“ за AA и AAA нивое приступачности.
- Велики текст: Приказује ознаку „Задовољава“ или „Не задовољава“ за AA и AAA нивое приступачности.
- Кориснички интерфејс и графика: Приказује ознаку „Задовољава“ или „Не задовољава“ у односу на јединствени праг од 3:1. Овај ред нема поделу на AA и AAA нивое, већ приказује само један коначни резултат.
- Коначна оцена (пресуда): Збирна порука која указује на највиши ниво који је задовољен. Поруке могу бити:
- „Задовољава AA и AAA нивое за обичан текст.“
- „Задовољава AA ниво за обичан текст.“
- „Задовољава AA ниво само за велики текст.“
- „Испод AA минимума — повећајте контраст.“
Правила контраста према WCAG 2.1 / 2.2 стандардима
Алат користи званичну WCAG 2.1 / 2.2 формулу за израчунавање односа контраста. Да би одређена комбинација боја прошла проверу, морају бити испуњени следећи критеријуми:
- Обичан текст: За испуњавање AA нивоа потребан је однос од најмање 4.5:1. За строжи AAA ниво захтева се однос од најмање 7:1.
- Велики текст: За испуњавање AA нивоа потребан је однос од најмање 3:1. За AAA ниво потребан је однос од најмање 4.5:1. Велики текст је дефинисан као текст величине од 18pt (око 24px) и више, или од 14pt (око 18.5px) и више уколико је подебљан.
- Кориснички интерфејс и графика: Захтева однос од најмање 3:1. Ово је једина категорија која има само један праг без раздвајања на AA и AAA нивое.
Коме је намењен овај алат
Провера контраста је развијена за различите улоге у процесу креирања дигиталног садржаја:
- Дизајнери: Користе алат за проверу читљивости текстуалних елемената и графичких компоненти током фазе дизајна.
- Програмери: Осигуравају да имплементирана решења испуњавају званичне стандарде веб приступачности.
- Тимови за креирање садржаја: Врше верификацију контраста боја у својим промотивним и информативним материјалима пре објављивања.
Приватност и сигурност података
Свака провера коју извршите у овом алату покреће се локално, директно у вашем веб прегледачу. Ништа од података које унесете у поља за боју текста или позадине не шаље се на 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, уместо строжих критеријума за обичан текст.
Које формате боја могу да унесем?
Можете унети хексадецималну вредност попут #1a1a1a, rgb() вредност попут rgb(26, 26, 26) или hsl() вредност — или једноставно кликните на поље да бисте изабрали боју. Користите дугме за замену да бисте брзо заменили боју текста и позадине.
Да ли се користи WCAG 2 или новији APCA метод?
Овај алат користи формулу WCAG 2.1 / 2.2, која је тренутни стандард за ревизије приступачности. APCA је новији метод заснован на перцепцији који се тек припрема за WCAG 3 — обећава много, али још увек није званични стандард, па га резултати овде не користе.