ออกแบบการ์ดให้อ่านง่ายด้วยสี คอนทราสต์ และเงาที่พอดี

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

1. กำหนดหน้าที่สีก่อนตกแต่ง

ใช้พื้นหลังสว่าง ข้อความหลักเข้ม ข้อความรองที่เงียบลง และสีเน้นสำหรับลิงก์หรือคำสั่ง ตัวอย่างเริ่มต้นคือพื้น #ffffff, ข้อความหลัก #0f172a, ข้อความรอง #475569 และสีเน้น #3730a3 ค่านี้เป็นจุดเริ่มต้นของคู่สีที่ใช้ในตัวอย่าง ไม่ได้หมายความว่าจับคู่สีใดในชุดก็ผ่านการเข้าถึงทั้งหมด

ใช้ Color Palette Generator สำรวจสีทางเลือก เมื่อเปลี่ยนสีใดให้ตรวจคอนทราสต์กับพื้นหลังที่ใช้จริง ชุดสีที่ดูกลมกลืนอาจยังมีคู่ข้อความที่อ่านยากได้

2. ทดลองการ์ดด้วย CSS ชุดเล็ก

นำ CSS นี้ไปลองกับการ์ดบทความในหน้าที่คุณแก้ไขได้:

.article-card {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.article-card p { color: #475569; line-height: 1.7; }
.article-card a { color: #3730a3; text-decoration: underline; }
.article-card a:focus-visible {
  outline: 3px solid #3730a3;
  outline-offset: 4px;
}

เส้นขอบช่วยแยกการ์ดแม้ผู้ใช้มองเงาได้ไม่ชัด เส้นใต้ทำให้ลิงก์ไม่ได้สื่อด้วยสีอย่างเดียว และกรอบ focus ช่วยผู้ใช้คีย์บอร์ดรู้ว่าลิงก์ใดกำลังถูกเลือก ใช้ Box Shadow Generator หรือ Border Radius Generator ปรับค่าแล้วอ่าน CSS ที่ได้ก่อนนำไปวาง

3. ตรวจคอนทราสต์ตามขนาดข้อความจริง

เกณฑ์ขั้นต่ำระดับ AA ใน WCAG 2.2 กำหนดคอนทราสต์ข้อความทั่วไป 4.5:1 ส่วนข้อความขนาดใหญ่ใช้ 3:1 ตามนิยามขนาดและน้ำหนักในเกณฑ์ ตัวเลขนี้ใช้กับคอนทราสต์ข้อความ ไม่ได้ยืนยันว่าทั้งหน้าเว็บผ่าน WCAG ควรใช้เครื่องมือตรวจคู่สีข้อความและพื้นหลัง ไม่ตัดสินจากชื่อสีหรือความรู้สึกว่าสีเข้มแล้ว

หากเติมพื้นหลังไล่สี ให้ตรวจตำแหน่งสว่างสุดและมืดสุดด้านหลังข้อความ บางงานใช้แผ่นพื้นสีทึบรองข้อความแล้วตรวจได้ง่ายกว่าการวางบนรูปหรือ gradient โดยตรง Gradient Generator ช่วยสร้าง CSS ไม่ได้รับรองการอ่านง่ายให้อัตโนมัติ

4. ลองการใช้งานและทั้งสองธีม

ย่อหน้าจอให้แคบเท่ามือถือ ตรวจว่าหัวเรื่องและเนื้อหาตัดบรรทัดได้ ไม่ชนลิงก์หรือล้นการ์ด เพิ่มขนาดตัวอักษรของเบราว์เซอร์แล้วลองอีกครั้ง ใช้ Tab ไปที่ลิงก์และตรวจว่ามองเห็นกรอบ focus ได้ การตรวจแบบโต้ตอบพบปัญหาที่ภาพหน้าจอเพียงภาพเดียวบอกไม่ได้

สำหรับธีมมืด ให้กำหนดพื้น ข้อความ เส้นขอบ และ focus ของธีมนั้นเอง การเปลี่ยนพื้นเป็นสีเข้มแต่คงข้อความรองสีเดิมอาจทำให้อ่านยาก ต้องตรวจคู่สีจริงซ้ำ รวมถึงลิงก์ที่เคยเปิด สถานะ hover และปุ่มที่ปิดใช้งานหากมี

ใช้เครื่องมือสร้างสีและเงาเป็นตัวช่วยเลือกค่า CSS แล้วกลับมาตรวจเนื้อหา คอนทราสต์ และคีย์บอร์ดบนหน้าใช้งานจริงเสมอ

แหล่งอ้างอิง

• W3C: คำอธิบายเกณฑ์คอนทราสต์ข้อความขั้นต่ำ