Paano ko susuriin kung pumapasa sa WCAG ang mga kulay ng aking teksto at background?

Maglagay ng mga hex code sa Kulay ng teksto at Kulay ng background, o gamitin ang mga picker. Lumalabas ang Contrast ratio na may Pasado o Bagsak para sa AA at AAA na normal at malaking teksto, pati na rin sa mga bahagi ng UI.

Anong contrast ratio ang kailangan ng WCAG AA?

Ang AA ay nangangailangan ng 4.5:1 para sa normal na teksto at 3:1 para sa malaking teksto. Ang AAA ay nangangailangan ng 7:1 para sa normal na teksto at 4.5:1 para sa malaking teksto. Ang mga bahagi ng UI at mga graphical na bagay ay nangangailangan ng 3:1.

Ano ang itinuturing na malaking teksto?

Itinuturing ng tool ang 18pt (24px) na regular na teksto, o 14pt (18.66px) na bold na teksto, bilang malaki. Ang mas maliit na teksto ay dapat matugunan ang mas mataas na mga threshold ng normal na teksto.

Bagsak sa AA ang aking mga kulay. Paano ko aayusin ang mga ito?

Gamitin ang mga one-click na mungkahing Ayusin ang kulay ng teksto o Ayusin ang background. Inaayos ng mga ito ang liwanag habang pinapanatili ang parehong hue hanggang umabot ang pares sa 4.5:1.

Anong mga format ng kulay ang tinatanggap nito, at maaari ba akong pumili mula sa screen?

Tumatanggap ito ng 3-digit at 6-digit na hex na halaga, tulad ng #abc o #1e293b. Lumalabas ang button na Pumili ng kulay mula sa screen sa mga browser na sumusuporta sa EyeDropper API, tulad ng Chromium.

Oo. Libre ang bawat tool, walang account at walang credit card. Ang trabaho ay tumatakbo sa iyong device sa halip na sa aming mga server, kaya ito nananatiling libre.

Gumagana ba ito sa mobile?

Oo. Gumagana ito sa mga kasalukuyang mobile browser sa iOS at Android, nang walang ini-install.

🌓

Libreng Pansuri ng WCAG Color Contrast

Suriin kung ang dalawang kulay ay nakakatugon sa mga pamantayan ng WCAG AA at AAA contrast para sa accessibility. Live preview sa maraming laki ng teksto na may awtomatikong mungkahi kapag mababa ang contrast.

Tumatakbo sa iyong browserWalang pag-sign up, walang pop-upHindi kailangan ng loginLibre magpakailanman

Gumagana offline kapag na-load na

Kulay ng teksto

Kulay ng background

Malaking heading na teksto

Katamtamang body text (18px) para sa pagbabasa at nilalaman.

Normal na body text (16px) para sa mga talata.

Maliit na body text (14px) para sa mga caption at metadata.

14.63:1

Contrast ratio

✓WCAG AA — Normal na teksto

Nangangailangan ng 4.5:1 · Mayroon kang 14.63:1

✓WCAG AA — Malaking teksto

Nangangailangan ng 3.0:1 · Mayroon kang 14.63:1

✓WCAG AAA — Normal na teksto

Nangangailangan ng 7.0:1 · Mayroon kang 14.63:1

✓WCAG AAA — Malaking teksto

Nangangailangan ng 4.5:1 · Mayroon kang 14.63:1

✓Mga UI component / grapikong bagay

Nangangailangan ng 3.0:1 · Mayroon kang 14.63:1

Mabilis na mga preset

Batay sa WCAG 2.1 na mga alituntunin sa contrast. Malaking teksto = 18pt (24px) normal o 14pt (18.66px) bold. Nag-a-update ang mga HEX code sa magkabilang direksyon: mag-type ng hex o pumili ng kulay, parehong input ay nananatiling naka-sync.

Mga karaniwang gamit

I-audit ang Web Pages para sa WCAG ComplianceI-verify na ang text colors ng site ay nakakatugon sa WCAG AA o AAA contrast standards para sa accessibility.
I-verify ang Brand Color CombinationsSubukan ang brand color palette pairings upang masiguro na gumagana para sa accessible UI design.
Subukan ang Dark Mode Color PalettesAng light text sa dark backgrounds ay maaaring magkabigo pa rin sa contrast - tingnan ang dark mode palette pairings dito.
Color Pairings para sa Print MaterialsAng posters, signs, at printed materials ay kailangan ding readable contrast - lalo na para sa mas matandang viewers.
Magdisenyo ng Mga Accessible na Kulay ng PindotSiguraduhing ang mga CTA, aksyon na pindot, at mga link ay dumaan sa WCAG laban sa kanilang background.

Paano ito Gumagana

Buong tumatakbo sa iyong browser ang pagsuri ng contrast gamit ang WCAG 2.1 relative luminance algorithm — walang library, walang server, hand-written na math lang na eksaktong sumusunod sa spec. Nag-a-update nang real time ang bawat resulta habang nagta-type o pumipili ka ng kulay.

1
Hex input at normalization
Tinatanggap ang 3-digit (#abc) at 6-digit (#aabbcc) na hex value at nino-normalize sa buong RGB triple. Agad tinatanggihan ang di-wastong input sa halip na tahimik na gawing itim, kaya pulang border ang lumalabas sa halip na nakalilitong pasadong resulta.
2
Kalkulasyon ng WCAG luminance
Kino-convert ang bawat kulay sa relative luminance gamit ang WCAG 2.1 formula: nili-linearize ang mga sRGB channel value gamit ang piecewise gamma correction (hinahati sa 12.92 kapag mas mababa sa 0.03928, itinataas sa power na 2.4 kapag mas mataas), pagkatapos ay binibigyan ng bigat bilang 0.2126R + 0.7152G + 0.0722B.
3
Contrast ratio at pagsuri sa pagsunod
Kinakalkula ang contrast ratio bilang (lighter + 0.05) / (darker + 0.05) at sinusuri laban sa lahat ng limang WCAG threshold: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), AAA large text (4.5:1), at UI components (3:1). Nag-a-update ang mga resulta sa bawat keystroke.
4
Mga mungkahing ayos na pinananatili ang hue
Kapag hindi pumasa ang pares sa WCAG AA, naghahanap ang tool sa HSL lightness space — humahakbang palabas mula sa orihinal na lightness sa magkabilang direksyon — para mahanap ang pinakamalapit na variant ng bawat kulay na pumapasa sa 4.5:1 habang pinananatili ang parehong hue at saturation. Magagamit din ang EyeDropper API (Chromium) para kumuha ng kahit anong kulay direkta mula sa screen mo.

Mga Kaugnay na Tool

👁️

Simulator ng Color Blindness

Tingnan kung paano makikita ang iyong disenyo ng mga taong may color vision deficiency. Ini-simulate ang protanopia, deuteranopia, tritanopia, achromatopsia, at mga mas banayad na anomalya.

SubukanLokal ang mga file

📐

Ano ang Screen Resolution Ko

Tingnan ang iyong screen resolution sa CSS at tunay na pixel, laki ng window, pixel ratio, colour depth, HDR, suporta sa pagpindot at refresh rate, at kopyahin ang lahat ng ito.

Subukan

🖥️

Dead Pixel Test

Suriin ang iyong screen para sa mga dead o stuck pixel gamit ang full-screen na itim, puti, pula, berde, asul at grey, dagdag ang isang opsyonal na stuck pixel fixer.