Color contrast checker

Suriin ang iyong mga kulay

Subukan ang mga kumbinasyon ng kulay upang matiyak na nakakatugon ito sa mga pamantayan ng accessibility ng WCAG para sa pagbabasa ng teksto.

1.00:1

Kontrahan

Bigo

Napakahina

Normal na teksto

AA (4.5:1)

AAA (7:1)

Malaking teksto

AA (3:1)

AAA (4.5:1)

Kulay ng Teksto

Kulay ng Background

Mabilis na pag-aayos

Pamagat ng preview

Ang mabilis na kayumangging soro ay tumalon sa tamad na aso

Halimbawa ng maliit na teksto (12px)

Teksto

#ffffff

Background

#e57000

Mga Pamantayan ng WCAG

Antas AA

Minimum na contrast ratio na 4.5:1 para sa normal na teksto at 3:1 para sa malaking teksto. Kailangan para sa karamihan ng mga website.

Antas AAA

Pinahusay na contrast ratio na 7:1 para sa normal na teksto at 4.5:1 para sa malaking teksto. Inirerekomenda para sa optimal na accessibility.

Hindi sapat ang contrast para sa lahat ng laki ng teksto - hindi pumapasa sa mga pamantayan ng WCAG.

Kalkulahin ang ratio ng kontrahan ng teksto at mga kulay ng background.

Pumili ng kulay gamit ang color picker para sa kulay ng teksto at background o magpasok ng kulay sa RGB hexadecimal format (hal. #259 o #2596BE). Maaari mong i-adjust ang slider para pumili ng kulay. May specific na guideline ang Web Content Accessibility Guidelines (WCAG) para matulungan kung readable ang teksto para sa mga nakakita. Gumagamit ang criteria ng particular na algorithm para imapa ang kombinasyon ng kulay sa comparable ratios. Gamit ang formula na ito, sinasabi ng WCAG na ang kulay na may contrast ratio na 4.5:1 sa pagitan ng teksto at background ay sapat para sa regular (body) text, at ang malaking teksto (18+ pt regular, o 14+ pt bold) ay dapat may at least 3:1 na color contrast ratio.

Pangunahing tampok

Real-time na pagkalkula ng contrast ratio
Pagsusuri ng pagsunod sa WCAG AA & AAA
HSL sliders para sa mas pinong pag-aayos
Maramihang format ng preview

Mga advanced na tool

Awtomatikong pag-aayos ng kulay
Mga halimbawa ng teksto at background
Pagtukoy ng pangalan ng kulay
I-export ang mga resulta

Mga madalas itanong

Para sa WCAG AA compliance, nangangailangan ang normal na teksto ng pinakamababang contrast ratio na 4.5:1, habang ang malaking teksto (18pt o 14pt na makapal) ay nangangailangan ng 3:1.

Mas mataas ang contrast ratio na kailangan ng WCAG AAA: 7:1 para sa normal na teksto at 4.5:1 para sa malaking teksto, kumpara sa 4.5:1 at 3:1 ng AA.

Gamitin ang aming automatic fix feature para ayusin ang kulay ng teksto o background habang pinananatili ang layunin ng iyong disenyo, o manu-manong ayusin ang mga kulay gamit ang HSL sliders na may visual indicators na nagpapakita ng pinakamainam na zone para sa AA/AAA compliance.

Ipinapakita ng mga berdeng zone at marka ng AA/AAA ang pinakamainam na saklaw para makamit ang WCAG compliance. Ginagabayan ka ng mga direction hint (Mas maliwanag/Mas madilim) tungo sa mas magandang contrast batay sa kasalukuyan mong kombinasyon ng kulay.

Oo, maaari kang maglagay ng anumang hex color code o gumamit ng color picker para pumili ng sarili mong mga kulay. Awtomatikong nag-a-update ang URL para maibahagi mo ang mga partikular na kombinasyon ng kulay.