Проверка на цветовия контраст

Как работи нашата проверка на цветния контраст

Въведете цветовете на преден и заден план чрез 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, за да вземеш точни цветове от всичко на екрана си. Това улеснява тестването на реални дизайни, бутони или фонове.

За линкове, които разчитат само на цвета, за да изпъкнат, използвайте нашия тест за цветови контраст, за да сте сигурни, че отговарят на стандартите за достъпност и остават лесни за четене за всички.