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

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

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 и повечето закони.