Contrast Checker — ตรวจคู่สี WCAG AA / AAA

Contrast Checker เป็นเครื่องมือตรวจสอบอัตราส่วนคอนทราสต์ (Contrast Ratio) ระหว่างสีตัวอักษรกับสีพื้นหลัง ตามมาตรฐาน WCAG (Web Content Accessibility Guidelines)

การมี Contrast Ratio ที่เหมาะสมช่วยให้ทุกคนอ่านเนื้อหาบนเว็บได้ง่าย รวมถึงผู้ที่มีปัญหาทางสายตาหรือตาบอดสี

• WCAG AA (ข้อความปกติ) — ต้องมี Contrast Ratio อย่างน้อย 4.5:1
• WCAG AA (ข้อความใหญ่ ≥24px) — ต้องมี Contrast Ratio อย่างน้อย 3:1
• WCAG AAA (ข้อความปกติ) — ต้องมี Contrast Ratio อย่างน้อย 7:1
• WCAG AAA (ข้อความใหญ่ ≥24px) — ต้องมี Contrast Ratio อย่างน้อย 4.5:1

• ตรวจสอบว่า Label ปุ่มในแอปองค์กรผ่าน WCAG AA ก่อนส่ง Design Handoff ให้ Developer
• ตรวจสอบเว็บ E-commerce ที่มีอยู่เพื่อให้ผ่านข้อกำหนด Accessibility ตาม ADA หรือกฎหมายยุโรป
• ทดสอบคู่สี Dark Mode สำหรับแอปธนาคารมือถือเพื่อให้อ่านง่ายในสภาพแสงน้อย
• ตรวจสอบสี Notification Badge กับพื้นหลังเพื่อให้ผู้ที่ตาบอดสีมองเห็นได้ชัดเจน
• ตรวจสอบสีข้อความในอีเมลการตลาดกับ Template พื้นหลังเพื่อการแสดงผลที่สม่ำเสมอทุก Email Client

• ตรวจสอบทั้งข้อความปกติ (16px) และข้อความใหญ่ (24px+) เสมอ เพราะมีข้อกำหนด WCAG Ratio ต่างกัน
• ใช้ปุ่มสลับสีเพื่อทดสอบสีทั้งสองแบบเป็นพื้นหน้าและพื้นหลังได้อย่างรวดเร็ว
• ตั้งเป้า WCAG AAA (7:1) สำหรับเนื้อหาหลักเพื่อ Accessibility สูงสุด แม้ AA (4.5:1) จะเป็นขั้นต่ำตามกฎหมาย
• ตรวจ Contrast สำหรับสถานะ Hover, Focus และ Disabled ด้วย ไม่ใช่แค่สถานะปกติ
• บันทึกคู่สีที่ผ่านมาตรฐานไว้ใน Style Guide เพื่อให้ Developer ไม่ต้องเดาว่าชุดไหนผ่าน

• คิดว่า Placeholder สีเทาอ่อน (#999 บน #fff) อ่านง่าย แต่จริงๆ ได้แค่ 2.85:1 ซึ่งไม่ผ่าน WCAG ทุกระดับ
• ตรวจแค่ Contrast พื้นหน้า/พื้นหลัง โดยลืมตรวจ Focus Ring และ Border กับ Element รอบข้าง
• ใช้แค่สีบ่งบอกข้อผิดพลาดของฟอร์มโดยไม่มี Label ข้อความ ซึ่งผู้ที่ตาบอดสีจะไม่เห็นเลย
• ทดสอบ Contrast บนจอความสว่างสูง โดยลืมว่าผู้ใช้ส่วนใหญ่ดูเนื้อหาบนจอที่มืดกว่าและไม่ได้ปรับสี