ตรวจคอนทราสต์สี
ทำให้ข้อความของคุณอ่านง่ายสำหรับทุกคน และรับวิธีแก้เมื่อยังไม่ผ่าน
ปิดผนึกไว้บนอุปกรณ์นี้
ทำงานในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดใด ๆ
ปิดผนึก
สี
- อัตราส่วนคอนทราสต์
- ข้อความปกติ
- AA · 4.5:1
- AAA · 7:1
- ข้อความขนาดใหญ่
- AA · 3:1
- AAA · 4.5:1
- องค์ประกอบอินเทอร์เฟซและไอคอน
- AA · 3:1
- คอนทราสต์ APCA (เพื่อเป็นข้อมูล)
APCA เป็นวิธีใหม่ที่กำลังศึกษาเพื่อใช้ในแนวทางการเข้าถึงในอนาคต ปัจจุบัน WCAG 2.2 ยังเป็นมาตรฐานอ้างอิง
ตัวอย่าง
ข้อความขนาดใหญ่จะดูแบบนี้
ข้อความปกติควรอ่านง่ายสำหรับทุกคน รวมถึงผู้ที่มีสายตาเลือนราง เมื่อดูบนมือถือกลางแดดจ้า หรือบนหน้าจอรุ่นเก่า
ตัวอักษรเล็กและคำบรรยายภาพต้องการคอนทราสต์มากที่สุด
สีที่แนะนำ
วิธีใช้งาน
-
ใส่สีทั้งสอง
พิมพ์หรือเลือกสีข้อความและสีพื้นหลัง ใช้ได้ทุกรูปแบบ ทั้ง HEX, RGB, HSL หรือชื่อสีใน CSS
-
อ่านผลลัพธ์
ดูอัตราส่วนคอนทราสต์ และดูว่าผ่าน WCAG 2.2 AA และ AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบอินเทอร์เฟซหรือไม่
-
แก้ไขหากจำเป็น
หากระดับใดไม่ผ่าน ให้ใช้สีที่แนะนำ ซึ่งเป็นสีที่ใกล้เคียงที่สุดในเฉดเดิมที่ผ่านเกณฑ์
คำถามที่พบบ่อย
ต้องใช้อัตราส่วนคอนทราสต์เท่าไร
WCAG 2.2 ระดับ AA กำหนดอย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ระดับ AAA กำหนด 7:1 และ 4.5:1 ไอคอน เส้นขอบช่องกรอกข้อมูล และองค์ประกอบอินเทอร์เฟซอื่น ๆ ต้องมีอย่างน้อย 3:1 เทียบกับสิ่งที่อยู่ติดกัน
ข้อความแบบไหนนับเป็นข้อความขนาดใหญ่
ข้อความขนาดอย่างน้อย 18 พอยต์ (24 พิกเซล CSS) หรืออย่างน้อย 14 พอยต์ (ประมาณ 18.7 พิกเซล CSS) เมื่อเป็นตัวหนา ข้อความที่เล็กกว่านั้นนับเป็นข้อความปกติ
ทำไม 4.49:1 ถึงไม่ผ่าน ทั้งที่ใกล้ 4.5:1 มาก
เกณฑ์ของ WCAG เป็นค่าขั้นต่ำที่เข้มงวด และห้ามปัดอัตราส่วนขึ้น เครื่องมือนี้จึงแสดงอัตราส่วนแบบปัดลง ค่าที่ดูเหมือนผ่านจึงผ่านจริง
APCA คืออะไร
APCA (Accessible Perceptual Contrast Algorithm) เป็นวิธีวัดคอนทราสต์แบบใหม่ที่คำนึงว่าข้อความเป็นสีเข้มบนพื้นสว่าง หรือสีสว่างบนพื้นเข้ม กำลังอยู่ระหว่างการศึกษาสำหรับแนวทางเวอร์ชันถัดไป ที่นี่แสดงไว้เพื่อเป็นข้อมูลเท่านั้น เพราะปัจจุบันข้อกำหนดทางกฎหมายและการตรวจประเมินยังอ้างอิงอัตราส่วนของ WCAG 2
สีที่แนะนำเลือกมาอย่างไร
เครื่องมือจะคงเฉดสีและความสดของสีคุณไว้ และเปลี่ยนเฉพาะความสว่างในปริภูมิสี OKLCH ซึ่งอิงการรับรู้ของสายตา จนกว่าจะพบค่าที่ใกล้ที่สุดที่ถึงระดับนั้น สีของคุณจึงยังดูเหมือนเดิม เพียงสว่างขึ้นหรือเข้มขึ้นเล็กน้อย
ใช้กับสีโปร่งใสได้หรือไม่
ได้สำหรับสีข้อความ สีข้อความแบบโปร่งแสงจะถูกผสมกับพื้นหลังก่อน เพราะนั่นคือสีที่ผู้คนเห็นจริง ส่วนพื้นหลังจะถือว่าเป็นสีทึบ