เครื่องมือตรวจสอบความสามารถในการเข้าถึงสี
ป้อนสีข้อความและสีพื้นหลัง (รหัสสีฐานสิบหก) เพื่อตรวจสอบอัตราส่วนความคมชัดและการปฏิบัติตามมาตรฐาน WCAG
นี่คือข้อความตัวหนาขนาดใหญ่
นี่คือข้อความขนาดปกติ
21.00:1
อัตราส่วนความคมชัด
ข้อความปกติ (AA)
ข้อความขนาดใหญ่ (AA)
18pt+ or 14pt+ bold
องค์ประกอบ UI (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
วิธีใช้ เครื่องมือตรวจสอบความสามารถในการเข้าถึงสี
- 1
ป้อนสองสี
ระบุสีพื้นหน้า (ข้อความ) และสีพื้นหลังเป็นรหัส hex เช่น #1a1a1a และ #ffffff
- 2
ตรวจค่าคอนทราสต์
คลิก "ตรวจการเข้าถึง" เพื่อคำนวณอัตราส่วนคอนทราสต์ระหว่างสองสี
- 3
ดูผลลัพธ์ WCAG
ดูป้ายผ่านหรือไม่ผ่านสำหรับ AA และ AAA ที่ระดับข้อความปกติ ข้อความขนาดใหญ่ และคอมโพเนนต์ UI พร้อมตัวอย่างแบบสด
- 4
ปรับตามต้องการ
สลับสีหรือปรับค่า hex จนกว่าคู่สีจะผ่านระดับ WCAG ที่โปรเจกต์ของคุณต้องการ
คำถามที่พบบ่อย
อัตราส่วนคอนทราสต์คืออะไร และเท่าไหร่ถึงเรียกว่าดี
AA กับ AAA ต่างกันอย่างไร
ทำไมข้อความขนาดใหญ่ผ่าน แต่ข้อความปกติไม่ผ่าน
ฉันควรป้อนสีในรูปแบบใด
ตัวตรวจนี้ฟรีและส่งสีของฉันไปที่ไหนหรือไม่
เครื่องมือที่เกี่ยวข้อง
ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้