Ang Contrast Checker ay nagkakalkula ng WCAG 2.1 contrast ratio sa pagitan ng dalawang kulay at minamarkahan sila laban sa AA/AAA threshold para sa parehong normal at malaking text. Ang live preview ay nagpapakita ng text na naka-render sa piniling mga kulay, at ang "pick page background" na button ay kumukuha ng sample mula sa kasalukuyang page.
Ang accessibility ay lalong kinakailangan — ang pagsunod sa WCAG ay isang legal na kinakailangan sa maraming hurisdiksyon, at kahit hindi, ang mahinang contrast ay nagtataboy ng mga user. Sinasabi sa iyo ng Contrast Checker agad-agad kung ang anumang dalawang kulay ay nakakatugon sa mga standard ng WCAG. Pumili ng foreground at background sa pamamagitan ng color picker o i-paste ang mga hex value; kinakalkula ng tool ang contrast ratio gamit ang opisyal na WCAG luminance formula at minamarkahan ito laban sa apat na threshold: AA normal (≥4.5:1), AA malaki (≥3:1), AAA normal (≥7:1), at AAA malaki (≥4.5:1). Ang bawat threshold ay nagpapakita ng malinaw na Pass/Fail na badge. Isang live preview ang nag-re-render ng malaki at normal na text sa piniling mga kulay para makita mo ang aktwal na visual na epekto. Isang button ang kumukuha ng sample ng body background ng kasalukuyang page — kapaki-pakinabang kapag tinitingnan kung ang isang kombinasyon ng kulay sa isang totoong site ay pumapasa. Lahat ay tumatakbo nang lokal sa iyong browser, walang uploads.
Gumagamit ng opisyal na WCAG luminance formula para kalkulahin ang contrast ratio. Ang resulta ay eksakto at tumutugma sa bawat compliant na accessibility checker.
Pass/fail para sa AA normal (≥4.5:1), AA malaki (≥3:1), AAA normal (≥7:1), AAA malaki (≥4.5:1) — lahat ay ipinapakita bilang isang grid.
Nag-re-render ng aktwal na malaki at normal na text sa iyong piniling mga kulay para makita mo ang visual na epekto kasama ang numeric ratio.
Sa isang click ay kumukuha ng sample ng computed body background color ng kasalukuyang page — kapaki-pakinabang para sa pag-test ng mga real-world na kombinasyon.
I-type ang hex value o gamitin ang native color picker. Ang mga value ay nag-si-sync habang nag-e-edit ka sa alinman sa mga ito.
Sa isang click ay pinagpapalit ang foreground at background — kapaki-pakinabang kapag tinitingnan ang mga inverted theme o hover state.
Bago i-finalize ang isang color palette, i-check ang bawat kulay ng text laban sa background nito para matiyak ang WCAG AA compliance — iniiwasan ang rework sa huli.
Gamitin ang "pick page background" sa isang live na site, pagkatapos ay i-paste ang aktwal na kulay ng text — mahanap ang mga a11y violation sa loob ng ilang minuto nang hindi binubuksan ang Lighthouse.
Kapag ang isang brand ay pumili ng kulay na maaaring bumagsak sa a11y, gamitin ang checker para mahanap ang pinakamalapit na compliant na variant (mas madilim/mas maliwanag na shade).
I-verify na ang mga kulay ng hover/active/disabled state ay nakakatugon pa rin sa mga contrast requirement, hindi lang ang default.
Ang mga dark theme ay madalas na bumabagsak sa contrast para sa grey-on-grey na text. I-check ang iyong pinakamadilim na grey laban sa iyong pinakamadilim na background para mahuli ang mga ito.
I-click ang Contrast icon sa DevSuite Pro dock. Magbubukas ang isang panel na may foreground at background color field.
Gamitin ang color picker o i-paste ang hex value para sa bawat isa. Ang live preview ay nag-a-update habang nagbabago ka ng mga kulay.
Ang malaking numero (hal. 4.8:1) ay ang contrast ratio. Mas mataas ay mas mabuti. 3 ang pinakamababa; 4.5 ang target para sa normal na text.
Ang mga pass/fail na badge para sa AA at AAA, normal at malaking text size, ay nagpapakita sa isang sulyap kung ano ang kwalipikasyon ng iyong kombinasyon.
Kung bagsak, i-tweak ang mga kulay. Padilimin ang foreground o paliwanagin ang background (o vice versa) hanggang sa ang target tier ay magpakita ng Pass.
I-install ang DevSuite Pro nang libre at i-unlock ang 64+ developer tools para sa iyong browser.
