ความเข้าถึง
ตรวจสอบความคม

ตรวจสอบให้แน่ใจว่าการผสมผสานสีของคุณตรงตามมาตรฐานความเข้าถึง WCAG ตรวจสอบอัตราส่วนความเคาน์เทสต์ระหว่างสีข้อความและพื้นหลังเพื่อให้การออกแบบของคุณสามารถเข้าถึงได้สำหรับทุกคน

การเลือกสี

ตัวอย่างข้อความ

Aa

สุนัขจิ้งจอกสีน้ำตาลที่รวดเร็วกระโดดข้ามสุนัขเกียจคร่านที่นอนหลับ

อัตราส่วนความเคาน์เทสต์

13.34:1
ความเคาน์เทสต์ที่ปรับปรุง (AAA)

WCAG AA

มาตรฐานที่แนะนำสำหรับความเข้าถึงเว็บ

  • • ข้อความปกติ: 4.5:1
  • • ข้อความขนาดใหญ่: 3:1

WCAG AAA

ความเข้าถึงที่ปรับปรุงแล้วเพื่อให้เข้าถึงได้สูงสุด

  • • ข้อความปกติ: 7:1
  • • ข้อความขนาดใหญ่: 4.5:1

ความบ่วงตาสีบอด

พิจารณาประเภทต่างๆของความบกพร่องในการมองเห็นสี

  • • อย่าพึ่งพาสีเพียงอย่างเดียว
  • • ใช้ลวดลายหรือไอคอน

เคล็ดลับความเข้าถึง

ที่ควรทำ

  • ✓ ใช้ความเคาน์เทสต์สีที่เพียงพอ
  • ✓ ทดสอบโดยใช้เครื่องมือเช่นนี้
  • ✓ พิจารณาความบกพร่องในการมองเห็นหลายสี
  • ✓ ใช้ข้อความขนาดใหญ่เพื่อความเคาน์เทสต์ต่ำ
  • ✓ รวมสีกับรูปแบบ

ไม่ควรทำ

  • ✗ พึ่งพาสีเพียงเพื่ออธิบายความหมาย
  • ✗ ใช้สีแดงและเขียวร่วมกันสำหรับข้อมูลที่สำคัญ
  • ✗ ลืมทดสอบการผสมผสาน
  • ✗ ใช้ความเคาน์เทสต์ต่ำสำหรับเนื้อหาที่สำคัญ
  • ✗ มองข้ามมาตรฐานความเข้าถึง