Color Contrast Checker

Suriin ang foreground/background contrast laban sa WCAG AA at AAA. Tingnan ang pag-update ng ratio habang pumipili ka ng mga kulay.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Suriin ang foreground/background contrast laban sa mga alituntunin ng WCAG AA at AAA.
Gumagana sa iyong browser
Libreng gamitin

Paano gamitin

Pumili ng teksto (foreground) at mga kulay ng background.
Basahin ang contrast ratio at mga resulta ng AA/AAA.
Ayusin hanggang sa makapasa ka sa iyong target na antas.

How this tool works

Pumili ng teksto (foreground) at mga kulay ng background.
Basahin ang contrast ratio at mga resulta ng AA/AAA.
Ayusin hanggang sa makapasa ka sa iyong target na antas.

Recommended settings

Gamitin muna ang mga default na opsyon, pagkatapos ay ayusin kung kinakailangan

Supported formats

Text / on-page input

File size and limits

Ang napakakumplikadong multi-layer na mga preview ay maaaring maging mas mabagal sa mas lumang mga telepono.

Privacy

Ang mga generator ng Kulay at CSS ay ganap na tumatakbo sa iyong browser. Hindi kailanman ina-upload ng mga preview at conversion ang iyong mga istilo.

Common use cases

Gumamit ng Color Contrast Checker tuwing kailangan mo: Suriin ang foreground/background contrast sa mga alituntunin ng WCAG AA at AAA.

Troubleshooting

Iba ang hitsura ng preview pagkatapos i-paste

Suriin kung may nakikipagkumpitensyang CSS sa iyong pahina (mga pag-reset, minanang mga kulay). Kopyahin muna ang nabuong panuntunan sa isang nakahiwalay na stylesheet.

FAQ

Ina-upload ba nito ang aking CSS?

Hindi. Ang mga generator at converter ay tumatakbo sa iyong browser na may live na preview.

Kailangan ko ba ng account?

Hindi. Buksan ang tool, i-tweak ang mga kontrol, at kopyahin ang CSS.

Color Contrast Checker