ImageColorPicker.com

Kolora kontrasta kontrolilo

Testu la kontrastan rilatumon inter antaŭa kaj fona koloroj por certigi alireblecon.

Kontrolu viajn kolorojn

Testu kolorajn kombinaĵojn por certigi ke ili plenumas la WCAG-alireblecajn normojn por teksta legebleco.

13.58 al 1
Kontrasto
AAA
Teksta rezulto
Bonega

Komparite: #000000 sur #CDD0D6

Teksto

16px, Regula (400)

Kalkuliĝas kiel normalteksto.

  • AA (WCAG 1.4.3): almenaŭ 4.5:1

    Trapasis

  • AAA (WCAG 1.4.6): almenaŭ 7:1

    Trapasis

UI-komponentoj kaj grafikoj

Ikonoj, enirbordoj, fokusindikiloj kaj aliaj partoj kiujn vi bezonas vidi por uzi la interfacon.

  • AA (WCAG 1.4.11): almenaŭ 3:1

    Trapasis
13.58 al 1. Teksto: pasas AA, pasas AAA. UI-komponentoj: pasas.
Kiel tio estas kontrolata
Koloroj komparitaj (post blandado)
Teksto #000000 sur fono #CDD0D6
Relativa luminanco
Teksto 0.0000, fono 0.6294
Formulo
(L1 + 0.05) / (L2 + 0.05) kie L1 estas la luminanco de la pli hela koloro kaj L2 de la pli malhela.
Preciza proporcio
13.5891 al 1, montrata kiel 13.58 al 1. La montrata valoro estas tranĉita, ne rondigita, do ĝi neniam ŝajnas pli bona ol ĝi estas. La preciza valoro estas tio, kion oni komparas kun la postulo.

Teksta grandeco: 16px, Regula (400)

Kalkuliĝas kiel normalteksto. Granda teksto estas almenaŭ 24px (18pt), aŭ almenaŭ 18.67px (14pt) kiam grasa (pezo 700 aŭ pli). Grandecoj estas montrataj fortranĉitaj, ne rondigitaj.

Kalkuliĝas kiel normalteksto. Granda teksto estas almenaŭ 24px (18pt), aŭ almenaŭ 18.67px (14pt) kiam grasa (pezo 700 aŭ pli). Grandecoj estas montrataj fortranĉitaj, ne rondigitaj.

Aa
Antaŭrigarda titolo

La rapida bruna vulpo saltas super la laca hundo

Ekzemplo de malgranda teksto (12px)

Teksto
#000000
Fono
#cdd0d6

WCAG Normoj

Nivelo AA

Minimuma kontrastproporcio de 4.5:1 por normala teksto kaj 3:1 por granda teksto. Bezonata por plejparto de retejoj.

Nivelo AAA

Plibonigita kontrastproporcio de 7:1 por normala teksto kaj 4.5:1 por granda teksto. Rekomendita por plej bona alirebleco.

Kolora kontrasta kontrolilo

Kalkulu la kontrastan rilatumon de teksto kaj fona koloroj.

Elektu koloron per la kolorilo por teksto kaj fona koloro aŭ enigu koloron en RGB-heksadecimalo (ekz., #259 aŭ #2596BE). Vi povas ĝustigi la glitilon por elekti koloron. La Retenhava Alireblaj Gvidlinioj (WCAG) havas specifan gvidlinion por helpi konstati ĉu teksto estas legebla por vidaj uzantoj. Ĉi tiu kriterio uzas apartan algoritmon por mapi kolorajn kombinaĵojn en kompareblajn proporciojn. Uzante ĉi tiun formulon, WCAG diras, ke 4.5:1 kolorkontrasta proporcio kun teksto kaj ĝia fono estas sufiĉa por regula (korpa) teksto, kaj grandaj tekstoj (18+ pt regula, aŭ 14+ pt grasa) devus havi almenaŭ 3:1 kolorkontrasta proporcio.

Ĉefaj trajtoj

  • Reala-tempa kontrastorilata kalkulo
  • WCAG AA & AAA kongrua kontrolado
  • HSL-glitiloj por fajna agordo
  • Multoblaj antaŭrigardaj formatoj

Altnivelaj iloj

  • Aŭtomata kolorfiksado
  • Teksto kaj fona specimenoj
  • Kolornoma detekto
  • Eksporti rezultojn

Oftaj demandoj

Por WCAG AA-konformeco, normala teksto bezonas minimuman kontrastan rilatumon de 4,5:1, dum granda teksto (18pt aŭ 14pt grasa) bezonas 3:1.

WCAG AAA postulas pli altajn kontrastajn rilatumojn: 7:1 por normala teksto kaj 4,5:1 por granda teksto, kompare kun 4,5:1 kaj 3:1 de AA.

Uzu nian aŭtomatan korektan funkcion por ĝustigi aŭ la tekstan aŭ la fonan koloron, konservante vian dizajnintencon, aŭ permane ĝustigu la kolorojn per HSL-glitiloj kun vidaj indikiloj, kiuj montras optimumajn zonojn por konformeco AA/AAA.

La verdaj zonoj kaj la markoj AA/AAA montras optimumajn intervalojn por atingi WCAG-konformecon. La direktaj sugestoj (Pli hela/Pli malhela) gvidas vin al pli bona kontrasto laŭ via nuna kolorkombino.

Jes, vi povas enigi ajnajn HEX-kodojn aŭ uzi la kolorelektilon por elekti proprajn kolorojn. La URL ĝisdatiĝas aŭtomate, do vi povas kunhavigi specifajn kolorkombinojn.