อัตราส่วนคอนทราสต์ของสีที่เข้าถึงได้: คำอธิบายแนวทาง WCAG สำหรับนักออกแบบ

อัตราส่วนคอนทราสต์ของสีที่เข้าถึงได้: คำอธิบายแนวทาง WCAG

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

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

อัตราส่วนคอนทราสต์ของสีคืออะไร?

คอนทราสต์ของสีคือการวัดความแตกต่างของความสว่างที่รับรู้ได้ระหว่างสองสี — โดยทั่วไปคือสีพื้นหน้า (ข้อความ) และพื้นหลัง คอนทราสต์แสดงเป็นอัตราส่วนตั้งแต่ 1:1 (สีที่เหมือนกัน, ข้อความที่มองไม่เห็น) ถึง 21:1 (ข้อความสีดำบนพื้นหลังสีขาว, ค่าสูงสุดที่เป็นไปได้)

อัตราส่วนคอนทราสต์คำนวณโดยใช้ความส่องสว่างสัมพัทธ์ (relative luminance) ซึ่งคำนึงถึงวิธีที่ดวงตาของมนุษย์รับรู้ความยาวคลื่นแสงที่แตกต่างกัน สูตรคือ:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

โดยที่ L1 คือความส่องสว่างสัมพัทธ์ของสีที่สว่างกว่า และ L2 คือความส่องสว่างสัมพัทธ์ของสีที่เข้มกว่า ดวงตาของมนุษย์ไวต่อแสงสีเขียวมากกว่าสีแดงหรือสีน้ำเงิน ดังนั้นการคำนวณความส่องสว่างจึงให้น้ำหนักช่องสัญญาณแตกต่างกัน

คุณไม่จำเป็นต้องคำนวณด้วยตนเอง เครื่องมือตรวจสอบคอนทราสต์ทุกตัว รวมถึงตัวแปลงสีของเรา ทำได้ทันที

ข้อกำหนดคอนทราสต์ของ WCAG

แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) กำหนดระดับความสอดคล้องสามระดับ: A, AA และ AAA ข้อกำหนดคอนทราสต์ของสีมีผลบังคับใช้ที่ระดับ AA และ AAA

ระดับ WCAG AA (ขั้นต่ำที่แนะนำ)

AA เป็นมาตรฐานขั้นต่ำสำหรับเว็บไซต์ส่วนใหญ่และเป็นข้อบังคับทางกฎหมายในหลายเขตอำนาจศาล (รวมถึง European Accessibility Act และกฎระเบียบการช่วยการเข้าถึงในสหรัฐอเมริกา แคนาดา และออสเตรเลีย)

| หมวดหมู่ข้อความ | อัตราส่วนขั้นต่ำ | ตัวอย่างสีเทาที่ผ่านเกณฑ์บนพื้นขาว | |---------------|--------------|-------------------------------------| | ข้อความปกติ (ต่ำกว่า 18px / 14px ตัวหนา) | 4.5:1 | #767676 บนพื้นขาว | | ข้อความขนาดใหญ่ (18px+ ตัวหนา หรือ 24px+ ปกติ) | 3:1 | #9A9A9A บนพื้นขาว | | ส่วนประกอบ UI (ขอบ, ไอคอน, ช่องฟอร์ม) | 3:1 | ขอบส่วนประกอบ, ตัวบ่งชี้โฟกัส | | กราฟิกที่ไม่ใช่ของตกแต่ง | 3:1 | แผนภูมิ, อินโฟกราฟิก, ไอคอน |

ระดับ WCAG AAA (ขั้นสูง)

AAA เป็นมาตรฐานที่สูงกว่าซึ่งให้ความสามารถในการอ่านที่ดีขึ้น โดยเฉพาะสำหรับผู้ใช้ที่มีสายตาเลือนรางหรือปัญหาความไวต่อคอนทราสต์

| หมวดหมู่ข้อความ | อัตราส่วนขั้นต่ำ | ตัวอย่างสีเทาที่ผ่านเกณฑ์บนพื้นขาว | |---------------|--------------|-------------------------------------| | ข้อความปกติ | 7:1 | #595959 บนพื้นขาว | | ข้อความขนาดใหญ่ | 4.5:1 | #777777 บนพื้นขาว |

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

ข้อกำหนดเหล่านี้ครอบคลุมอะไรบ้าง

ข้อกำหนดคอนทราสต์ของ WCAG มีผลบังคับใช้กับ:

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

ข้อกำหนดเหล่านี้ไม่ครอบคลุมอะไรบ้าง

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

ความล้มเหลวด้านคอนทราสต์ที่พบบ่อยและวิธีการแก้ไข

1. ข้อความสีเทาอ่อน

ข้อความสีเทาอ่อนบนพื้นหลังสีขาวเป็นความล้มเหลวด้านคอนทราสต์ที่พบบ่อยที่สุด เฉดสีเช่น #CCCCCC บนพื้นขาวมีอัตราส่วนคอนทราสต์เพียง 1.6:1 — ต่ำกว่าค่าขั้นต่ำ 4.5:1 อย่างมาก

แก้ไข: ทำให้ข้อความสีเทาของคุณเข้มขึ้น สำหรับข้อความเนื้อหาบนพื้นขาว ตั้งเป้าอย่างน้อย #595959 (ผ่านเกณฑ์ AAA) แม้แต่ #767676 (ขั้นต่ำ AA สำหรับข้อความ 14px) ก็เข้มกว่าตัวเลือกสีเทา "บางเบา" ส่วนใหญ่อย่างเห็นได้ชัด

2. สีแบรนด์ที่ใช้สำหรับข้อความเนื้อหา

สีแบรนด์มักจะอ่อนเกินไปเมื่อใช้เป็นข้อความ สีฟ้าปานกลางเช่น #3366CC บนพื้นขาวมีอัตราส่วนประมาณ 3.5:1 — ต่ำกว่ามาตรฐาน 4.5:1

แก้ไข: ใช้สีแบรนด์สำหรับหัวข้อและจุดเด่น ใช้สีเกือบดำ (#1A1A1A ถึง #333333) สำหรับข้อความเนื้อหา ตรวจสอบว่าข้อความที่มีสีทุกชิ้นผ่านอัตราส่วน

3. ตัวบ่งชี้ลิงก์ที่ใช้สีเพียงอย่างเดียว

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

แก้ไข: ให้ตัวบ่งชี้ที่ไม่ใช่สีสำหรับลิงก์เสมอ วิธีการทั่วไป:

• ขีดเส้นใต้ลิงก์ (วิธีที่แข็งแกร่งที่สุด)
• เพิ่มไอคอน (สัญลักษณ์ลูกศรหรือลิงก์ภายนอก)
• ใช้น้ำหนักตัวหนาสำหรับลิงก์ในบรรทัด
• ให้พื้นหลังเน้นสี

4. ข้อความบนภาพพื้นหลัง

ข้อความที่วางบนภาพถ่ายหรือการไล่ระดับสีไม่ค่อยมีคอนทราสต์เพียงพอทั่วทั้งภาพ

แก้ไข:

• เพิ่มชั้นซ้อนทับกึ่งโปร่งใสระหว่างภาพและข้อความ
• ใช้ text-shadow เพื่อสร้างเอฟเฟกต์เส้นขอบบางๆ
• วางข้อความในกล่องสีทึบซ้อนทับ
• ตรวจสอบให้แน่ใจว่าทุกส่วนของภาพที่อาจปรากฏหลังข้อความผ่านอัตราส่วนขั้นต่ำ

5. ข้อความตัวยึดตำแหน่งที่มีคอนทราสต์ต่ำ

ตัวยึดตำแหน่งของฟอร์มเช่น #BDBDBD บนพื้นขาว (1.9:1) เป็นเรื่องปกติแต่ไม่ผ่านข้อกำหนดคอนทราสต์

แก้ไข: ทำให้ตัวยึดตำแหน่งเข้มขึ้นอย่างน้อย #757575 (4.6:1) ใช้ป้ายกำกับแทนตัวยึดตำแหน่งจะดีกว่า — ป้ายกำกับมองเห็นได้เสมอและไม่หายไปเมื่อผู้ใช้เริ่มพิมพ์

การทดสอบคอนทราสต์ของสี

เครื่องมืออัตโนมัติ

• Browser DevTools — Chrome และ Firefox DevTools มีการตรวจสอบคอนทราสต์ในตัว ตรวจสอบองค์ประกอบและดูอัตราส่วนคอนทราสต์ในแผง "Styles" หรือ "Accessibility"
• ตัวตรวจสอบคอนทราสต์ออนไลน์ — ป้อนสองสีและรับสถานะผ่าน/ไม่ผ่านทันทีสำหรับ AA และ AAA
• ปลั๊กอินเครื่องมือออกแบบ — Stark, A11y และ Contrast มีให้ใช้งานสำหรับ Figma, Sketch และ Adobe XD ตรวจสอบคอนทราสต์ได้โดยตรงในไฟล์ออกแบบของคุณ
• Lighthouse — การตรวจสอบ Lighthouse ของ Google รายงานความล้มเหลวด้านคอนทราสต์โดยอัตโนมัติ

การทดสอบด้วยตนเอง

เครื่องมืออัตโนมัติตรวจสอบได้เฉพาะคอนทราสต์ของข้อความ สำหรับการตรวจสอบการช่วยการเข้าถึงที่สมบูรณ์:

1. ปิดจอภาพของคุณ — คุณสามารถแยกแยะองค์ประกอบอินเทอร์เฟซทั้งหมดได้หรือไม่?
2. ใช้ฟิลเตอร์ระดับสีเทา — ข้อมูลยังสื่อความหมายได้ถูกต้องโดยไม่มีสีหรือไม่?
3. ทดสอบด้วยตัวจำลองตาบอดสี — เครื่องมือเช่น Colorblindly (ส่วนขยาย Chrome) แสดงให้เห็นว่าเว็บไซต์ของคุณปรากฏต่อผู้ใช้ที่มีภาวะบกพร่องในการมองเห็นสีประเภทต่างๆ อย่างไร
4. ทดสอบในแสงแดดโดยตรง — แสงแวดล้อมที่จ้าลดคอนทราสต์ที่รับรู้ได้

การออกแบบสำหรับผู้ตาบอดสี

ประมาณ 1 ใน 12 ของผู้ชาย (8%) และ 1 ใน 200 ของผู้หญิง (0.5%) มีภาวะบกพร่องในการมองเห็นสีบางรูปแบบ ประเภทที่พบบ่อยที่สุดคือ:

• Deuteranopia (ตาบอดสีเขียว, 6% ของผู้ชาย) — แยกแยะสีแดงจากสีเขียวได้ยาก
• Protanopia (ตาบอดสีแดง, 2% ของผู้ชาย) — สีแดงดูเข้มขึ้น, สับสนกับสีเขียว
• Tritanopia (ตาบอดสีน้ำเงิน, พบน้อย) — แยกแยะสีน้ำเงินจากสีเหลืองได้ยาก

กลยุทธ์การออกแบบ

1. อย่าพึ่งพาสีเพียงอย่างเดียว — ข้อมูลใดๆ ที่สื่อผ่านสี (สถานะข้อผิดพลาด, ตัวบ่งชี้สถานะ, หมวดหมู่แผนภูมิ) ต้องสื่อผ่านข้อความ, ไอคอน, ลวดลาย หรือตำแหน่งด้วย

2. หลีกเลี่ยงคู่สีที่มีปัญหา — แดง/เขียว, น้ำเงิน/ม่วง, เขียว/น้ำตาล และเขียว/น้ำเงิน เป็นคู่ที่สับสนบ่อยที่สุด

3. ใช้ลวดลายและพื้นผิว — ในแผนภูมิและกราฟ ใช้เส้นประ, การเติมแบบไขว้ และรูปร่างที่แตกต่างนอกเหนือจากสี

4. เพิ่มป้ายกำกับโดยตรง — ในการแสดงข้อมูลเป็นภาพ ติดป้ายกำกับจุดข้อมูลโดยตรงแทนที่จะพึ่งพาคำอธิบายที่ใช้รหัสสี

5. ทดสอบด้วยตัวจำลอง — ทุกการออกแบบควรทดสอบผ่านตัวจำลอง deuteranopia และ protanopia ก่อนเผยแพร่

การสร้างระบบสีที่เข้าถึงได้

ขั้นตอนที่ 1: เลือกสีพื้นฐานที่เข้าถึงได้

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

ขั้นตอนที่ 2: สร้างสเกลที่ผ่านเกณฑ์

สร้างสเกลความสว่างที่แต่ละขั้นตอนรักษาคอนทราสต์ที่เพียงพอกับขั้นตอนที่สว่างกว่าและเข้มกว่าที่อยู่ติดกัน OKLCH เหมาะสำหรับสิ่งนี้เพราะช่องสัญญาณความสว่างมีความสม่ำเสมอในการรับรู้:

--text-primary: oklch(10% 0.01 0);    /* เกือบดำ, ~19:1 บนพื้นขาว */
--text-secondary: oklch(35% 0.02 0);  /* เทาเข้ม, ~9:1 บนพื้นขาว */
--text-muted: oklch(45% 0.02 0);      /* เทากลาง, ~5.5:1 บนพื้นขาว */
--text-disabled: oklch(60% 0.02 0);   /* เทาอ่อน, ~3:1 บนพื้นขาว */

ขั้นตอนที่ 3: ตรวจสอบทุกชุดค่าผสม

ทุกคู่สีพื้นหน้า-พื้นหลังในระบบการออกแบบของคุณต้องได้รับการตรวจสอบ:

• ข้อความหลักบนพื้นผิว — ขั้นต่ำ 4.5:1 (แนะนำ 7:1)
• ข้อความรองบนพื้นผิว — ขั้นต่ำ 4.5:1
• ข้อความรองลงมาบนพื้นผิว — ขั้นต่ำ 3:1 (สำหรับข้อความที่ไม่จำเป็นเท่านั้น)
• องค์ประกอบแบบโต้ตอบ — ขั้นต่ำ 3:1 สำหรับสถานะต่างๆ
• ตัวบ่งชี้โฟกัส — ขั้นต่ำ 3:1

รายการตรวจสอบเชิงปฏิบัติสำหรับนักพัฒนา

• [ ] ข้อความเนื้อหาทั้งหมดผ่านหรือเกินอัตราส่วนคอนทราสต์ 4.5:1
• [ ] ข้อความขนาดใหญ่ทั้งหมดผ่านหรือเกินอัตราส่วนคอนทราสต์ 3:1
• [ ] ลิงก์มีตัวบ่งชี้ที่ไม่ใช่สี (ขีดเส้นใต้, ไอคอน หรือการเปลี่ยนน้ำหนัก)
• [ ] ช่องป้อนข้อมูลของฟอร์มมีขอบหรือพื้นหลังที่มองเห็นได้ (ไม่ใช่แค่ข้อความตัวยึดตำแหน่ง)
• [ ] ตัวบ่งชี้โฟกัสมีคอนทราสต์ 3:1 เทียบกับพื้นหลังที่อยู่ติดกัน
• [ ] สถานะข้อผิดพลาดรวมสีกับข้อความหรือไอคอน
• [ ] แผนภูมิและกราฟใช้ลวดลายหรือป้ายกำกับโดยตรงนอกเหนือจากสี
• [ ] ข้อความตัวยึดตำแหน่งผ่านขั้นต่ำ 4.5:1
• [ ] องค์ประกอบที่ปิดใช้งานแยกแยะได้ทางสายตาแต่ยังรับรู้ได้
• [ ] การออกแบบได้ทดสอบด้วยตัวจำลองตาบอดสี

บทสรุป

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

ใช้ตัวแปลงสีออนไลน์ฟรีของเราพร้อมการตรวจสอบคอนทราสต์ในตัวเพื่อตรวจสอบชุดสีของคุณเทียบกับมาตรฐาน WCAG AA และ AAA