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

Како да ја користите проверката на контраст

1. Внесете Боја на текстот и Боја на позадината. Користете ги примероците на бои или внесете која било CSS вредност во полињата: HEX код како #595959, rgb(89 89 89), hsl(0 0% 35%) или име како navy.
2. Однос на контраст се освежува додека пишувате, од 1:1 (без контраст) до 21:1 (црна на бела).
3. Табелата Резултати за WCAG 2.2 прикажува Поминува или Не поминува за Нормален текст, Голем текст и Елементи на интерфејс и графики, на нивоа AA и AAA.
4. Погледнете го Преглед: прикажува нормален текст, голем текст, голем задебелен текст, контура на копче и икона во вашите две бои.
5. Ако некое ниво не поминува, изберете Цел под Предлози. Алатката предлага Најблиска боја на текст што поминува и Најблиска боја на позадина што поминува. Кликнете Користи за да примените една. Замени бои ги разменува текстот и позадината.

Сè се пресметува во вашиот прелистувач. Ништо од внесеното не се испраќа на сервер.

Како се пресметува односот на контраст

WCAG 2.x го дефинира односот како (L1 + 0,05) / (L2 + 0,05), каде L1 е релативната луминанса на посветлата боја, а L2 на потемната. Релативната луминанса се пресметува од линеаризирани sRGB канали: секој канал се декодира со sRGB кривата, па L = 0,2126 R + 0,7152 G + 0,0722 B. Зелената тежи најмногу бидејќи окото е најчувствително на неа, затоа чистата зелена изгледа многу посветла од чистата сина со иста „јачина“.

Односот никогаш не се заокружува нагоре. #777777 на бела дава околу 4,48:1 и не поминува AA за нормален текст, иако изгледа како „4,5“. Оваа алатка ја скратува прикажаната вредност на две децимали, па она што го гледате е она што WCAG го проверува.

Ако бојата на текстот е полупроѕирна (на пример rgb(0 0 0 / 60%)), најпрво се меша со позадината, како што би ја нацртал прелистувачот. Провидноста на бојата на позадината се игнорира, бидејќи не се знае што е зад страницата.

Нивоата на WCAG накратко

„Голем текст“ значи најмалку 18 pt (24 CSS пиксели) или 14 pt задебелен (околу 18,66 px). Логоата и чисто декоративниот текст немаат барање. Правилото 3:1 за елементи на интерфејс (критериум за успех 1.4.11) се однесува на рабовите на полињата и копчињата, индикаторите на фокус, иконите и линиите на графиконите што корисниците треба да ги видат.

Како работат предлозите

Предложените бои ги задржуваат нијансата и хроматичноста на вашата боја во просторот OKLCH и ја менуваат само светлината, потемно или посветло, додека не се достигне целниот однос. Алатката потоа го бира она од двата правци што е визуелно најблиску до вашата оригинална боја, мерено во OKLab. Резултатот повторно се проверува по заокружувањето на HEX код, па навистина поминува. Ако ниту една светлина не ја достигнува целта (на пример 7:1 наспроти средно сива), алатката го кажува тоа.

За APCA

APCA (Accessible Perceptual Contrast Algorithm) е понов модел на контраст што се разгледува за идниот WCAG 3. Ги зема предвид тежината на фонтот, големината и поларитетот (темно на светло наспроти светло на темно). Сè уште е нацрт и не е правно ниту нормативно барање, па оваа алатка ги прикажува резултатите од WCAG 2.x, кои остануваат референца за европскиот стандард за пристапност EN 301 549, Section 508 и повеќето закони.