ตรวจความคมชัดของสี (WCAG)

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

วิธีใช้

1. ในแท็บ "ตรวจสองสี" ตั้งค่า "สีตัวอักษร" และ "สีพื้นหลัง" ด้วยตัวเลือกสี หรือพิมพ์ HEX, rgb() หรือ hsl()
2. พิมพ์ข้อความของคุณเองใน "ประโยคตัวอย่าง" เพื่อดูเป็นตัวอักษรปกติ ตัวอักษรใหญ่ ตัวหนา และเป็นเส้นขอบกับไอคอน
3. ใต้ "สีที่ผ่านเกณฑ์ที่ใกล้ที่สุด" กด "ใช้" ข้าง "เปลี่ยนสีตัวอักษร" หรือ "เปลี่ยนสีพื้นหลัง" กดที่ค่า HEX เพื่อคัดลอก
4. ในแท็บ "ตรวจพาเลตต์" ใส่สี 2 ถึง 12 สี เพื่อดูตารางของทุกคู่สีและรายการ "คู่สีที่ถึงระดับ"

หลักการทำงาน

• อัตราส่วนความคมชัด = (L1 + 0.05) ÷ (L2 + 0.05) โดย L1 และ L2 คือความสว่างสัมพัทธ์ของสีทั้งสอง ค่าอยู่ระหว่าง 1:1 ถึง 21:1 และปัดลงเหลือทศนิยมสองตำแหน่ง
• ระดับอ้างอิงตามเกณฑ์ WCAG 2.2 ข้อ 1.4.3 (AA: ตัวอักษรปกติ 4.5:1, ตัวอักษรใหญ่ 3:1), 1.4.6 (AAA: 7:1 และ 4.5:1) และ 1.4.11 (ส่วนประกอบ UI 3:1) ตัวอักษรใหญ่คือขนาด 24px หรือตัวหนา 18.66px ขึ้นไป
• สีที่แนะนำคงเนื้อสีและความอิ่มตัวใน OKLCH ไว้ และปรับเฉพาะความสว่างจนถึงระดับที่ต้องการ หากไม่มีความสว่างใดที่ถึงเกณฑ์ได้ หน้านี้จะแจ้งให้ทราบ
• สีล่าสุด ประโยคตัวอย่าง และรายการพาเลตต์จะถูกเก็บไว้ในเบราว์เซอร์นี้เท่านั้น

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

อัตราส่วนความคมชัด 4.5:1 หมายความว่าอย่างไร

ความสว่างสัมพัทธ์ของสีที่สว่างกว่าบวก 0.05 มีค่าเป็น 4.5 เท่าของความสว่างสัมพัทธ์ของสีที่เข้มกว่าบวก 0.05 นี่คือค่าต่ำสุดสำหรับตัวอักษรขนาดปกติที่ระดับ AA

ตัวอักษรสีเทา #777777 บนพื้นขาวผ่านหรือไม่

อัตราส่วนคือ 4.47:1 ซึ่งต่ำกว่า 4.5:1 เล็กน้อย จึงผ่านเฉพาะระดับตัวอักษรใหญ่ หากเข้มขึ้นอีกขั้นเป็น #767676 จะได้ 4.54:1 และผ่าน AA

AA กับ AAA ต่างกันอย่างไร

AA ต้องการ 4.5:1 สำหรับตัวอักษรปกติ ส่วน AAA ต้องการ 7:1 เว็บไซต์ส่วนใหญ่ตั้งเป้าที่ AA ส่วน AAA เหมาะกับข้อความยาวที่ต้องอ่านนาน

เส้นขอบปุ่มและไอคอนต้องมีความคมชัดด้วยหรือไม่

ต้องมี ตาม WCAG 1.4.11 ส่วนประกอบ UI และกราฟิกที่สื่อความหมายต้องมีความคมชัดอย่างน้อย 3:1 เมื่อเทียบกับบริเวณโดยรอบ แถว "ส่วนประกอบ UI และกราฟิก" ใช้ตรวจเกณฑ์นี้