ImageColorPicker.com

Color contrast checker

Sulayi ang contrast ratio tali sa foreground ug background nga mga kolor aron masiguro ang accessibility.

Susiya ang imong mga kolor

Sulayi ang mga kombinasyon sa kolor aron masiguro nga mosunod kini sa WCAG accessibility standards para sa mabasa nga teksto.

5.80 sa 1
Contrast
AA
Resulta sa teksto
Maayo

Gikumpara: #000000 sa #CF6291

Teksto

16px, Regular (400)

Giihap isip normal nga teksto.

  • AA (WCAG 1.4.3): labing menos 4.5:1

    Pasar

  • AAA (WCAG 1.4.6): labing menos 7:1

    1.20 pa ang gikinahanglan

    Napakyas

Mga sangkap sa UI ug grapiko

Mga icon, border sa input, mga indikador sa focus ug uban pang mga bahin nga kinahanglan nimong makita aron magamit ang interface.

  • AA (WCAG 1.4.11): labing menos 3:1

    Pasar
5.80 ngadto sa 1. Teksto: milapas sa AA, napakyas sa AAA. UI nga mga komponent: milapas.
Giunsa kini susihon
Mga kolor nga gikumpara (human pag-blend)
Teksto #000000 sa background #CF6291
Relatibong luminansiya
Teksto 0.0000, background 0.2404
Pormula
(L1 + 0.05) / (L2 + 0.05) kung diin ang L1 mao ang luminansiya sa mas hayag nga kolor ug ang L2 sa mas mangitngit nga kolor.
Eksaktong ratio
5.8090 to 1, gipakita ingon 5.80 to 1. Ang gipakitang bili giputol, dili gi-round, mao nga dili kini mopakita nga mas maayo kaysa tinuod. Ang eksaktong bili mao ang ikumpara sa kinahanglanon.

Gidak-on sa teksto: 16px, Regular (400)

Giihap isip normal nga teksto. Ang dako nga teksto mao ang labing menos 24px (18pt), o labing menos 18.67px (14pt) kung bold (kabug-aton 700 o labaw pa). Ang mga gidak-on gipakita nga giputol, dili gi-round.

Giihap isip normal nga teksto. Ang dako nga teksto mao ang labing menos 24px (18pt), o labing menos 18.67px (14pt) kung bold (kabug-aton 700 o labaw pa). Ang mga gidak-on gipakita nga giputol, dili gi-round.

Aa
Preview nga titulo

Ang paspas nga kayumanggi nga iring molukso ibabaw sa tapulan nga iro

Gamay nga pananglitan sa teksto (12px)

Teksto
#000000
Background
#cf6291

WCAG Standards

Lebel AA

Minimum contrast ratio nga 4.5:1 para sa ordinaryong texto ug 3:1 para sa dagkong texto. Kinahanglan para sa kadaghanan sa mga website.

Lebel AAA

Napabaskog nga contrast ratio nga 7:1 para sa ordinaryong texto ug 4.5:1 para sa dagkong texto. Gipasigarbo para sa labing maayong accessibility.

Color contrast checker

Kwenta ang contrast ratio sa teksto ug background nga mga kolor.

Pilia ang usa ka kolor gamit ang color picker para sa texto ug background color o ipasulod ang usa ka kolor sa RGB hexadecimal format (pananglitan, #259 o #2596BE). Mahimo nimo i-adjust ang slider aron mapili ang kolor. Ang Web Content Accessibility Guidelines (WCAG) adunay piho nga giya aron makatabang mag-igo kung mabasa ba ang texto para sa mga nakakita nga mogamit. Kini nga criterion naggamit og piho nga algorithm aron mausab ang color combinations ngadto sa magkab-ot nga ratios. Gamit kini nga formula, gi-state sa WCAG nga ang 4.5:1 color contrast ratio tale sa texto ug sa background niini igo na para sa regular (body) text, ug ang dagkong texto (18+ pt regular, o 14+ pt bold) kinahanglan adunay labing menos 3:1 color contrast ratio.

Pangunang mga bahin

  • Real-time nga pagkalkula sa contrast ratio
  • WCAG AA & AAA nga pagsunod
  • HSL sliders para sa pag-ayo
  • Daghang preview nga pormat

Abante nga mga himan

  • Awtomatik nga pag-ayo sa kolor
  • Mga sample sa teksto ug background
  • Pag-ila sa ngalan sa kolor
  • I-export ang mga resulta

Kanunay nga gipangutana

Para sa WCAG AA compliance, ang normal nga teksto nagkinahanglan og minimum nga contrast ratio nga 4.5:1, samtang ang dagko nga teksto (18pt o 14pt nga mabaga) nagkinahanglan og 3:1.

Ang WCAG AAA nagkinahanglan og mas taas nga contrast ratio: 7:1 para sa normal nga teksto ug 4.5:1 para sa dagko nga teksto, kumpara sa 4.5:1 ug 3:1 sa AA.

Gamita ang among automatic fix feature aron ayuhon ang text o background nga mga kolor samtang gipadayon ang intensyon sa imong design, o manwal nga ayuha ang mga kolor pinaagi sa HSL sliders nga adunay visual indicators nga nagpakita sa labing maayo nga zones alang sa AA/AAA compliance.

Ang berde nga mga zone ug AA/AAA markers nagpakita sa labing maayo nga range para makab-ot ang WCAG compliance. Ang mga timaan sa direksyon (Mas hayag/Mas itom) mogiya nimo padulong sa mas maayo nga contrast base sa imong kasamtangang kombinasyon sa kolor.

Oo, mahimo nimong ibutang ang bisan unsang hex color code o gamiton ang color picker aron pagpili og custom nga mga kolor. Ang URL automatikong mo-update aron mahimo nimong ipaambit ang piho nga kombinasyon sa kolor.