Провера контраста боја израчунава WCAG 2.1 однос контраста између две боје и оцењује их према AA/AAA праговима, како за обичан тако и за велики текст. Приказ уживо показује текст исписан изабраним бојама, а дугме "узми позадину странице" узима узорак са тренутне странице.
Приступачност је све чешће законска обавеза — усклађеност са WCAG стандардом је правни захтев у многим јурисдикцијама, а чак и тамо где није, лош контраст одбија кориснике. Провера контраста боја одмах вам говори да ли било које две боје испуњавају WCAG стандарде. Изаберите боју текста и позадине помоћу бирача боја или налепите hex вредности; алат израчунава однос контраста користећи званичну WCAG формулу осветљености и оцењује га према четири прага: AA обичан (≥4,5:1), AA велики (≥3:1), AAA обичан (≥7:1) и AAA велики (≥4,5:1). Сваки праг приказује јасну ознаку Pass/Fail. Приказ уживо исписује велики и обичан текст изабраним бојама тако да видите стваран визуелни утисак. Практично дугме узима узорак позадине body елемента тренутне странице — корисно при провери да ли комбинација боја на стварном сајту пролази. Све се извршава локално у вашем прегледачу, без отпремања података.
Користи званичну WCAG формулу осветљености за израчунавање односа контраста. Резултат је тачан и одговара сваком усклађеном алату за приступачност.
Pass/fail за AA обичан (≥4,5:1), AA велики (≥3:1), AAA обичан (≥7:1), AAA велики (≥4,5:1) — све приказано као мрежа.
Исписује стварни велики и обичан текст у изабраним бојама тако да видите визуелни утисак уз нумерички однос.
Једним кликом узима израчунату боју позадине body елемента тренутне странице — корисно за тестирање комбинација из стварног света.
Укуцајте hex вредност или користите native бирач боја. Вредности се двосмерно синхронизују док уређујете било коју од њих.
Замена једним кликом мења место боји текста и позадине — корисно при провери инвертованих тема или hover стања.
Пре финализације палете боја, проверите сваку боју текста наспрам позадине да обезбедите усклађеност са WCAG AA — избегава касније преправке.
Користите "узми позадину странице" на живом сајту, а затим налепите стварну боју текста — пронађите a11y кршења за неколико минута без отварања Lighthouse-а.
Када бренд изабере боју која можда не пролази a11y проверу, користите алат да пронађете најближу усклађену варијанту (тамнију/светлију нијансу).
Проверите да ли боје hover/active/disabled стања и даље испуњавају захтеве контраста, а не само подразумевано стање.
Тамне теме често не пролазе проверу контраста за сиви текст на сивој позадини. Проверите своје најтамније сиве нијансе наспрам најтамнијих позадина да ухватите ове проблеме.
Кликните на Contrast икону у DevSuite Pro доку. Отвара се панел са пољима за боју текста и позадине.
Користите бирач боја или налепите hex вредност за сваку. Приказ уживо се ажурира док мењате боје.
Велики број (нпр. 4,8:1) представља однос контраста. Виша вредност је боља. 3 је апсолутни минимум; 4,5 је циљ за обичан текст.
Ознаке Pass/fail за AA и AAA, обичан и велики текст, на први поглед показују за шта се ваша комбинација квалификује.
Ако не пролази, подешавајте боје. Затамните боју текста или осветлите позадину (или обрнуто) док циљни ниво не покаже Pass.
Instalirajte DevSuite Pro besplatno i otključajte 64+ alata za programere za svoj pretraživač.
