a11y.skipToMainContent
1

เครื่องมือเลือกสี (WCAG)

เลือกสีพื้นหน้าและพื้นหลัง แล้วดูสัดส่วนความเปรียบต่างของ WCAG 2.1 ด้วยเครื่องหมายพาส/ฟาย สําหรับ AA และ AAA ข้อความธรรมดาและขนาดใหญ่ รวมไปถึงตัวอย่างสด.

Contrast ratio
21.0:1
AA Normal
—
≥ 4.5:1
AA Large
—
≥ 3:1
AAA Normal
—
≥ 7:1
AAA Large
—
≥ 4.5:1

Normal body text — The quick brown fox jumps over the lazy dog.

Large heading — Sample preview

Large text = 18pt+ or 14pt+ bold. WCAG 2.1 thresholds.

Was this tool helpful?
Send output to:
Advertisement

How to use Color Contrast Checker

  1. เลือกสีพื้นหน้าและพื้นหลัง.
  2. อ่านสัดส่วนความเหลื่อมล้ําและเครื่องหมายพาส/ฟาย.
  3. ใช้สลับที่หรือ Envert FG เพื่อทดสอบแบบสลับที่.

อะไรคือ?

WCAG 2. 1 นิยามความเปรียบต่างสําหรับข้อความย่อ: 4.5: 1 สําหรับข้อความปกติ (AA), 3: 1 สําหรับข้อความขนาดใหญ่ (AA), 7: 1 สําหรับแบบปกติ (AA), 4/5: 1 สําหรับใหญ่ (AA). ข้อความใหญ่ถูกกําหนดเป็น 18pt+ หรือ 14pt+ตัวหนา เครื่องมือนี้คํานวณอัตราส่วนโดยใช้สูตรสัมพัทธ์จากสเปกต์ WCAG

Advertisement

FAQ

อะไร คือ ข้อ ความ ใหญ่ ๆ?
18pt+ (24px) น้ําหนักปกติ หรือ 14pt+ (18.66px). ตัวหนา. องค์ประกอบ H1/h2 ส่วนใหญ่มีคุณสมบัติ.
แล้วสมาชิกยูไอที่ไม่ใช่ข้อความล่ะ?
WCAG 2. 1 ต้องการความเปรียบต่างของส่วนประกอบยูไอ 3.1 (ขอบปุ่ม, ขอบสนามแบบฟอร์ม) และไอคอนที่มีความหมาย ตรา AA ใหญ่ประมาณนี้.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Color Contrast Checker on Wikipedia·Developer Tools on Wikipedia·Color Contrast Checker on Britannica

People also use

← Back to Developer Tools · All tags
Advertisement