Елементи повинні відповідати мінімальним вимогам контрастності кольорів

Переконайтеся, що всі текстові елементи мають достатній кольоровий контраст між текстом та фоном позаду нього.

Критерій успіху: контраст не менше 4.5:1 для звичайного тексту або 3:1 для великого тексту, навіть якщо текст є частиною зображення. Великий текст визначається як 18pt (24 CSS пікселі) або 14pt напівжирний (19 CSS пікселів). Елементи зі співвідношенням 1:1 вважаються «неповними» і потребують ручної перевірки.

Як перевірити контраст

• Chrome DevTools: натисніть на елемент → у вкладці Styles клікніть на кольоровий індикатор поруч зі значенням color. З'явиться панель контрасту з оцінкою AA/AAA.
• Онлайн: WebAIM Contrast Checker — введіть кольори тексту і фону для перевірки.
• Figma: плагін Stark перевіряє контраст прямо в макеті.

Типові виправлення

• Затемніть текст — замість #999 (сірий) використовуйте #595959 або темніше.
• Збільшіть різницю — на світлому фоні використовуйте темний текст, на темному — світлий.
• Текст на зображеннях — якщо неможливо уникнути, додайте напівпрозорий фон під текстом.
• Placeholder-и — атрибут placeholder теж повинен мати достатній контраст (або використовуйте <label>).