เครื่องมือนี้ทำอะไร
เครื่องมือตรวจคอนทราสต์สีบอกว่าสีข้อความอ่านง่ายบนสีพื้นหลังหรือไม่ ตามแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG 2.x) ใส่สี CSS ใดก็ได้ให้ข้อความและพื้นหลัง — HEX, rgb(), hsl(), ชื่อสี หรือสีโปร่งใส — แล้วจะเห็นอัตราส่วนคอนทราสต์ ผลผ่านหรือไม่ผ่านของแต่ละเกณฑ์ AA และ AAA และตัวอย่างสด หากไม่ผ่าน เครื่องมือจะแนะนำสีข้อความและสีพื้นหลังที่ผ่านเกณฑ์ใกล้ที่สุดโดยคงเฉดสีเดิม ทุกอย่างทำงานในเบราว์เซอร์ของคุณ
วิธีใช้
- พิมพ์หรือเลือก สีข้อความ และ สีพื้นหลัง ปุ่ม สลับ จะสลับสองสีนี้
- ดู อัตราส่วนคอนทราสต์ และรายการผลสำหรับข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบ UI
- หากระดับใดไม่ผ่าน ให้ดู สีที่ผ่านเกณฑ์ใกล้ที่สุด แต่ละคำแนะนำแสดงสีใหม่ อัตราส่วน ปุ่มคัดลอก และ ใช้ เพื่อนำไปใช้
- เปิด APCA เพื่อดูคอนทราสต์ความสว่าง (Lc) ของร่าง WCAG 3 ด้วย
สีกึ่งโปร่งใสจะถูกผสมก่อนตรวจ: ข้อความทับพื้นหลัง และพื้นหลังทับสีขาว
ตัวอย่าง
#767676 on #ffffff → 4.54:1 passes AA normal text
#777777 on #ffffff → 4.47:1 fails AA normal text, passes AA large text
#000000 on #ffffff → 21:1 the maximumวิธีคำนวณอัตราส่วน
ค่าความสว่างสัมพัทธ์ของแต่ละสีคำนวณจากช่องสี sRGB (ทำให้เป็นเชิงเส้น แล้วถ่วงน้ำหนักแดง 21% เขียว 72% น้ำเงิน 7%) อัตราส่วนเท่ากับ (สีที่สว่างกว่า + 0.05) / (สีที่มืดกว่า + 0.05) มีค่าตั้งแต่ 1:1 สำหรับสีเดียวกันถึง 21:1 สำหรับดำบนขาว สิ่งที่สำคัญคือความสว่าง ไม่ใช่เฉดสี: แดงล้วนบนเขียวล้วนดูสดใสแต่ได้เพียงประมาณ 1.3:1
คำแนะนำจะเปลี่ยนเฉพาะความสว่างของสี (ใน HSL) และเลือกทิศทาง มืดลงหรือสว่างขึ้น ที่ต้องเปลี่ยนน้อยกว่า บางครั้งไม่มีเฉดใดทำได้: บนพื้นหลังสีเทากลาง ไม่มีสีข้อความใดถึง 7:1
คำถามที่พบบ่อย
› ต้องใช้อัตราส่วนคอนทราสต์เท่าไร?
ระดับ AA ของ WCAG 2.x กำหนดอย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่และองค์ประกอบ UI เช่น ขอบช่องกรอก ไอคอน และกรอบโฟกัส ระดับ AAA กำหนด 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ กฎหมายและนโยบายส่วนใหญ่อ้างอิงระดับ AA
› ข้อความขนาดใหญ่คืออะไร?
ข้อความขนาดอย่างน้อย 24px (18pt) น้ำหนักปกติ หรืออย่างน้อย 18.66px (14pt) ตัวหนา ข้อความที่เล็กกว่านี้ถือเป็นข้อความปกติและต้องใช้อัตราส่วนสูงกว่า
› ทำไม 4.49:1 ถึงไม่ผ่าน?
เกณฑ์ของ WCAG เป็นค่าที่แน่นอน อัตราส่วน 4.499 ไม่ถึง 4.5 เครื่องมือนี้จึงตัดทศนิยมของค่าที่แสดงแทนการปัดขึ้น และตัดสินผ่านหรือไม่ผ่านจากค่าจริง
› APCA คืออะไร?
APCA (Accessible Perceptual Contrast Algorithm) คือวิธีคำนวณคอนทราสต์ที่เสนอไว้ในร่าง WCAG 3 ให้ค่าคอนทราสต์ความสว่าง Lc ที่ขึ้นกับว่าสีใดเป็นข้อความ และเหมาะกับโหมดมืดกว่า ยังไม่ใช่มาตรฐานทางกฎหมาย จึงแสดงไว้เป็นข้อมูลประกอบเท่านั้น