ตัวตรวจคอนทราสต์ WCAG
ทดสอบคู่สีพื้นหน้าและพื้นหลังใดก็ได้สำหรับอัตราส่วนคอนทราสต์ WCAG 2.1 (1 ถึง 21) ดูผ่าน/ไม่ผ่านสำหรับระดับ AA และ AAA สำหรับข้อความปกติ ข้อความใหญ่ (18pt+ หรือ 14pt ตัวหนา) และคอมโพเนนต์ UI
วิธีตรวจคอนทราสต์สี
1. ใส่หรือเลือกสีพื้นหน้า (ข้อความ) และพื้นหลัง
2. อ่านอัตราส่วนคอนทราสต์ (เช่น 4.52:1)
3. ตรวจแถว AA และ AAA สำหรับขนาดข้อความปกติและใหญ่
4. ปรับความสว่าง HSL จนระดับที่ต้องการผ่าน แล้วคัดลอกค่า hex
ตัวอย่างการตรวจคอนทราสต์
ข้อความเนื้อหา #374151 บน #FFFFFF
อัตราส่วน ≈ 8.9:1 — ผ่าน AAA สำหรับข้อความปกติ (ต้องการ 7:1) อ่านยาวสบาย
เทาอ่อน #9CA3AF บนขาว
อัตราส่วน ≈ 2.6:1 — ไม่ผ่าน AA สำหรับข้อความปกติ (ต้องการ 4.5:1) ข้อผิดพลาดตัวยึดที่พบบ่อย
ปุ่มหลักขาวบน #2563EB
อัตราส่วน ≈ 4.6:1 — ผ่าน AA ข้อความปกติ ดันเป็นน้ำเงินเข้มขึ้นสำหรับ AAA หรือใช้เฉพาะข้อความใหญ่
เมื่อไหร่ควรใช้เครื่องมือนี้
• เมื่อตรวจโทเค็นระบบดีไซน์ก่อนปล่อย
• เมื่อแก้ข้อค้นพบการเข้าถึงจาก Lighthouse หรือ axe
• เมื่อเลือกสีลิงก์ที่ต้องต่างจากข้อความเนื้อหา ไม่ใช่แค่ฮิว
ระดับ WCAG 2.1 อธิบาย
ระดับ A คือขั้นต่ำ AA เป็นเป้าทางกฎหมายในหลายเขตอำนาจ (ADA, ภาครัฐ EAA) AAA เป็นเป้าที่มุ่งหวังสำหรับเนื้อหาตัวอักษร — พาดหัวใหญ่ผ่าน AAA ได้ง่ายกว่าแคปชัน 14px ตัวบ่งชี้โฟกัสที่มองเห็นได้ (2.4.7) เสริมคอนทราสต์ — ผู้ใช้คีย์บอร์ดต้องการวงโฟกัสที่มองเห็น มัก 3:1 กับสีข้างเคียง บันทึกผ่าน/ไม่ผ่านในระบบดีไซน์ข้างคู่โทเค็นแต่ละคู่
คำถามที่พบบ่อย
อัตราส่วนคอนทราสต์สำหรับข้อความปกติ WCAG AA คือเท่าไหร่?
อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความใหญ่ (18pt+ หรือ 14pt ตัวหนา)
สำหรับ AAA?
7:1 ข้อความปกติ 4.5:1 ข้อความใหญ่ — เข้มงวดกว่า มักใช้กับเว็บภาครัฐ
คอมโพเนนต์ UI ต้องมีคอนทราสต์หรือไม่?
WCAG 2.1 ต้องการ 3:1 สำหรับวัตถุกราฟิกและขอบคอมโพเนนต์ UI (1.4.11)
อัตราส่วนคำนวณอย่างไร?
อิงความสว่างสัมพัทธ์ของสี sRGB: (L1 + 0.05) / (L2 + 0.05) โดย L1 สว่างกว่า
ขีดเส้นใต้แก้ลิงก์คอนทราสต์ต่ำหรือไม่?
ไม่ — ยังต้องมีคอนทราสต์ ขีดเส้นใต้ช่วยสัญญาณที่ไม่ใช่สี แต่ไม่แทนกฎอัตราส่วน