Liigu sisu juurde

Värvikontrasti kontrollija

Veeb ja arendus

Kui loetav on see tekst sellel taustal?

Kontrolli teksti ja tausta WCAG-kontrasti, vaata täidetud tasemeid ning leia lähedane värv, mis nõuded täidab.

Kontrastisuhe

4,54:1

Läbitud 4, kontrolle kokku 5.

Suure teksti näidis

Kiire pruun rebane hüppab üle laisa koera.

WCAG 2.2 kontrollid

  • Tavaline tekst, tase AA Korras

    Edukriteerium 1.4.3: vajalik vähemalt 4,5:1.

  • Suur tekst, tase AA Korras

    Edukriteerium 1.4.3: vajalik vähemalt 3:1.

  • Tavaline tekst, tase AAA Probleem

    Edukriteerium 1.4.6: vajalik vähemalt 7:1.

  • Suur tekst, tase AAA Korras

    Edukriteerium 1.4.6: vajalik vähemalt 4,5:1.

  • Ikoonid ja juhtelemendid, tase AA Korras

    Edukriteerium 1.4.11: vajalik vähemalt 3:1.

Lähim nõuetele vastav tekstivärv

Tase AAA, tavaline tekst (7:1)
#595959

Sponsitud lingid

Kontrolli teksti ja tausta WCAG-kontrasti, vaata täidetud tasemeid ning leia lähedane värv, mis nõuded täidab.

Kuidas kasutada

  1. Sisesta teksti- ja taustavärv mis tahes CSS-kujul või puuduta valimiseks värvinäidist. Vahetusnupp vahetab need omavahel.
  2. Vaata suhet ja kontrollide loendit: tavaline tekst, suur tekst ning ikoonid või juhtelemendid tasemetel AA ja AAA.
  3. Kui kontroll ebaõnnestub, kopeeri lähim nõuetele vastav tekstivärv. See säilitab värvitooni ja muudab ainult heledust.

Hall tekst valgel taustal

Teksti värv (HEX)Kontrastsussuhe
#00000021:1
#5959597:1
#7676764,54:1
#7777774,47:1
#9999992,84:1

Sponsitud lingid

Kuidas see töötab

Veebisisu juurdepääsetavussuunised WCAG 2.2 hindavad teksti eristumist taustast kontrastisuhtega 1:1 (erinevus puudub) kuni 21:1 (must valgel). AA nõuab tavalisel tekstil vähemalt 4,5:1 ja suurel tekstil 3:1; suur tekst on vähemalt 18-punktine või 14-punktine rasvane tekst (edukriteerium 1.4.3). AAA nõuab vastavalt 7:1 ja 4,5:1 (1.4.6). Nähtavad ikoonid, vormipiirid ning muud vajalikud osad peavad saavutama 3:1 (1.4.11).

Suhe on (L1 + 0,05) ÷ (L2 + 0,05), kus L1 on heledama ja L2 tumedama värvi suhteline heledus. Suhteline heledus on 0,2126 R + 0,7152 G + 0,0722 B lineariseeritud punase, rohelise ning sinise väärtustest. Näiteks #767676 valgel annab L = 0,181 võrreldes väärtusega 1, seega (1 + 0,05) ÷ (0,181 + 0,05) on 4,54:1. Suhe kärbitakse, seda ei ümardata üles: 4,499 ei täida piiri 4,5.

Läbipaistev tekstivärv asetatakse esmalt taustale ja läbipaistev taust valgele. Soovitatud värv säilitab tekstivärvi tooni ning kromaatilisuse ja muudab ainult OKLCH heledust lähima nõuetele vastava väärtuseni, et värv jääks sarnaseks. Kontrast on vaid osa loetavusest: ka font, suurus ja paksus loevad ning suhe ei kirjelda värvipimedate tajuerinevusi peale heleduse.

Korduma kippuvad küsimused

Mis on WCAG järgi suur tekst?

Vähemalt 18-punktine (24 px) või vähemalt 14-punktine (umbes 18,7 px) rasvane tekst. See vajab vähem kontrasti, sest suuremaid tähti on lihtsam lugeda.

Millist taset sihtida?

AA on tavapärane õiguslik ja kujunduslik siht. AAA on rangem ega pruugi kogu saidi puhul olla võimalik, kuid sobib pikema lugemisteksti jaoks.

Kas suhe sõltub sellest, kumb värv on tekst?

Ei. Kahe värvi vahetamisel jääb suhe samaks. Muutuvad ainult näidis ja soovitatud asendus, sest soovitus kohandab tekstivärvi.

Kas kontrastitesti läbimine teeb mu lehe ligipääsetavaks?

Ei. See kontrollib ainult värvikontrasti. Klaviatuuriga kasutamine, tekstilised alternatiivid ja muud nõuded on endiselt olulised.

Miks veidi alla 4,5 jääv suhe ei täida tavateksti AA-nõuet?

Lävend on 4,5:1 ilma ülespoole ümardamiseta. Kuvatud suhe kärbitakse kahe kümnendkohani, et ebapiisav väärtus ei näiks nõuetele vastav.

Järgmiseks võib vaja minna

Veel kategoorias Veeb ja arendus

Kõik 18 tööriista kategoorias Veeb ja arendus

Praegu populaarne

Sponsitud lingid

Sponsitud lingid