Проверка на контраста

Разбиране на стандартите за контраст по WCAG 2.1 / 2.2

Уеб достъпността изисква съдържанието да бъде лесно четимо за всички потребители, включително за тези със зрителни увреждания. Инструментът „Проверка на контраста“ изчислява съотношението на яркостта между текста и неговия фон, за да определи дали дадена цветова комбинация отговаря на официалните изисквания на Web Content Accessibility Guidelines (WCAG) версии 2.1 и 2.2. Тези насоки дефинират конкретни прагове на съвместимост, които гарантират, че визуалната информация е достъпна.

Изчисленото съотношение на контраста варира в диапазон от 1:1 до 21:1. Стойност 1:1 означава пълна липса на контраст (например бял текст върху бял фон), докато 21:1 представлява максималният възможен контраст (черен текст върху бял фон). Първоначално заредените цветове в инструмента са #4f46e5 за текст и #ffffff за фон, което дава съотношение на контраста от 6.29:1.

Входни параметри и поддържани цветови формати

За да извършите проверка, трябва да дефинирате два основни параметъра в интерфейса:

• Цвят на текста: Цветова стойност за предния план.
• Цвят на фона: Цветова стойност за задната страна на елемента.

Инструментът приема три стандартни уеб формата за въвеждане на цветове:

1. Hex values: Шестнадесетични кодове, като например #1a1a1a.
2. rgb() values: Стойности в червения, зеления и синия канал, например rgb(26, 26, 26).
3. hsl() values: Цветови модел, базиран на тон, наситеност и осветеност.

Ако въведете невалиден формат в някое от полетата, инструментът ще покаже съответното съобщение за грешка:

• При грешен цвят на текста се изписва: „Въведете валиден цвят на текста, например #1a1a1a or rgb(26, 26, 26).“
• При грешен цвят на фона се изписва: „Въведете валиден цвят на фона, например #ffffff или rgb(255, 255, 255).“

Интерфейсът включва и бутон за размяна на цветовете на текста и фона, който бързо обръща стойностите на двете полета.

Изисквания за нивата на достъпност AA и AAA

Стандартите WCAG разделят съвместимостта на две основни нива на съответствие, които зависят от размера на шрифта и предназначението на елемента:

Нормален текст

Нормалният текст е най-чувствителен към нисък контраст. За него важат следните правила:

• Ниво AA: Изисква съотношение на контраста от поне 4.5:1.
• Ниво AAA: Изисква по-строго съотношение от поне 7:1.

Голям текст

По-големите шрифтове са по-лесни за четене, поради което изискват по-ниски нива на контраст. Голям текст се дефинира като текст с размер от 18pt (около 24px) нагоре, или от 14pt (около 18.5px) нагоре, когато е с получер (bold) стил. Правилата за него са:

• Ниво AA: Изисква съотношение от поне 3:1.
• Ниво AAA: Изисква съотношение от поне 4.5:1.

Интерфейс и графики

Този ред се отнася за потребителски интерфейси и графични компоненти. За разлика от текстовите нива, тук няма разделение между AA и AAA. Инструментът прилага един-единствен праг:

• Изисква се съотношение от поне 3:1 за преминаване на теста.

Тълкуване на резултатите и обобщената оценка

След въвеждане на цветовете инструментът показва съотношението под формата на „X:1“ и маркира всяка категория с оценка „Успех“ или „Неуспех“. В зависимост от получените стойности се показва едно от следните обобщени съобщения за оценка:

• „Покрива AA и AAA за normal текст.“ — Когато контрастът е 7:1 или по-висок.
• „Покрива AA за нормален текст.“ — Когато контрастът е между 4.5:1 и 6.99:1.
• „Покрива AA само за голям текст.“ — Когато контрастът е между 3:1 и 4.49:1.
• „Под минимума за AA — увеличете контраста.“ — Когато съотношението е под 3:1.

Потребители, за които инструментът е предназначен

Инструментът е разработен за широк кръг от специалисти, участващи в създаването на дигитални продукти:

• Дизайнери: Използват го за проверка на четливостта на текстовете и видимостта на интерфейсните компоненти още във фазата на проектиране.
• Разработчици: Проверяват дали внедреният код отговаря на задължителните стандарти за достъпност при разработката на уеб страници.
• Екипи за съдържание: Проверяват цветовите комбинации в своите презентации, графики и текстови материали преди публикуване.

Локална обработка и поверителност на данните

Всяка проверка се извършва във Вашия браузър. Нищо от въведеното не се изпраща към BroBroGo. Обработката на цветовите кодове и изчисляването на съотношенията се случват изцяло локално на Вашето устройство.

Често задавани въпроси

Какво означават резултатите AA и AAA?

AA е нивото, към което се стремят повечето сайтове: изисква съотношение от поне 4.5:1 за нормален текст и 3:1 за голям текст. AAA е по-строго — 7:1 за нормален текст и 4.5:1 за голям текст. Съотношението варира от 1:1 (липса на контраст) до 21:1 (черно на бяло).

Какво се счита за голям текст?

Текст от 18pt (около 24px) нагоре, или 14pt (около 18.5px), когато е получер (bold). По-големият текст остава четлив и при по-нисък контраст, така че преминава ниво 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 — той е обещаващ, но все още не е официален стандарт за съответствие, така че резултатите тук не го използват.