ตรวจสอบคอนทราสต์ – อัตราส่วนคอนทราสต์ WCAG

ตรวจสอบคอนทราสต์สีเพื่อการเข้าถึง

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

เครื่องมือนี้คำนวณอัตราส่วนคอนทราสต์ระหว่างสีสองสีและประเมินตามเกณฑ์ความสำเร็จของ WCAG 2.1 ใส่สีในรูปแบบ HEX, RGB หรือ HSL เพื่อดูผลลัพธ์ทันที

ทำความเข้าใจระดับคอนทราสต์ WCAG

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

• WCAG AA ข้อความปกติ — ต้องมีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1
• WCAG AA ข้อความขนาดใหญ่ — ต้องมีอัตราส่วนคอนทราสต์อย่างน้อย 3:1 (ข้อความขนาดใหญ่: 18pt ขึ้นไป หรือ 14pt ตัวหนาขึ้นไป)
• WCAG AAA ข้อความปกติ — ต้องมีอัตราส่วนคอนทราสต์อย่างน้อย 7:1
• WCAG AAA ข้อความขนาดใหญ่ — ต้องมีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1

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

วิธีใช้เครื่องมือตรวจสอบคอนทราสต์

1. ใส่สีข้อความ (foreground) — ในรูปแบบ HEX, RGB หรือ HSL
2. ใส่สีพื้นหลังในรูปแบบใดก็ได้ที่รองรับ
3. ดูอัตราส่วนคอนทราสต์และตัวอย่างข้อความบนพื้นหลังนั้นแบบเรียลไทม์
4. ตรวจสอบผลลัพธ์ผ่าน/ไม่ผ่านสำหรับระดับ WCAG AA และ AAA
5. ใช้ปุ่มสลับเพื่อสลับสีข้อความกับสีพื้นหลังอย่างรวดเร็ว

เมื่อใดควรตรวจสอบคอนทราสต์สี

• เมื่อเลือกสีข้อความและสีพื้นหลังสำหรับเว็บไซต์หรือแอป
• เมื่อตรวจสอบว่าระบบออกแบบเป็นไปตามข้อกำหนดการเข้าถึง
• เมื่อทดสอบสีของปุ่ม ลิงก์ หรือไอคอนบนพื้นหลังต่าง ๆ
• เมื่อตรวจสอบการจับคู่สีในโหมดมืด (dark mode)
• เมื่อต้องปฏิบัติตามมาตรฐานการเข้าถึงทางกฎหมาย (ADA, EAA, Section 508)

แม่นยำ ทันที และฟรี

เครื่องมือนี้คำนวณอัตราส่วนคอนทราสต์ WCAG 2.1 โดยใช้สูตรความสว่างสัมพัทธ์มาตรฐาน การคำนวณทั้งหมดทำในเบราว์เซอร์ของคุณ — ไม่มีข้อมูลใดถูกส่งไปยังเซิร์ฟเวอร์

ต้องการค้นหาหรือแปลงสีก่อน? ใช้ ตัวเลือกสี เพื่อดึงสีจากรูปภาพ หรือ ตัวแปลงสี เพื่อสลับระหว่าง HEX, RGB และ HSL

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

อัตราส่วนคอนทราสต์ที่ดีสำหรับข้อความคือเท่าไร?

สำหรับข้อความขนาดปกติ WCAG AA กำหนดให้มีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความขนาดใหญ่ (18pt หรือ 14pt ตัวหนาขึ้นไป) ขั้นต่ำคือ 3:1 สำหรับระดับการเข้าถึงสูงสุด (WCAG AAA) ข้อความปกติต้องมีอย่างน้อย 7:1

WCAG AA กับ AAA ต่างกันอย่างไร?

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

ข้อความขนาดใหญ่ตาม WCAG หมายถึงอะไร?

ข้อความขนาดใหญ่หมายถึงข้อความขนาด 18 พอยต์ (24px) ขึ้นไปที่น้ำหนักปกติ หรือ 14 พอยต์ (ประมาณ 18.66px) ขึ้นไปเมื่อเป็นตัวหนา ข้อความขนาดใหญ่มีข้อกำหนดคอนทราสต์ที่ต่ำกว่าเพราะขนาดทำให้อ่านง่ายขึ้นโดยธรรมชาติ

เครื่องมือนี้รองรับรูปแบบสีใดบ้าง?

คุณสามารถใส่สีในรูปแบบ HEX (เช่น #1E293B), RGB (เช่น rgb(30, 41, 59)) หรือ HSL (เช่น hsl(222, 33%, 17%)) เครื่องมือจะตรวจจับรูปแบบโดยอัตโนมัติ

อัตราส่วนคอนทราสต์คำนวณอย่างไร?

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

เครื่องมือนี้ใช้งานบนมือถือได้ไหม?

ได้ เครื่องมือตรวจสอบคอนทราสต์ใช้งานได้บนอุปกรณ์ใดก็ได้ที่มีเบราว์เซอร์สมัยใหม่ — คอมพิวเตอร์ แท็บเล็ต หรือโทรศัพท์

เครื่องมือนี้ฟรีหรือไม่?

ใช่ ColourPicker.app ใช้งานได้ฟรีทั้งหมดโดยไม่ต้องสมัครสมาชิก

ฉันสามารถตรวจสอบคอนทราสต์สำหรับส่วนประกอบ UI ไม่ใช่แค่ข้อความได้หรือไม่?

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