เครื่องมือตรวจสอบคอนทราสต์สี
ตรวจสอบคอนทราสต์สีฟรี: ทดสอบว่าสีข้อความและพื้นหลังผ่าน WCAG 2.2 ระดับ AA และ AAA หรือไม่ ดูอัตราส่วนคอนทราสต์ และรับสีที่ใกล้ที่สุดที่ผ่านเกณฑ์
นี่คือข้อความปกติ ขนาดเท่าย่อหน้า
ข้อความขนาดใหญ่
ปุ่ม| AA | AAA | |
|---|---|---|
| ข้อความปกติ | ||
| ข้อความขนาดใหญ่ (24 px หรือตัวหนา 18.7 px) | ||
| ไอคอนและเส้นขอบของอินเทอร์เฟซ | — |
ใช้ทำอะไร
เครื่องมือนี้วัดคอนทราสต์ระหว่างสีข้อความกับพื้นหลังด้วยสูตรของแนวทางการเข้าถึง WCAG 2.2 ซึ่งใช้อ้างอิงในกฎหมายด้านการเข้าถึงหลายฉบับ โดยแสดงอัตราส่วนคอนทราสต์ตั้งแต่ 1:1 (ไม่มีคอนทราสต์) ถึง 21:1 (ดำบนขาว) และแสดงว่าคู่สีผ่านระดับ AA และ AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบอินเทอร์เฟซ เช่น ไอคอนและเส้นขอบ หรือไม่ เมื่อคู่สีไม่ผ่าน จะแนะนำสีที่ใกล้ที่สุดในเฉดเดียวกันที่ผ่านเกณฑ์
วิธีใช้
- ป้อนหรือเลือกสีข้อความและสีพื้นหลัง
- อ่านอัตราส่วนคอนทราสต์และผล AA และ AAA แล้วตรวจดูตัวอย่างแบบสด
- หากไม่ผ่าน ให้กด “ใช้” ที่สีที่แนะนำ จากนั้นคัดลอกลิงก์เพื่อแชร์ผลลัพธ์
คำถามที่พบบ่อย
ต้องใช้อัตราส่วนคอนทราสต์เท่าใด
ระดับ AA ซึ่งเป็นเป้าหมายทางกฎหมายทั่วไป ต้องการ 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ รวมถึงไอคอนและเส้นขอบของอินเทอร์เฟซ ระดับ AAA ต้องการ 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่
ข้อความแบบใดนับเป็นข้อความขนาดใหญ่
ข้อความขนาดอย่างน้อย 24 พิกเซล CSS (18 พอยต์) หรืออย่างน้อยประมาณ 18.7 พิกเซล CSS (14 พอยต์) เมื่อเป็นตัวหนา หัวข้อมักมีขนาดใหญ่ ส่วนเนื้อหาทั่วไปมักไม่ใช่
ทำไม #777777 บนพื้นขาวจึงไม่ผ่าน
อัตราส่วนของสีนี้คือ 4.47:1 ต่ำกว่า 4.5:1 ที่ข้อความปกติต้องการเพียงเล็กน้อย อัตราส่วนไม่มีการปัดขึ้น ดังนั้นสีเทาที่เข้มขึ้นเล็กน้อยอย่าง #767676 (4.54:1) จึงเป็นสีเทาที่อ่อนที่สุดที่ผ่านบนพื้นขาว
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast