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

Ниво 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 пиксела. Всеки по-малък текст е обикновен и се нуждае от по-висок коефициент.

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

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

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

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

Константите на 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 има значение, защото текстът и фонът се претеглят различно, затова въведете цвета на текста в първото поле, а цвета на фона — във второто.