WCAG цветови контраст за дизайнери
Правилото 4.5:1, математика на контрастното съотношение и безплатни инструменти за проверка на всяка цветова двойка.
Ако текстът ви не отговаря на WCAG AA контраст, приблизително 285 милиона души с нарушено зрение не могат да го прочетат. Освен това сте на все по-нестабилна правна основа в ЕС и САЩ. Добрата новина: правилото е просто.
Правилото 4.5:1
Основният текст трябва да има контрастно съотношение най-малко 4.5:1 спрямо фона си, за да отговаря на WCAG AA. Големият текст (24px+ обикновен или 18px+ получер) има по-нисък праг от 3:1.
За съответствие с AAA: 7:1 за основен текст, 4.5:1 за голям текст.
Как се изчислява контрастното съотношение
WCAG използва относителна яркост — преобразувайте всеки цвят в стойност на яркост (0 = черно, 1 = бяло) чрез специфична формула, след което изчислете (L1 + 0.05) / (L2 + 0.05), където L1 е по-светлият цвят.
Не е нужно да правите математиката — използвайте безплатния ни инструмент за проверка на контраст, за да въведете произволни два цвята и да видите съотношението.
Често срещани случаи на неуспех
- Светло сиво върху бяло — #999 върху #fff = 2.85 (неуспех). #767676 върху #fff = 4.54 (успех).
- Бяло върху жълто — почти винаги неуспех. Използвайте тъмен текст върху жълто.
- Цветни връзки в основния текст — повечето сини връзки преминават върху бяло, но се провалят върху светло сиво. Тествайте действителния околен фон.
- Бранд цветове, които изглеждат страхотно — често се провалят. Добавете почти бял фон или потъмнете текста.
Избор на достъпни цветови двойки
Три надеждни модела:
- Тъмно върху светло — #1f2937 върху #fff = 14:1 (перфектно).
- Бяло върху тъмно — #fff върху #1f2937 = 14:1 (перфектно).
- Тъмно върху акцент — #1f2937 върху #fbbf24 = 9:1 (перфектно за бутони).
Отвъд текста
WCAG 2.1 също изисква 3:1 за нетекстови елементи (бутони, фокусни пръстени, граници на формуляри). Инструментът за проверка се справя и с двете.
Тапети, които няма да пречат на вашите джаджи
Ако сте дизайнер, който поставя тапети зад часовникови джаджи и известия, изберете тапети с контраст под 5:1 в зоните на джаджите. Нашият инструмент за Gaussian blur може да омекоти натоварените зони на всеки тапет за по-добра четливост на джаджите.
Опитайте нашите безплатни инструменти
Повечето от тези ръководства се съчетават с практически инструмент, който можете да използвате веднага — не се изисква регистрация за първото използване:
- Мащабиране на изображения — пиксел-перфектно намаляване + увеличаване.
- Конвертиране в WebP — 30-50% по-малки файлове от JPG.
- Премахване на фон — изрязване с едно кликване, прозрачен PNG.
- Генератор на фавикони — всеки размер за браузър от един източник.
- Мащабиране за социални мрежи — точните размери за всяка платформа.
- Пакетна обработка — приложете всеки инструмент към до 200 изображения наведнъж.
Разгледайте пълния каталог с инструменти.
