สี & ดีไซน์

ตรวจ Contrast สี (WCAG)

ใส่สีตัวอักษรและสีพื้นหลัง ระบบคำนวณอัตราส่วนความต่างสี (Contrast Ratio) และบอกว่าผ่านมาตรฐาน WCAG AA/AAA หรือไม่ สำหรับข้อความปกติและข้อความขนาดใหญ่

หัวข้อตัวใหญ่ Heading

ข้อความเนื้อหาปกติ ขนาด 15px สำหรับทดสอบการอ่าน The quick brown fox jumps over the lazy dog.

ปุ่มตัวอย่าง ตัวอักษรเล็ก 12px — มักไม่ผ่านถ้าสีใกล้กัน
อัตราส่วนความต่างสี

วิธีใช้

  1. เลือกสีตัวอักษรและสีพื้นหลัง
  2. ดู Contrast Ratio ที่คำนวณได้
  3. เช็คว่าผ่านเกณฑ์ WCAG AA/AAA หรือไม่

คำถามที่พบบ่อย

WCAG AA กับ AAA ต่างกันยังไง?

AA ต้องการ contrast อย่างน้อย 4.5:1 สำหรับข้อความปกติ ส่วน AAA เข้มงวดกว่าที่ 7:1 — AAA ให้การเข้าถึงที่ดีกว่าสำหรับผู้มีสายตาเลือนราง

ทำไม Contrast ถึงสำคัญ?

ช่วยให้ผู้ใช้ที่มีปัญหาทางสายตาอ่านเนื้อหาบนเว็บได้ชัดเจน เป็นข้อกำหนดสำคัญของ Web Accessibility

เจอปัญหา? แจ้งเครื่องมือนี้