Оперативна
Проверка на цветовия контраст
Реклама
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 шестнадесетни стойности или ги изберете директно с Color Picker.
Можеш:
- Настрой Алфа, за да промениш колко прозрачен е цветът на преден план.
- Използвайте плъзгача за светлина, за да направите цвета да изглежда по-светъл или по-тъмен.
Нашият инструмент след това изчислява контрастното съотношение и го проверява спрямо насоките на WCAG:
- WCAG 2.0 Ниво AA
- Поне 4.5:1 за нормален основен текст
- Поне 3:1 за голям текст
- WCAG 2.1 (UI и графика)
- Поне 3:1 за икони, рамки и други компоненти на интерфейса
- WCAG ниво AAA
- Поне 7:1 за нормален текст
- Поне 4.5:1 за голям текст
Големият текст означава или:
- 14 pt (около 18.66 px) и удебелен, или
- 18 pt (приблизително px) или по-големи
Можеш да използваш пипетата в Color Picker, за да вземеш точни цветове от всичко на екрана си. Това улеснява тестването на реални дизайни, бутони или фонове.
За линкове, които разчитат само на цвета, за да изпъкнат, използвайте нашия тест за цветови контраст, за да сте сигурни, че отговарят на стандартите за достъпност и остават лесни за четене за всички.