แปลงฟรี

คอนทราสต์สี เครื่องตรวจสอบ (WCAG)

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

ข้อความตัวอย่าง — ขนาดปกติ

ตัวอย่างข้อความขนาดเล็ก — 14px

อัตราส่วนความคมชัด:21.00:1
WCAG เอเอข้อความปกติผ่าน
WCAG เอเอข้อความขนาดใหญ่ผ่าน
WCAG AAAข้อความปกติผ่าน
WCAG AAAข้อความขนาดใหญ่ผ่าน

เกี่ยวกับเครื่องมือนี้

ตรวจสอบอัตราส่วนความคมชัดของสีระหว่างข้อความเบื้องหน้าและสีพื้นหลังตามแนวทางการเข้าถึง WCAG 2.1 ป้อนสีเป็นรหัสฐานสิบหก ค่า RGB หรือค่า HSL และดูอัตราส่วนคอนทราสต์ได้ทันทีพร้อมกับผลลัพธ์ผ่าน/ไม่ผ่านสำหรับการปฏิบัติตาม WCAG AA และ AAA ทั้งขนาดข้อความปกติและขนาดใหญ่

วิธีใช้งาน

  1. ป้อนหรือเลือกสีพื้นหน้า (ข้อความ) โดยใช้ตัวเลือกสีหรืออินพุตเลขฐานสิบหก
  2. ป้อนหรือเลือกสีพื้นหลังของคุณ
  3. ดูอัตราส่วนคอนทราสต์และผลลัพธ์ผ่าน/ไม่ผ่าน WCAG 2.1 AA/AAA ทันที
  4. ปรับสีจนกว่าคุณจะได้ระดับการปฏิบัติตามที่ต้องการ

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

อัตราส่วนคอนทราสต์ที่จำเป็นสำหรับการปฏิบัติตาม WCAG คืออะไร
WCAG AA ต้องใช้ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (18pt+ หรือ 14pt+ ตัวหนา) WCAG AAA ต้องการ 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ อัตราส่วนสูงสุดที่เป็นไปได้คือ 21:1 (ขาวดำ)
เหตุใดคอนทราสต์ของสีจึงมีความสำคัญ
คอนทราสต์ที่เพียงพอทำให้มั่นใจได้ว่าข้อความสามารถอ่านได้สำหรับผู้ใช้ที่มีการมองเห็นไม่ชัด ตาบอดสี หรือผู้ที่ดูหน้าจอในแสงแดดจ้า นอกจากนี้ยังเป็นข้อกำหนดทางกฎหมายภายใต้ข้อบังคับการเข้าถึงของ ADA และ EU สำหรับเว็บไซต์หลายแห่ง
WCAG ถือว่า 'ข้อความขนาดใหญ่' คืออะไร
ข้อความขนาดใหญ่กำหนดเป็น 18pt (24px) ขึ้นไปสำหรับน้ำหนักปกติ หรือ 14pt (18.66px) ขึ้นไปสำหรับข้อความตัวหนา ข้อความขนาดใหญ่มีข้อกำหนดคอนทราสต์ต่ำกว่าเนื่องจากอ่านง่ายกว่าโดยธรรมชาติ
เครื่องมือนี้ตรวจสอบคอนทราสต์สำหรับองค์ประกอบที่ไม่ใช่ข้อความหรือไม่
WCAG 2.1 ต้องการอัตราส่วนคอนทราสต์ 3:1 สำหรับส่วนประกอบ UI และวัตถุกราฟิก (ปุ่ม ไอคอน ฟิลด์แบบฟอร์ม) คุณสามารถใช้เครื่องมือนี้เพื่อตรวจสอบสิ่งเหล่านั้นได้เช่นกัน เพียงป้อนส่วนประกอบและสีพื้นหลัง