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

Проверете контраста между цвят на текст и цвят на фон спрямо WCAG 2 и APCA. Инструментът изчислява коефициента на контраст WCAG 2 въз основа на относителната яркост, показва дали са изпълнени критериите AA и AAA за обикновен и голям текст, както и за UI графики, и добавя стойността за контраст на светлината по APCA с насоки за какво е подходяща тя. Предназначен е за дизайнери и разработчици, които създават достъпни интерфейси.

## Често задавани въпроси

### Какво означават нивата на WCAG?

Ниво AA изисква 4.5:1 за обикновен текст и 3:1 за голям текст (критерий за успех 1.4.3); ниво AAA изисква 7:1 и 4.5:1 (1.4.6). Компонентите на потребителския интерфейс и смислово значимите графики се нуждаят от 3:1 спрямо съседните цветове (1.4.11). Инструментът показва дали са изпълнени и петте прага.

### Какво се счита за голям текст?

Според WCAG голям текст е поне 18 пункта с нормална дебелина, приблизително 24 CSS пиксела, или поне 14 пункта с удебелен шрифт, приблизително 18.66 CSS пиксела. Всеки по-малък текст е обикновен и се нуждае от по-висок коефициент.

### Защо коефициент 4.499:1 не покрива AA?

Праговете на WCAG са точни, затова коефициент, който би се закръглил до 4.5, но е по-нисък, не покрива критерия. Инструментът сравнява незакръгления коефициент и го показва с отрязване до два знака след десетичната запетая, така че показаното число никога не изглежда по-добро от действителното.

### Какво е APCA?

Алгоритъмът за достъпен перцептивен контраст (Accessible Perceptual Contrast Algorithm) е метод за измерване на контраста, разработен за черновите на WCAG 3. Той моделира възприемания контраст на светлината, третира текста и фона по различен начин и връща стойност за контраст на светлината Lc от приблизително -108 до 106. Засега не е част от публикуван стандарт на WCAG, затова използвайте резултатите от WCAG 2 за съответствие, а APCA — като допълнителна проверка.

### Защо стойността на APCA понякога е отрицателна?

APCA отчита полярността: положителните стойности означават тъмен текст на светъл фон, а отрицателните — светъл текст на тъмен фон. Насоките използват абсолютната стойност, затова Lc -75 и Lc 75 попадат в едно и също ниво.

### Как се определят нивата в насоките на APCA?

Те следват простия режим bronze на APCA: Lc 90 се препоръчва за основен текст, Lc 75 е минимумът за основен текст, Lc 60 — за друг текстово съдържание, Lc 45 — за заглавия и голям текст, Lc 30 — за текст, който се чете бегло, например заместители, а Lc 15 — за нетекстови елементи. Размерът и дебелината на шрифта също имат значение, затова приемайте нивата като отправна точка, а не като окончателна оценка.

### Коя версия на APCA е внедрена?

Константите на APCA-W3 от версия 0.0.98 G, ревизия 4g, с простия експонент 2.4 за sRGB каналите, мекото ограничение за черно и ограничението при нисък контраст. Черен текст на бял фон дава около Lc 106.0, а бял текст на черен фон — около Lc -107.9, което съвпада с референтната реализация.

### Какви цветови формати мога да въведа?

Шестнадесетични кодове със или без #, CSS имена на цветове, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() пространства като display-p3 и cmyk(). Цветовете извън sRGB първо се преобразуват в sRGB, защото и двете формули са дефинирани за екранни цветове в sRGB.

### Как се обработват прозрачните цветове?

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

### Има ли значение редът на двата цвята?

За WCAG 2 няма значение, защото коефициентът на по-голямата към по-малката яркост е еднакъв и в двата случая. За APCA има значение, защото текстът и фонът се претеглят различно, затова въведете цвета на текста в първото поле, а цвета на фона — във второто.

Вашата реклама тук?

[Пишете ни](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%B2%20OneClick%20Pro)

[Реклама Комплект плъгини за агенти за WordPress.](https://sleekwp.com/?ref=oneclickpro)