Utilia
Mga kategorya ▾
Wika: fil ▾

Contrast Checker

Libreng WCAG contrast checker. Ilagay ang kulay ng text at background para makuha ang contrast ratio, resulta sa AA/AAA at pinakamalapit na pasadong kulay.

Kulay ng text
Kulay ng background
Contrast ratio
–

Mga resulta ng WCAG 2.2

AAAAA
Karaniwang text
Malaking text
Mga bahagi ng UI at graphics–

Preview

Karaniwang text (16 px). Ang mabilis na kayumangging soro ay tumatalon sa ibabaw ng tamad na aso.

Malaking text (24 px)

Malaking bold na text (18.66 px bold)

Button

Mga mungkahi

Pinakamalapit na pasadong kulay ng text
–
Pinakamalapit na pasadong kulay ng background
–

Paano gamitin ang contrast checker

  1. Ilagay ang Kulay ng text at Kulay ng background. Gamitin ang mga color swatch o mag-type ng anumang CSS na halaga sa mga field: HEX code gaya ng #595959, rgb(89 89 89), hsl(0 0% 35%) o pangalan gaya ng navy.
  2. Nag-a-update ang Contrast ratio habang nagta-type ka, mula 1:1 (walang contrast) hanggang 21:1 (itim sa puti).
  3. Ipinapakita ng talahanayan ng Mga resulta ng WCAG 2.2 ang Pasado o Bagsak para sa Karaniwang text, Malaking text at Mga bahagi ng UI at graphics, sa antas na AA at AAA.
  4. Tingnan ang Preview: ipinapakita nito ang karaniwang text, malaking text, malaking bold na text, outline ng button at icon sa dalawa mong kulay.
  5. Kung bumagsak ang isang antas, pumili ng Target sa ilalim ng Mga mungkahi. Imumungkahi ng tool ang Pinakamalapit na pasadong kulay ng text at Pinakamalapit na pasadong kulay ng background. I-click ang Gamitin para ilapat ang isa. Ang Ipagpalit ang mga kulay ay nagpapalit ng text at background.

Kinukuwenta ang lahat sa iyong browser; walang ipinapadala saanman.

Paano kinukuwenta ang contrast ratio

Dinedefine ng WCAG 2.x ang ratio bilang (L1 + 0.05) / (L2 + 0.05), kung saan ang L1 ay ang relative luminance ng mas maliwanag na kulay at ang L2 ay ang sa mas madilim. Kinukuwenta ang relative luminance mula sa mga linearized na sRGB channel: dine-decode ang bawat channel gamit ang sRGB transfer curve, saka L = 0.2126 R + 0.7152 G + 0.0722 B. Pinakamabigat ang berde dahil ito ang pinakasensitibo sa ating mga mata, kaya mas maliwanag ang purong berde kaysa sa purong asul na kasing-“lakas” nito.

Hindi kailanman nire-round pataas ang ratio. Ang #777777 sa puti ay nagbibigay ng mga 4.48:1 at bumabagsak sa AA para sa karaniwang text, kahit mukha itong “4.5”. Pinuputol ng tool na ito ang ipinapakitang halaga sa dalawang decimal para ang nakikita mo ang siya mismong sinusuri ng WCAG.

Kung semi-transparent ang kulay ng text (halimbawa rgb(0 0 0 / 60%)), hinahalo muna ito sa background, gaya ng pagguhit ng browser. Hindi isinasama ang transparency sa kulay ng background dahil hindi alam kung ano ang nasa likod ng pahina.

Mga antas ng WCAG sa isang tingin

Nilalaman AA AAA
Karaniwang text 4.5:1 7:1
Malaking text (24 px, o 18.66 px bold) 3:1 4.5:1
Mga bahagi ng UI at makabuluhang graphics 3:1 –

Ang “malaking text” ay hindi bababa sa 18 pt (24 CSS pixel), o 14 pt bold (mga 18.66 px). Walang kinakailangan ang mga logo at purong dekoratibong text. Ang 3:1 na patakaran para sa mga bahagi ng interface (success criterion 1.4.11) ay para sa mga border ng input at button, focus indicator, icon at linya ng chart na kailangang makita ng mga user.

Paano gumagana ang mga mungkahi

Pinapanatili ng mga iminumungkahing kulay ang hue at chroma ng iyong kulay sa OKLCH space at liwanag lang ang binabago, papadilim o papaliwanag, hanggang maabot ang target na ratio. Pagkatapos ay pipiliin ng tool ang direksyong pinakamalapit sa orihinal mong kulay sa paningin, na sinusukat sa OKLab. Sinusuri muli ang resulta pagkatapos i-round sa HEX code, kaya talagang pasado ito. Kung walang liwanag na aabot sa target (halimbawa 7:1 laban sa katamtamang abo), sasabihin ito ng tool.

Tungkol sa APCA

Ang APCA (Accessible Perceptual Contrast Algorithm) ay mas bagong modelo ng contrast na isinasaalang-alang para sa hinaharap na WCAG 3. Isinasaalang-alang nito ang bigat ng font, laki at polarity (madilim sa maliwanag kumpara sa maliwanag sa madilim). Draft pa lamang ito at hindi legal o normatibong kinakailangan, kaya ang mga resulta ng WCAG 2.x ang iniuulat ng tool na ito, na nananatiling reperensya para sa European accessibility standard na EN 301 549, Section 508 at karamihan ng batas.

Mga madalas itanong

Anong contrast ratio ang kailangan ko para sa body text?

Hindi bababa sa 4.5:1 para sa antas AA, ang antas na hinihingi ng karamihan ng batas at patakaran. Layunin ang 7:1 (AAA) para sa mahabang pagbabasa o sa mga taong mahina ang paningin.

Pasado ba ang puting text sa kulay ng aking brand?

Ilagay ang puti bilang kulay ng text at ang kulay ng brand mo bilang background. Maraming katamtamang asul, orange at berde ang 3:1 lang ang naaabot: ayos para sa malalaking heading at button na malaki ang label, pero hindi para sa maliit na text. Gamitin ang iminungkahing kulay ng background kung kailangan mo ng AA para sa karaniwang text.

Bakit hindi nagbabago ang ratio kapag pinagpalit ang mga kulay?

Laging hinahati ng pormula ang mas maliwanag na luminance sa mas madilim, kaya parehong ratio ang madilim sa maliwanag at maliwanag sa madilim. Maaari pa ring bahagyang magkaiba ang nakikitang contrast, na isa sa mga isyung sinusubukang tugunan ng APCA.

Pasado na ba ang 4.49:1?

Hindi. Mahigpit na pinakamababa ang mga threshold ng WCAG: bagsak sa AA ang 4.49:1 para sa karaniwang text. Gamitin ang mungkahi para makakuha ng kulay na talagang pasado.

Gumagana ba ang contrast checker para sa placeholder o disabled na text?

Kailangang matugunan ng placeholder text ang parehong 4.5:1 na minimum kapag may dala itong impormasyon. Exempt sa mga kinakailangan sa contrast ang mga disabled na control, pero nakakatulong pa rin sa mga user ang nababasang disabled na estado.

Mga kaugnay na tool