ImageColorPicker.com

Tagasuri ng kontrahan ng kulay

Subukan ang ratio ng kontrahan sa pagitan ng mga kulay ng foreground at background upang matiyak ang accessibility.

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.

19.07 sa 1
Kontrahan
AAA
Resulta ng teksto
Super

Inihambing: #000000 sa #F2FF00

Teksto

16px, Regular (400)

Itinuturing na normal na teksto.

  • AA (WCAG 1.4.3): hindi bababa sa 4.5:1

    Pasado

  • AAA (WCAG 1.4.6): hindi bababa sa 7:1

    Pasado

Mga bahagi ng UI at grapiko

Mga icon, border ng input, focus indicator at iba pang bahagi na kailangan mong makita para magamit ang interface.

  • AA (WCAG 1.4.11): hindi bababa sa 3:1

    Pasado
19.07 sa 1. Teksto: pumapasa sa AA, pumapasa sa AAA. Mga bahagi ng UI: pumapasa.
Paano ito sinusuri
Mga kulay na inihambing (pagkatapos i-blend)
Teksto #000000 sa background #F2FF00
Relatibong luminans
Teksto 0.0000, background 0.9039
Pormula
(L1 + 0.05) / (L2 + 0.05) kung saan ang L1 ay ang luminans ng mas maliwanag na kulay at ang L2 ng mas madilim na kulay.
Eksaktong ratio
19.0794 to 1, ipinapakita bilang 19.07 to 1. Ang ipinakitang halaga ay pinuputol, hindi binibilog, kaya hindi ito nagmumukhang mas maganda kaysa sa tunay. Ang eksaktong halaga ang ikinukumpara sa kinakailangan.

Laki ng teksto: 16px, Regular (400)

Itinuturing na normal na teksto. Ang malaking teksto ay hindi bababa sa 24px (18pt), o hindi bababa sa 18.67px (14pt) kapag bold (bigat 700 o mas mataas). Ipinapakita ang mga laki na pinutol, hindi binibilog.

Itinuturing na normal na teksto. Ang malaking teksto ay hindi bababa sa 24px (18pt), o hindi bababa sa 18.67px (14pt) kapag bold (bigat 700 o mas mataas). Ipinapakita ang mga laki na pinutol, hindi binibilog.

Aa
Pamagat ng preview

Ang mabilis na kayumangging soro ay tumalon sa tamad na aso

Halimbawa ng maliit na teksto (12px)

Teksto
#000000
Background
#f2ff00

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.

Color contrast checker

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.