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.

3.65 al 1
Kontrasto
Malsukcesa
Teksta rezulto
Malbona

Komparite: #FFFFFF sur #C15ECC

Teksto

16px, Regula (400)

Kalkuliĝas kiel normalteksto.

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

    Bezoniĝas ankoraŭ 0.85

    Malsukcesa

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

    Bezoniĝas ankoraŭ 3.35

    Malsukcesa

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
3.65 al 1. Teksto: ne pasas AA, ne pasas AAA. UI-komponentoj: pasas.
Kiel tio estas kontrolata
Koloroj komparitaj (post blandado)
Teksto #FFFFFF sur fono #C15ECC
Relativa luminanco
Teksto 1.0000, fono 0.2370
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
3.6582 al 1, montrata kiel 3.65 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.

Rapidaj riparoj

Aa
Antaŭrigarda titolo

La rapida bruna vulpo saltas super la laca hundo

Ekzemplo de malgranda teksto (12px)

Teksto
#ffffff
Fono
#c15ecc

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.