Светлосивият текст на бял фон може да изглежда елегантен и минималистичен с един поглед — и да бъде напълно нечетлив за потребители със зрителни увреждания, силна слънчева светлина върху екрана или просто обикновено напрежение на очите в края на работния ден. Цветовият контраст е един от най-„техническите“ критерии за достъпност – има точни числа, които трябва да бъдат изпълнени – но също така е един от най-лесните за тестване и коригиране предварително.

Накратко — какво обхваща това ръководство

  1. Какви съотношения изисква WCAG
  2. Защо големият текст е разрешен с по-малък контраст
  3. Как да проверите контрастното съотношение на практика
  4. Как да изберете предварително достъпна цветова палитра

Какви съотношения изисква WCAG

WCAG определя съотношението на контраста като число между 1:1 (никакъв контраст — идентичен цвят) и 21:1 (максималния възможен контраст — чисто черно върху чисто бяло). На ниво АА (задължителното ниво на повечето места, включително Израел), изискването е съотношение най-малко 4.5:1 между обикновения текст и фона зад него. При по-строгите AAA ниво, изискването се повишава до 7:1.

Защо голям текст е разрешен с по-малък контраст

Големият текст остава четим дори при по-нисък контраст, така че WCAG му задава по-лесен праг: 3:1 на ниво AA (вместо 4,5:1) и 4.5:1 на ниво AAA (вместо 7:1). „Голям текст“ се определя като текст с 18 точки или повече (около 24px) или 14 точки или повече (около 18,7px), ако е удебелен. Големите заглавия, например, могат да си "позволят" малко по-нисък контраст от обикновен основен абзац и пак да отговарят на изискването.

Илюстративна диаграма Comparing contrast ratios Three text-on-background examples with different contrast ratios Contrast Ratio Between Text and Background Sample text 1.8:1 — ✕ fails Sample text 7.1:1 — ✓ meets AAA too Sample text 5.4:1 — ✓ meets level AA Regular text: at least 4.5:1 · Large text (24px+, or 18.7px bold): at least 3:1 Tools like the WebAIM Contrast Checker give you the exact ratio before you finalize a color palette
Три примера за текст на фона: твърде ниско съотношение (1,8:1) проваля дори основното ниво; другите две съотношения отговарят съответно на изискванията AA и AAA.

Как да проверите съотношението на контраста на практика

Няма нужда да го изчислявате ръчно — безплатни инструменти като WebAIM Contrast Checker ви позволяват да въведете кодовете на цвета на текста и фона и незабавно да получите точното съотношение и оценка за преминаване/неуспех за всяко ниво. Струва си да проверите не само текст върху плътен фон, но и текст върху фонови изображения или градиенти — където контрастът може да варира между различните области на едно и също изображение, така че е най-добре да тествате най-„проблемното“ място.

💡 Практически съвет

Не само текст: същото изискване за контраст (при по-лесен праг, 3:1) важи и за графични компоненти на потребителския интерфейс, като очертания на полета на формуляр, функционални икони и граници на бутони — не само за букви.

Как да изберете предварително достъпна цветова палитра

Най-ефективният подход е да се провери контраста на етапа на проектиране на шаблон, не във всеки документ поотделно. Когато избирате цветове на марката за заглавия, основен текст и връзки, струва си да потвърдите предварително, че всяка комбинация текст-фон, която действително използвате, отговаря на поне 4,5:1. По този начин всеки нов документ, създаден от шаблона, автоматично "наследява" правилния контраст, вместо да проверява всеки документ поотделно, след като вече е бил написан.

Искате ли да знаете дали вашите документи отговарят на изискванията за контраст?

Нашият инструмент проверява цветовия контраст като част от автоматичното сканиране на всеки PDF файл на вашия сайт.

Сканирайте сайта си безплатно ←