ImageColorPicker.com

Värvikontrasti kontrollija

Testi esiplaani ja taustavärvide kontrastsuse suhet, et tagada juurdepääsetavus.

Kontrolli oma värve

Testi värvikombinatsioone, et tagada nende vastavus WCAG juurdepääsetavuse standarditele teksti loetavuse osas.

20.26 ühele
Kontrastsus
AAA
Teksti tulemus
Suurepärane

Võrreldi: #000000 peal #FBFBF9

Tekst

16px, Regular (400)

Loetakse tavatekstiks.

  • AA (WCAG 1.4.3): vähemalt 4.5:1

    Läbitud

  • AAA (WCAG 1.4.6): vähemalt 7:1

    Läbitud

Kasutajaliidese komponendid ja graafika

Ikonid, sisenemise äärised, fookusnäidikud ja teised osad, mida pead nägema, et liidest kasutada.

  • AA (WCAG 1.4.11): vähemalt 3:1

    Läbitud
20.26 ühele. Tekst: vastab AA, vastab AAA. UI-komponendid: vastab.
Kuidas seda kontrollitakse
Värvid, mida võrreldi (pärast segamist)
Tekst #000000 taustal #FBFBF9
Suhteline heledus
Tekst 0.0000, taust 0.9634
Valem
(L1 + 0.05) / (L2 + 0.05) kus L1 on heledama värvi heledus ja L2 tumedama värvi heledus.
Täpne suhe
20.2686 kuni 1, kuvatud kui 20.26 kuni 1. Kuvatud väärtus lõigatakse ära, seda ei ümardata, seega see ei tundu kunagi parem kui tegelikult on. Täpne väärtus on see, millega nõuet võrreldakse.

Teksti suurus: 16px, Regular (400)

Loetakse tavatekstiks. Suur tekst on vähemalt 24px (18pt) või vähemalt 18.67px (14pt), kui see on bold (kaal 700 või rohkem). Suurused kuvatakse lõigatult, mitte ümardatult.

Loetakse tavatekstiks. Suur tekst on vähemalt 24px (18pt) või vähemalt 18.67px (14pt), kui see on bold (kaal 700 või rohkem). Suurused kuvatakse lõigatult, mitte ümardatult.

Aa
Eelvaate pealkiri

Pruun rebane hüppab üle laisa koera

Väikese teksti näide (12px)

Tekst
#000000
Taust
#fbfbf9

WCAG standardid

Tase AA

Minimaalne kontrastsuhe 4.5:1 tavalise teksti ja 3:1 suure teksti jaoks. Kohustuslik enamikul veebisaitidel.

Tase AAA

Tõhustatud kontrastsuhe 7:1 tavalise teksti ja 4.5:1 suure teksti jaoks. Soovitatav parima juurdepääsetavuse tagamiseks.

Värvikontrasti kontrollija

Arvuta teksti ja taustavärvide kontrastsuse suhe.

Vali värv kasutades värvivalijat teksti ja tausta jaoks või sisesta värv RGB heksadecimaal formaadis (nt #259 või #2596BE). Saad libistiga kohandada värvi valikut. Veebisisu juurdepääsetavuse juhised (WCAG) pakuvad spetsiaalse juhise, et määrata kindlaks, kas tekst on nägemispuudega kasutajatele loetav. See kriteerium kasutab spetsiaalset algoritmi, et kaardistada värvikombinatsioonid võrreldavateks suheteks. Selle valemi abil väidab WCAG, et minimaalne kontrastsuhe 4.5:1 tekstile ja taustale on piisav tavateksti jaoks ja suure teksti (18+ pt tavaline või 14+ pt valge) jaoks peaks olema vähemalt 3:1.

Põhifunktsioonid

  • Reaalajas kontrastsuse suhte arvutamine
  • WCAG AA & AAA vastavuse kontrollimine
  • HSL liugurid peenhäälestuseks
  • Mitme eelvaate formaadid

Täpsemad tööriistad

  • Automaatne värvide parandamine
  • Teksti ja tausta näidised
  • Värvinime tuvastamine
  • Tulemuste eksportimine

Korduma kippuvad küsimused

WCAG AA vastavuseks vajab tavaline tekst vähemalt 4,5:1 kontrastsuse suhet, suur tekst (18pt või 14pt paksus kirjas) aga 3:1.

WCAG AAA nõuab kõrgemaid kontrastsuse suhteid: 7:1 tavalisele tekstile ja 4,5:1 suurele tekstile, AA puhul on need vastavalt 4,5:1 ja 3:1.

Kasuta meie automaatparanduse funktsiooni, et kohandada kas teksti- või taustavärvi, säilitades kujunduse eesmärgi, või reguleeri värve käsitsi HSL liugurite abil, mille visuaalsed näidikud näitavad AA/AAA vastavuseks sobivaid vahemikke.

Rohelised tsoonid ja AA/AAA märgised näitavad WCAG-vastavuseks optimaalseid vahemikke. Suunavihjed (Heledamaks/Tumedamaks) aitavad sul praeguse värvikombinatsiooni põhjal kontrasti parandada.

Jah, võid sisestada mis tahes heksakoode või kasutada värvivalijat kohandatud värvide valimiseks. URL uueneb automaatselt, nii et saad jagada kindlaid värvikombinatsioone.