คอนทราสต์สีและตัวอักษรที่อ่านง่าย: คู่มือจัดตัวอักษรให้ทุกคนเข้าถึงได้

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

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

คำตอบสั้น ๆ

WCAG 2.2 ระดับ AA กำหนดคอนทราสต์ขั้นต่ำไว้สามข้อ:

• 4.5:1 สำหรับข้อความปกติ เทียบกับพื้นหลัง (เกณฑ์ความสำเร็จ 1.4.3)
• 3:1 สำหรับข้อความขนาดใหญ่ หมายถึงอย่างน้อย 18pt (24px) หรือ 14pt (ประมาณ 18.7px) ถ้าเป็นตัวหนา
• 3:1 สำหรับส่วนประกอบของอินเทอร์เฟซและกราฟิกที่สื่อความหมาย (เกณฑ์ความสำเร็จ 1.4.11): เส้นขอบช่องกรอก กรอบ checkbox ปุ่มที่มีแต่ไอคอน ตัวบ่งชี้โฟกัส ขอบปุ่มที่คนต้องใช้มองหาปุ่ม และองค์ประกอบของกราฟที่จำเป็นต่อการอ่านกราฟ

โลโก้ ของตกแต่งล้วน ๆ และตัวควบคุมที่ปิดใช้งาน ได้รับการยกเว้น อัตราส่วนเหล่านี้เป็นเกณฑ์ตายตัว ไม่ใช่เป้าที่ปัดเศษขึ้นได้: 4.48:1 ถือว่าไม่ผ่าน

WCAG วัดคอนทราสต์สีอย่างไร

อัตราส่วนคอนทราสต์ของ WCAG เปรียบเทียบความสว่างสัมพัทธ์ (relative luminance) หรือพูดง่าย ๆ คือความสว่างที่ตารับรู้ ของสองสี ตั้งแต่ 1:1 (สีเดียวกันซ้อนกัน) ถึง 21:1 (ดำบนขาว) นับเฉพาะความสว่าง ไม่นับเฉดสี สองสีที่ดูต่างกันมากอาจมีความสว่างใกล้กัน และคู่สีแบบนี้เองที่ผู้มีภาวะบกพร่องในการมองเห็นสีแยกได้ยาก

ระดับ AAA ยกเกณฑ์ข้อความขึ้นเป็น 7:1 หรือ 4.5:1 สำหรับข้อความขนาดใหญ่ (เกณฑ์ 1.4.6) ไม่ได้คาดหวังให้ทำทั้งเว็บไซต์ แต่เป็นเป้าที่สมเหตุสมผลสำหรับเนื้อหาบทความยาว บทความ อธิบาย WCAG 2.2 แสดงว่าคอนทราสต์อยู่ตรงไหน เมื่อเทียบกับเกณฑ์อื่น

3 รายละเอียดที่มักพลาด

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

ขนาดต้องวัดจริง ไม่ใช่ดูจากบทบาท หัวข้อที่ตั้งไว้ 20px น้ำหนักปกติ ถือเป็นข้อความปกติตามนิยามของ WCAG และต้องได้ 4.5:1

ตัวอักษรเส้นบาง ดูจางกว่าสีจริง สูตรไม่นับความหนาของเส้น ฟอนต์บางน้ำหนัก 300 ที่ขนาดเล็ก จึงอาจผ่านเกณฑ์แต่ยังอ่านยาก ใช้น้ำหนัก regular หรือ medium สำหรับเนื้อหา

ตรวจคอนทราสต์ด้วยตัวเอง

เครื่องมือตรวจคอนทราสต์สีทุกตัวใช้สูตรเดียวกันของ WCAG สิ่งที่ต่างคือวิธีใส่สีเข้าไป

• DevTools ของเบราว์เซอร์ ใน Chrome ให้ตรวจ (inspect) ข้อความ แล้วคลิกช่องสีข้าง color ในแผง Styles ตัวเลือกสีจะแสดงอัตราส่วน และเส้นเกณฑ์ AA และ AAA คุณจึงลากไปหาเฉดที่ผ่านซึ่งใกล้ที่สุดได้
• เครื่องมือตรวจแยกต่างหาก Contrast Checker ของ WebAIM รับค่าสีแบบ hex ส่วน Colour Contrast Analyser ของ TPGi ที่ใช้ได้ฟรี มีเครื่องมือดูดสีที่ดึงสีจากอะไรก็ได้บนจอ รวมถึงข้อความบนภาพถ่าย
• การตรวจอัตโนมัติ Lighthouse และ axe ตรวจเจอข้อความคอนทราสต์ต่ำในโค้ด แต่ประเมินข้อความบนรูป เกรเดียนต์ หรือวิดีโอได้ไม่แม่นยำ ดู สิ่งที่เครื่องมือตรวจอัตโนมัติบอกได้และบอกไม่ได้

สำหรับทั้งชุดสี ตารางคอนทราสต์ (contrast grid) แสดงทุกคู่สีได้ในคราวเดียว และเปลี่ยนการถกเถียงเรื่องรสนิยม ให้กลายเป็นรายการคู่สีที่ใช้ได้

ปรับชุดสีแบรนด์ที่ไม่ผ่านเกณฑ์

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

• พื้นสี พาดหัวขนาดใหญ่ และภาพประกอบ: ใช้สีแบรนด์ตามเดิม ในที่ที่ผ่านเกณฑ์ (3:1 สำหรับข้อความขนาดใหญ่ ส่วนของตกแต่งไม่มีขั้นต่ำ)
• ลิงก์และข้อความเล็ก: ใช้ “เฉดสำหรับข้อความ” ที่เข้มกว่าในเฉดสีเดียวกัน หรือเฉดที่อ่อนกว่าบนพื้นหลังสีเข้ม
• เส้นขอบ ไอคอน และตัวบ่งชี้โฟกัส: ใช้เฉดที่ได้ 3:1 เทียบกับสิ่งที่อยู่ติดกัน

ตัวอย่าง: สีส้มสด

สมมติสีส้มของแบรนด์คือ #FF7A00 และคู่สีที่นักออกแบบมักหยิบมาใช้ก่อน:

ทางแก้มักเป็นรูปแบบเดิม: คงเฉดสีไว้ เปลี่ยนความสว่าง และให้สีสดต้นฉบับทำหน้าที่ที่ปลอดภัย ตัวอักษรขาวบนสีแบรนด์สด ๆ เป็นความเคยชิน ไม่ใช่กฎ การสร้างสเกลเฉดสีด้วย OKLCH ซึ่งเบราว์เซอร์สมัยใหม่รองรับใน CSS ช่วยให้เฉดสีคงที่กว่า HSL เมื่อความสว่างเปลี่ยน

สีเทาก็ใช้คณิตศาสตร์เดียวกัน #767676 คือสีเทาล้วนที่อ่อนที่สุดที่ได้ 4.5:1 บนพื้นขาว (4.54:1) ส่วน #777777 ขาดไปนิดเดียวที่ 4.48:1 และ #999999 ที่นิยมกันได้เพียง 2.85:1

บันทึกคู่สีที่ผ่านไว้เป็น design token และใน แนวทางแบรนด์สำหรับเว็บไซต์ เพื่อไม่ให้ใครด้นสีตัวอักษรขึ้นมาเองภายหลัง

ปุ่ม ลิงก์ และสถานะต่าง ๆ

• ข้อความบนปุ่ม ต้องได้ 4.5:1 เทียบกับสีพื้นปุ่ม หรือ 3:1 ถ้าเป็นข้อความขนาดใหญ่
• ปุ่มแบบเส้นขอบ (ghost button) อาศัยเส้นขอบเพื่อให้ดูกดได้ WCAG ไม่ได้บังคับเคร่งครัดให้เส้นขอบได้ 3:1 เมื่อข้อความบนปุ่มชัดเจน แต่ควรตั้งเป้าไว้
• ลิงก์ในย่อหน้า ควรขีดเส้นใต้ ลิงก์ที่แยกด้วยสีอย่างเดียว จะผ่านก็ต่อเมื่อได้ 3:1 เทียบกับข้อความรอบข้าง และ 4.5:1 เทียบกับพื้นหลัง ซึ่งเป็นช่วงสีกลาง ๆ ที่แคบมากเมื่อใช้กับตัวอักษรดำ และเป็นไปไม่ได้เลยกับตัวอักษร #333333 บนพื้นขาว
• ตัวบ่งชี้โฟกัส เชื่อถือได้ที่สุดเมื่อเป็นเส้นกรอบทึบ 2px ที่เว้นระยะจากตัวองค์ประกอบเล็กน้อย ในสีที่ได้ 3:1 ทั้งบนส่วนพื้นสว่างและพื้นเข้มของคุณ บทความ การนำทางที่ทุกคนใช้ได้ อธิบายเรื่องโฟกัสอย่างละเอียด

ข้อความบนภาพ hero และวิดีโอ

ข้อความบนภาพถ่ายต้องผ่านเกณฑ์ เมื่อเทียบกับส่วนของภาพด้านหลังที่มีความสว่างใกล้กับสีตัวอักษรมากที่สุด และการครอปภาพก็เปลี่ยนไปตามความกว้างหน้าจอ ใส่การป้องกันไว้ในคอมโพเนนต์เลย ด้วยแผ่นไล่เฉด (scrim) ชั้นสีทึบ หรือกล่องข้อความ เพื่อไม่ให้รูปใหม่จากผู้แก้ไขเนื้อหา ทำให้คอนทราสต์พังโดยไม่มีใครรู้ เงาตัวอักษรจาง ๆ อย่างเดียวแทบไม่เคยพอ

สำหรับวิดีโอ ให้ตรวจเฟรมที่สว่างที่สุด ไม่ใช่ภาพปก วิดีโอที่เล่นอัตโนมัตินานเกินห้าวินาทีพร้อมกับเนื้อหาอื่น ต้องมีวิธีหยุดชั่วคราว หยุด หรือซ่อนด้วย (เกณฑ์ 2.2.2 ระดับ A)

โหมดมืดและ forced colours

ธีมมืดหมายความว่าต้องตรวจทุกคู่สีใหม่ ซึ่งมักต้องใช้เฉดข้อความที่อ่อนกว่า

ธีมคอนทราสต์ของ Windows จะแทนที่สีของคุณด้วยสีที่ผู้ใช้เลือกเอง (media feature forced-colors ซึ่ง Chrome DevTools จำลองได้) อะไรก็ตามที่วาดด้วยสีพื้นหลังอย่างเดียว เช่น ขอบการ์ดหรือ checkbox ที่สร้างเอง อาจหายไป จึงควรให้คอมโพเนนต์มีเส้นขอบจริง แม้จะโปร่งใสก็ตาม เพื่อให้ระบบวาดขึ้นมาได้

อย่าพึ่งสีอย่างเดียว

เกณฑ์ 1.4.1 (ระดับ A) ระบุว่าสีต้องไม่ใช่วิธีเดียวในการสื่อข้อมูล หรือแยกองค์ประกอบ อัตราส่วนคอนทราสต์ไม่ได้แก้ปัญหานี้ สีสถานะแดงและเขียวอาจผ่านเกณฑ์บนพื้นขาวทั้งคู่ แต่ยังแยกได้ยากสำหรับคนที่ตาบอดสีแดง-เขียว

แผง Rendering ของ Chrome จำลองภาวะบกพร่องในการมองเห็นสีได้ เพื่อให้เห็นปัญหาเหล่านี้ ฟอร์มมีกฎเพิ่มเติม ซึ่งอธิบายไว้ใน วิธีออกแบบฟอร์มที่ทุกคนใช้ได้

ตัวอักษรที่ทุกคนอ่านได้ นอกเหนือจากสี

คอนทราสต์ทำให้มองเห็นตัวอักษร ส่วนเกณฑ์ต่อไปนี้ทำให้ยังอ่านได้ เมื่อคนซูม ขยายตัวอักษร หรือปรับระยะห่างเอง

มีขนาดตัวอักษรขั้นต่ำเพื่อการเข้าถึงไหม?

WCAG ไม่ได้กำหนดขนาดตัวอักษรขั้นต่ำ แต่กำหนดให้ขยายตัวอักษรได้แทน ในทางปฏิบัติ ให้ถือค่าเริ่มต้นทั่วไปของเบราว์เซอร์ที่ 16px เป็นขั้นต่ำของเนื้อหา และใช้ใหญ่กว่านั้นสำหรับการอ่านยาว ๆ ช่องกรอกในฟอร์มก็ควรเป็น 16px ขึ้นไป เพราะ Safari บน iPhone จะซูมเข้าไปที่ช่องที่ตัวอักษรเล็กกว่านั้น กำหนดขนาดเป็น rem และอย่าล็อกขนาดฟอนต์ของ root เป็นพิกเซล เพื่อให้เว็บไซต์เคารพการตั้งค่าขนาดฟอนต์ในเบราว์เซอร์ของผู้เข้าชมแต่ละคน

ขยายได้ถึง 200% และจัดเรียงใหม่ได้

ข้อความต้องขยายได้ถึง 200% โดยเนื้อหาหรือการใช้งานไม่หายไป (เกณฑ์ 1.4.4) ส่วน Reflow (เกณฑ์ 1.4.10) กำหนดให้เนื้อหาสำหรับอ่านพอดีกับความกว้าง 320 CSS pixel โดยไม่ต้องเลื่อนแนวนอน ซึ่งเท่ากับที่หน้าต่างกว้าง 1280px แสดงเมื่อซูม 400% ส่วนที่ต้องใช้เลย์เอาต์สองมิติ เช่น ตารางข้อมูล แผนที่ และแผนภาพ ได้รับการยกเว้น

ตรวจสอบด้วยตัวเอง ซูมหน้าต่างเดสก์ท็อปกว้าง 1280px ไปที่ 200% แล้ว 400% และมองหาจุดพังเหล่านี้:

• ข้อความถูกตัดในการ์ด แบนเนอร์ หรือปุ่มที่ล็อกความสูงไว้
• เมนูหรือหน้าต่างซ้อนที่ปิดไม่ได้อีกต่อไป
• เฮดเดอร์ที่ติดอยู่ด้านบน จนบังครึ่งจอ

บนมือถือ ต้องตรวจด้วยว่าโค้ดของหน้าไม่ได้บล็อกการซูมด้วยสองนิ้ว ด้วย maximum-scale=1 หรือ user-scalable=no

การปรับระยะห่างของตัวอักษร

เกณฑ์ 1.4.12 กำหนดว่าต้องไม่มีอะไรพัง เมื่อผู้อ่านตั้งระยะบรรทัดเป็น 1.5 เท่าของขนาดฟอนต์ ระยะห่างย่อหน้า 2 เท่า ระยะห่างตัวอักษร 0.12 เท่า และระยะห่างคำ 0.16 เท่า คุณไม่ได้ออกแบบด้วยค่าเหล่านี้ แค่หน้าเว็บต้องรับมือได้ ทดสอบด้วยบุ๊กมาร์กเล็ตปรับระยะห่างตัวอักษรที่ใช้ได้ฟรี และคอยดูข้อความที่ถูกตัดหรือซ้อนทับกัน

ไม่ใช้รูปภาพแทนข้อความ

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

ฟอนต์และระยะบรรทัดสำหรับทุกระบบอักษร

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

การเลือกแบบอักษรและสเกลขนาดตัวอักษร อธิบายไว้ใน ตัวอักษรบนเว็บสำหรับเว็บไซต์ธุรกิจ และการวางแผนภาษาอยู่ใน วิธีวางแผนเว็บไซต์หลายภาษา

เช็กลิสต์คอนทราสต์และความอ่านง่าย

• ข้อความ ลิงก์ และข้อความบนปุ่ม ได้ 4.5:1 ในทุกสถานะและบนทุกพื้นหลัง
• เส้นขอบช่องกรอก ไอคอน องค์ประกอบของกราฟ และตัวบ่งชี้โฟกัส ได้ 3:1
• ข้อความบนรูปภาพวางบนชั้นสีที่สร้างไว้ในคอมโพเนนต์ และตรวจแล้วที่ความกว้างมือถือ
• ลิงก์ขีดเส้นใต้ ข้อผิดพลาดและสถานะบอกด้วยข้อความ ไม่ใช่แค่สี
• ข้อความซูมได้ถึง 200% และจัดเรียงใหม่ได้ที่ 320px
• ไม่มีอะไรถูกตัด เมื่อปรับระยะห่างตัวอักษร
• ตรวจฟอนต์และระยะบรรทัดแล้ว ในทุกภาษาที่เว็บไซต์ใช้

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

โลโก้ต้องผ่านเกณฑ์คอนทราสต์ไหม?

ไม่ต้อง WCAG ยกเว้นโลโก้และชื่อแบรนด์จากเกณฑ์คอนทราสต์ขั้นต่ำ แต่สโลแกนที่เป็นข้อความธรรมดาข้างโลโก้ ไม่ได้รับการยกเว้น

ข้อความ placeholder และปุ่มที่ปิดใช้งาน ต้องผ่านเกณฑ์ไหม?

ตัวควบคุมที่ปิดใช้งานได้รับการยกเว้น แต่ข้อความ placeholder ไม่ได้รับ แนวทางของ W3C สำหรับเกณฑ์ 1.4.3 ระบุว่าขั้นต่ำ 4.5:1 ใช้กับข้อความนี้ด้วย และอย่าใช้แทนป้ายกำกับที่มองเห็นได้ เพราะมันหายไปทันทีที่มีคนพิมพ์

ควรใช้ APCA แทนอัตราส่วนคอนทราสต์ของ WCAG ไหม?

APCA (อัลกอริทึมวัดคอนทราสต์ตามการรับรู้) เป็นวิธีที่ใหม่กว่า ซึ่งคำนึงถึงขนาดฟอนต์ น้ำหนัก และความต่างระหว่างตัวอักษรสว่างบนพื้นเข้ม กับตัวอักษรเข้มบนพื้นสว่าง มีการศึกษาวิธีนี้ระหว่างการพัฒนา WCAG 3 แต่ ณ เวลาที่เขียน (สิงหาคม 2026) ยังไม่เป็นส่วนหนึ่งของ W3C Recommendation ใด ๆ ออกแบบและทดสอบตามอัตราส่วนของ WCAG 2.x และใช้ APCA เป็นความเห็นที่สอง

ขั้นตอนต่อไป

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

ถ้าเว็บไซต์ปัจจุบันของคุณไม่ผ่าน ทางแก้มักเป็นแค่การแก้ token สีไม่กี่ตัว และคอมโพเนนต์บางส่วน แต่ถ้าสีถูกเขียนตายตัวไว้ในเทมเพลตหลายร้อยไฟล์ หรือข้อความสำคัญอยู่ในรูปภาพ ปัญหาอยู่ที่โครงสร้างของเว็บไซต์เอง นั่นคือตอนที่ การรีดีไซน์เว็บไซต์ คุ้มค่า: แก้คอนทราสต์ที่ต้นทาง โดยทดสอบชุดสีก่อนอนุมัติงานออกแบบ สร้างเฉดสีที่ผ่านเกณฑ์และสถานะต่าง ๆ เป็นสไตล์ที่ใช้ซ้ำได้ และตรวจข้อความในทุกภาษาที่เว็บไซต์ใช้ ไม่แน่ใจว่าต้องการแบบไหน? คุยกับเราเรื่องสิ่งที่เว็บไซต์ของคุณต้องการ