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.

6.47 al 1
Kontrasto
AA
Teksta rezulto
Bona

Komparite: #FFFFFF sur #8631C3

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

    Bezoniĝas ankoraŭ 0.53

    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
6.47 al 1. Teksto: pasas AA, ne pasas AAA. UI-komponentoj: pasas.
Kiel tio estas kontrolata
Koloroj komparitaj (post blandado)
Teksto #FFFFFF sur fono #8631C3
Relativa luminanco
Teksto 1.0000, fono 0.1120
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
6.4794 al 1, montrata kiel 6.47 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
#ffffff
Fono
#8631c3

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.