ตัวตรวจสอบความคมชัดของสี

ตัวตรวจสอบความคมชัดของสี ช่วยให้นักออกแบบ นักพัฒนา และผู้เชี่ยวชาญด้านการเข้าถึงข้อมูลสามารถมั่นใจได้ว่าการผสมสีเป็นไปตาม มาตรฐานการเข้าถึง WCAG 2.x ความคมชัดที่เหมาะสมระหว่างสีข้อความและสีพื้นหลังเป็นสิ่งสำคัญสำหรับการอ่าน โดยเฉพาะสำหรับผู้ใช้ที่มีสายตาเลือนรางหรือมีความบกพร่องในการมองเห็นสี

อัตราส่วนความคมชัดของสีคืออะไร?

อัตราส่วนความคมชัดของสีจะวัดความแตกต่างของ ความสว่าง (luminance) ที่รับรู้ได้ระหว่างสองสี มีตั้งแต่ 1:1 (สีเดียวกัน ไม่มีความคมชัด) ไปจนถึง 21:1 (ความคมชัดสูงสุด: สีดำบนพื้นขาว) อัตราส่วนนี้คำนวณโดยใช้สูตร WCAG 2.x ตามค่าความสว่างสัมพัทธ์ของทั้งสองสี

ข้อกำหนดความคมชัดของ WCAG

แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) กำหนดระดับการปฏิบัติตามข้อกำหนดสองระดับสำหรับความคมชัดของสี:

อะไรที่นับว่าเป็น "ข้อความขนาดใหญ่"?

WCAG นิยามข้อความขนาดใหญ่ว่าต้องมีขนาดอย่างน้อย 18 point (24px) น้ำหนักปกติ หรืออย่างน้อย 14 point (18.66px) น้ำหนักตัวหนา ข้อความขนาดใหญ่มีข้อกำหนดความคมชัดต่ำกว่าเนื่องจากตัวอักษรขนาดใหญ่สามารถอ่านได้ง่ายกว่าโดยธรรมชาติ

วิธีใช้งานเครื่องมือนี้

1. ใส่สีของคุณ: เลือกสีพื้นหน้า (ข้อความ) และสีพื้นหลังโดยใช้ตัวเลือกสี พิมพ์รหัส Hex หรือคลิกตัวอย่างที่ตั้งไว้ล่วงหน้า
2. ตรวจสอบการแสดงตัวอย่างสด: ดูว่าสีของคุณเป็นอย่างไรบนองค์ประกอบ UI จริง (หัวเรื่อง, ข้อความหลัก, ปุ่ม, ลิงก์, ช่องกรอกฟอร์ม) ได้ทันที
3. คลิก "ตรวจสอบความคมชัด": รับอัตราส่วนความคมชัดที่แน่นอนและสถานะการปฏิบัติตามมาตรฐาน WCAG สำหรับข้อความปกติ ข้อความขนาดใหญ่ และส่วนประกอบ UI
4. นำคำแนะนำไปใช้: หากสีของคุณไม่ผ่านเกณฑ์ ให้ใช้คำแนะนำอัตโนมัติเพื่อค้นหาทางเลือกที่ใกล้เคียงที่สุดที่สามารถเข้าถึงได้

ทำความเข้าใจผลลัพธ์

อัตราส่วนความคมชัด

ตัวเลขหลัก (เช่น 8.59:1) บอกคุณว่าสีทั้งสองมีความแตกต่างกันอย่างไร ยิ่งสูงยิ่งดีสำหรับการอ่าน อัตราส่วนอย่างน้อย 4.5:1 ช่วยให้มั่นใจได้ว่าผู้ใช้ส่วนใหญ่สามารถอ่านข้อความขนาดปกติได้อย่างสบาย

ระดับโดยรวม

• AAA (ยอดเยี่ยม): ผ่านเกณฑ์ WCAG ทั้งหมดรวมถึงระดับที่เพิ่มประสิทธิภาพ (7:1+) การเข้าถึงที่ดีที่สุดเท่าที่จะเป็นไปได้
• AA (ดี): ผ่านข้อกำหนดมาตรฐาน (4.5:1+) ตรงตามข้อกำหนดทางกฎหมายในเขตอำนาจศาลส่วนใหญ่
• AA Large (บางส่วน): ผ่านเฉพาะข้อความขนาดใหญ่หรือส่วนประกอบ UI เท่านั้น (3:1+) ข้อความปกติไม่ผ่านเกณฑ์
• Fail (ไม่ดี): ไม่ผ่านเกณฑ์ความคมชัดของ WCAG เลย ข้อความจะอ่านยากสำหรับผู้ใช้จำนวนมาก

คำแนะนำสี

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

ทำไมความคมชัดของสีจึงสำคัญ

• การปฏิบัติตามกฎหมาย: หลายประเทศกำหนดให้ต้องปฏิบัติตามมาตรฐาน WCAG AA ตามกฎหมาย (ADA, Section 508, EN 301 549, EAA)
• ประสบการณ์ผู้ใช้: ความคมชัดที่ดีช่วยปรับปรุงการอ่านสำหรับผู้ใช้ทุกคน ไม่ใช่แค่ผู้ที่มีความทุพพลภาพเท่านั้น
• ผลกระทบต่อ SEO: หน้าเว็บที่เข้าถึงได้มักใช้งานง่ายกว่า ซึ่งช่วยส่งเสริมการมีส่วนร่วมของผู้ใช้
• การเข้าถึงผู้ชม: ผู้ชายประมาณ 1 ใน 12 คน และผู้หญิง 1 ใน 200 คน มีความบกพร่องในการมองเห็นสี

เคล็ดลับในการเลือกสีที่เข้าถึงได้

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

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

อัตราส่วนความคมชัดของสีคืออะไร?

อัตราส่วนความคมชัดของสีจะวัดความแตกต่างของความสว่างที่รับรู้ได้ระหว่างสองสี มีตั้งแต่ 1:1 (ไม่มีความคมชัด เป็นสีเดียวกัน) ไปจนถึง 21:1 (ความคมชัดสูงสุด สีดำบนพื้นขาว) อัตราส่วนนี้คำนวณโดยใช้สูตร WCAG 2.x: (L1 + 0.05) / (L2 + 0.05) โดยที่ L1 คือความสว่างสัมพัทธ์ของสีที่สว่างกว่า และ L2 คือของสีที่เข้มกว่า

อัตราส่วนความคมชัดใดที่จำเป็นสำหรับการปฏิบัติตามมาตรฐาน WCAG AA?

WCAG AA กำหนดอัตราส่วนความคมชัดขั้นต่ำที่ 4.5:1 สำหรับข้อความปกติ (ต่ำกว่า 18pt หรือ 14pt ตัวหนา) และ 3:1 สำหรับข้อความขนาดใหญ่ (18pt+ หรือ 14pt+ ตัวหนา) สำหรับส่วนประกอบ UI ที่ไม่ใช่ข้อความและวัตถุกราฟิก ค่าขั้นต่ำคือ 3:1

ความแตกต่างระหว่าง WCAG AA และ AAA คืออะไร?

WCAG AA คือระดับการปฏิบัติตามมาตรฐานทั่วไปที่ต้องการ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ WCAG AAA คือระดับที่ปรับปรุงให้ดีขึ้นซึ่งต้องการ 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ AA เป็นสิ่งที่กฎหมายการเข้าถึงส่วนใหญ่กำหนด ในขณะที่ AAA เป็นสิ่งที่แนะนำแต่ไม่จำเป็นสำหรับเว็บไซต์ทั้งหมด

สิ่งที่ถือว่าเป็นข้อความขนาดใหญ่ในแนวทางของ WCAG คืออะไร?

ในแนวทางของ WCAG ข้อความขนาดใหญ่ถูกกำหนดให้เป็นข้อความที่มีขนาดอย่างน้อย 18 point (24px) น้ำหนักปกติ หรืออย่างน้อย 14 point (ประมาณ 18.66px) น้ำหนักตัวหนา ข้อความขนาดใหญ่มีข้อกำหนดความคมชัดต่ำกว่าเนื่องจากตัวอักษรขนาดใหญ่จะอ่านได้ง่ายกว่า

ฉันจะแก้ไขความคมชัดของสีที่ต่ำเกินไปได้อย่างไร?

วิธีแก้ไขความคมชัดต่ำ: (1) ทำให้สีข้อความเข้มขึ้นหรือทำให้พื้นหลังสว่างขึ้น หรือในทางกลับกัน (2) ใช้ฟีเจอร์คำแนะนำสีของเราซึ่งจะค้นหาสีที่ใกล้เคียงที่สุดที่ผ่านเกณฑ์โดยอัตโนมัติ (3) เพิ่มขนาดฟอนต์เพื่อให้เป็น "ข้อความขนาดใหญ่" ซึ่งมีข้อกำหนดต่ำกว่า (4) หลีกเลี่ยงการใช้สีเพียงอย่างเดียวในการสื่อข้อมูล

ความคมชัดของสีใช้กับข้อความเท่านั้นหรือไม่?

ไม่ใช่ WCAG 2.1 เกณฑ์ความสำเร็จ 1.4.11 กำหนดให้อัตราส่วนความคมชัดขั้นต่ำอยู่ที่ 3:1 สำหรับองค์ประกอบที่ไม่ใช่ข้อความ รวมถึงขอบช่องกรอกข้อมูล ไอคอน และวัตถุกราฟิกที่จำเป็นต่อการเข้าใจเนื้อหา สิ่งนี้ใช้กับส่วนประกอบ UI เช่น ปุ่ม ฟิลด์ฟอร์ม และตัวบ่งชี้การโฟกัส

แหล่งข้อมูลเพิ่มเติม

• WCAG 2.1: การทำความเข้าใจความคมชัด (ขั้นต่ำ)
• WCAG 2.1: การทำความเข้าใจความคมชัด (ระดับสูง)