Kontrasto tikrintuvas

Nemokamas WCAG kontrasto tikrintuvas. Įvesk teksto ir fono spalvą ir gausi kontrasto santykį, AA/AAA rezultatus bei artimiausią tinkamą spalvą.

Teksto spalva

Fono spalva

Kontrasto santykis

–

WCAG 2.2 rezultatai

	AA	AAA
Įprastas tekstas
Didelis tekstas
Sąsajos elementai ir grafika		–

Peržiūra

Įprastas tekstas (16 px). Vienas gaidys, du gaideliai ir trys vištos pralenkia rudą lapę.

Didelis tekstas (24 px)

Didelis pastorintas tekstas (18,66 px pastorintas)

Mygtukas

Pasiūlymai

Tikslas

Artimiausia tinkama teksto spalva

–

Artimiausia tinkama fono spalva

–

Kaip naudotis kontrasto tikrintuvu

Įvesk Teksto spalva ir Fono spalva. Naudok spalvų pavyzdžius arba įrašyk bet kurią CSS reikšmę laukeliuose: HEX kodą, pvz., #595959, rgb(89 89 89), hsl(0 0% 35%) arba pavadinimą, pvz., navy.
Kontrasto santykis atsinaujina, kai tik rašai: nuo 1:1 (jokio kontrasto) iki 21:1 (juoda ant baltos).
Lentelė WCAG 2.2 rezultatai rodo Tinka arba Netinka kategorijoms Įprastas tekstas, Didelis tekstas ir Sąsajos elementai ir grafika, lygiais AA ir AAA.
Pažiūrėk Peržiūra: joje matyti įprastas tekstas, didelis tekstas, didelis pastorintas tekstas, mygtuko kontūras ir piktograma tavo dviem spalvomis.
Jei koks nors lygis netinka, skiltyje Pasiūlymai pasirink Tikslas. Įrankis pasiūlo Artimiausia tinkama teksto spalva ir Artimiausia tinkama fono spalva. Spustelėk Naudoti, kad pritaikytum vieną iš jų. Sukeisti spalvas sukeičia tekstą ir foną vietomis.

Viskas skaičiuojama tavo naršyklėje; niekas niekur nesiunčiama.

Kaip skaičiuojamas kontrasto santykis

WCAG 2.x apibrėžia santykį kaip (L1 + 0,05) / (L2 + 0,05), kur L1 yra šviesesnės spalvos santykinis šviesis, o L2 – tamsesnės. Santykinis šviesis skaičiuojamas iš tiesinių sRGB kanalų: kiekvienas kanalas dekoduojamas sRGB perdavimo kreive, tada L = 0,2126 R + 0,7152 G + 0,0722 B. Žalia sveria daugiausia, nes mūsų akys jai jautriausios, todėl gryna žalia atrodo daug ryškesnė nei gryna mėlyna tos pačios „stiprumo“ vertės.

Santykis niekada neapvalinamas į didesnę pusę. #777777 ant baltos duoda apie 4,48:1 ir netinka AA įprastam tekstui, nors atrodo kaip „4,5“. Šis įrankis rodomą reikšmę nukerta iki dviejų ženklų po kablelio, todėl tai, ką matai, yra tai, ką tikrina WCAG.

Jei teksto spalva pusiau permatoma (pavyzdžiui, rgb(0 0 0 / 60%)), ji pirmiausia sumaišoma su fonu, kaip ją nupieštų naršyklė. Fono spalvos skaidrumas ignoruojamas, nes nežinoma, kas yra už puslapio.

WCAG lygiai trumpai

Turinys	AA	AAA
Įprastas tekstas	4,5:1	7:1
Didelis tekstas (24 px arba 18,66 px pastorintas)	3:1	4,5:1
Sąsajos elementai ir prasmingi grafikos elementai	3:1	–

„Didelis tekstas“ reiškia bent 18 pt (24 CSS pikseliai) arba 14 pt pastorintą (maždaug 18,66 px). Logotipams ir grynai dekoratyviam tekstui reikalavimų nėra. 3:1 taisyklė sąsajos komponentams (sėkmės kriterijus 1.4.11) taikoma įvesties laukų ir mygtukų kraštinėms, fokuso indikatoriams, piktogramoms ir diagramų linijoms, kurias naudotojams reikia matyti.

Kaip veikia pasiūlymai

Pasiūlytos spalvos išlaiko tavo spalvos atspalvį ir sodrumą (chromą) OKLCH erdvėje ir keičia tik šviesumą, tamsindamos arba šviesindamos, kol pasiekiamas tikslinis santykis. Tada įrankis pasirenka tą iš dviejų krypčių, kuri vizualiai artimesnė originaliai spalvai, matuojant OKLab erdvėje. Rezultatas dar kartą patikrinamas po suapvalinimo iki HEX kodo, todėl jis tikrai tinka. Jei joks šviesumas tikslo nepasiekia (pavyzdžiui, 7:1 prieš vidutinį pilką), įrankis tai pasako.

Apie APCA

APCA (Accessible Perceptual Contrast Algorithm) yra naujesnis kontrasto modelis, svarstomas būsimam WCAG 3. Jis atsižvelgia į šrifto svorį, dydį ir poliškumą (tamsus ant šviesaus ar šviesus ant tamsaus). Tai vis dar projektas, o ne teisinis ar norminis reikalavimas, todėl šis įrankis pateikia WCAG 2.x rezultatus, kurie tebėra etalonas Europos prieinamumo standartui EN 301 549, Section 508 ir daugumai įstatymų.

Dažnai užduodami klausimai

Kokio kontrasto santykio reikia pagrindiniam tekstui?

Bent 4,5:1 AA lygiui, kurio reikalauja dauguma įstatymų ir taisyklių. Ilgam skaitymui ar silpnaregiams siek 7:1 (AAA).

Ar baltas tekstas ant mano prekės ženklo spalvos tinka?

Įvesk baltą kaip teksto spalvą, o prekės ženklo spalvą kaip foną. Daugelis vidutinio šviesumo mėlynų, oranžinių ir žalių pasiekia tik 3:1: gerai didelėms antraštėms ir mygtukams su dideliais užrašais, bet netinka mažam tekstui. Jei įprastam tekstui reikia AA, naudok pasiūlytą fono spalvą.

Kodėl spalvų tvarka nekeičia santykio?

Formulė visada dalija šviesesnį šviesį iš tamsesnio, todėl tamsus ant šviesaus ir šviesus ant tamsaus duoda tą patį santykį. Suvokiamas kontrastas vis tiek gali šiek tiek skirtis – tai viena iš problemų, kurias bando spręsti APCA.

Ar 4,49:1 yra pakankamai arti, kad tiktų?

Ne. WCAG ribos yra griežti minimumai: 4,49:1 netinka AA įprastam tekstui. Naudok pasiūlymą, kad gautum spalvą, kuri tikrai tinka.

Ar kontrasto tikrintuvas tinka vietos žymekliui ar išjungtam tekstui?

Vietos žymeklio tekstas, kai jis perteikia informaciją, turi atitikti tą patį 4,5:1 minimumą. Išjungtiems valdikliams kontrasto reikalavimai netaikomi, tačiau įskaitomos išjungtos būsenos vis tiek padeda naudotojams.