Операційний
Перевірка контрастності кольорів
Реклама
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
Введіть свої комбінації кольорів нижче, щоб перевірити їх за допомогою нашої перевірки контрастності кольорів і миттєво перевірити, чи відповідають вони стандартам доступності.
Як працює наша перевірка контрастності кольорів
Введіть кольори переднього плану та фону за допомогою шістнадцяткових значень RGB або виберіть їх безпосередньо за допомогою Панелі кольорів.
- Налаштуйте Альфа, щоб змінити прозорість кольору переднього плану.
- Використовуйте повзунок Яскравість, щоб зробити колір світлішим або темнішим.
Потім наш інструмент обчислює коефіцієнт контрастності та перевіряє його на відповідність інструкціям WCAG:
- WCAG 2.0, рівень AA
- Принаймні 4,5:1 для звичайного основного тексту
- Принаймні 3:1 для великого тексту
- WCAG 2.1 (інтерфейс і графіка)
- Щонайменше 3:1 для значків, рамок та інших компонентів інтерфейсу
- Рівень WCAG AAA
- Принаймні 7:1 для звичайного тексту
- Принаймні 4,5:1 для великого тексту
Великий текст означає:
- 14 пт (приблизно 18,66 пікселів) і жирний або
- 18 пт (приблизно пікселів) або більше
Ви можете використовувати піпетку в Палітрі кольорів, щоб отримати точні кольори з будь-чого на екрані.
Для посилань, які покладаються лише на колір, щоб виділятися, скористайтеся нашою перевіркою контрастності кольорів, щоб переконатися, що вони відповідають стандартам доступності та залишаються легкими для читання для всіх.