Contrast Checker

Maglagay ng kulay ng text at background para makita ang WCAG contrast ratio at kung aling mga antas ng AA at AAA ang pumapasa.

—Contrast ratio
Normal na textAA4.5:1—
Normal na textAAA7:1—
Malaking textAA3:1—
Malaking textAAA4.5:1—
UI at mga graphic3:1—
Maglagay ng kulay ng text at background para masuri.

Ang bawat pagsusuri ay tumatakbo sa iyong browser. Walang anuman sa mga inilalagay mo ang ina-upload sa BroBroGo.

FAQ

Ano ang ibig sabihin ng mga resultang AA at AAA?

AA ang antas na nilalayon ng karamihan sa mga site: kailangan nito ng ratio na hindi bababa sa 4.5:1 para sa normal na text at 3:1 para sa malaking text. Mas mahigpit ang AAA — 7:1 para sa normal na text at 4.5:1 para sa malaking text. Ang ratio ay tumatakbo mula 1:1 (walang contrast) hanggang 21:1 (itim sa puti).

Ano ang itinuturing na malaking text?

Text na mula 18pt (mga 24px), o 14pt (mga 18.5px) kapag naka-bold. Ang mas malaking text ay nananatiling nababasa sa mas mababang contrast, kaya pumapasa ito sa AA sa ratio na 3:1 at AAA sa 4.5:1 sa halip na sa mas mahigpit na limitasyon para sa normal na text.

Aling mga format ng kulay ang maaari kong ilagay?

Mag-type ng hex value tulad ng #1a1a1a, rgb() value tulad ng rgb(26, 26, 26), o hsl() value — o i-click ang alinmang swatch para pumili ng kulay. Gamitin ang swap button para pagbaligtarin ang mga kulay ng text at background.

Ito ba ay WCAG 2 o ang mas bagong pamamaraan ng APCA?

Ginagamit nito ang formula ng WCAG 2.1 / 2.2, ang tinutukoy ng mga panuntunan sa accessibility at mga audit ngayon. Ang APCA ay isang mas bago at mas perceptual na pamamaraan na kasalukuyan pang binabalangkas para sa WCAG 3 — may potensyal, ngunit hindi pa ito pamantayan sa pagsunod, kaya hindi ito ginagamit ng mga resulta ng pagpasa rito.

Color ConverterMag-convert ng mga kulay sa pagitan ng HEX, RGB, HSL, HSV, CMYK, at LAB — i-edit ang kahit anong field at ang iba ay mag-a-update habang nagpapatuloy ka.Image Color PickerPumili ng anumang pixel mula sa isang imahe at basahin ang HEX, RGB at HSL nito, na may magnifier para sa tumpak na pag-sample.Image Format ConverterMag-convert ng mga imaheng JPG, PNG, WebP, HEIC, at AVIF sa iyong browser.Kalkulador ng Aspect RatioGawing malinis na ratio tulad ng 16:9 ang anumang lapad × taas, o pumili ng ratio para kumpletuhin ang kulang na panig — para sa video, larawan, at mga screen.Box Shadow GeneratorI-drag ang mga slider para humubog ng box-shadow, magpatong ng mga layer para sa lalim, at kopyahin ang natapos na CSS agad-agad.Gradient GeneratorBumuo ng linear, radial, o conic na gradient, magdagdag ng mga color stop at i-set ang direksyon, pagkatapos ay kopyahin ang CSS sa isang click lang.