วิธีใช้งาน
- เลือกสีหรือพิมพ์เป็น hex, rgb(), hsl(), oklch() หรือชื่อสี
- อ่านอัตราส่วนและผล WCAG ทั้งสี่แบบ พร้อมดูตัวอย่างสดด้านล่าง
- หากไม่ผ่าน ให้คลิกใช้สีนี้ถัดจากสีที่แนะนำ
คำอธิบายตัวเลือก
- AA
- อย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความใหญ่ (18 pt / 24 px หรือ 14 pt / ประมาณ 18.7 px ตัวหนา) กฎและระบบออกแบบส่วนใหญ่ต้องการ AA
- AAA
- อย่างน้อย 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความใหญ่ สำหรับเนื้อหาที่ต้องการความอ่านง่ายมากที่สุด
- สีที่แนะนำ
- คงเฉดสีและ chroma ในพื้นที่สี OKLCH และเปลี่ยนเฉพาะความสว่างเพื่อหาสีที่ใกล้ที่สุดและเพิ่งผ่าน
- สีโปร่งใส
- สีข้อความที่มีความโปร่งใสจะวัดตามลักษณะที่ปรากฏบนพื้นหลัง
วิธีคำนวณอัตราส่วน
แต่ละสีถูกแปลงจาก sRGB เป็นแสงเชิงเส้น แล้วเป็นความสว่างสัมพัทธ์:
linear = c ÷ 12.92 if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4 otherwise (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)สีเขียวมีน้ำหนักมากที่สุดเพราะสายตาไวต่อสีนี้มากที่สุด ผลลัพธ์บางตัวบนพื้นหลังสีขาว:
| สีข้อความ | อัตราส่วน | ผล |
|---|---|---|
| #000000 | 21 : 1 | AAA |
| #0066cc | 5.57 : 1 | AA สำหรับข้อความปกติ ไม่ผ่าน AAA สำหรับข้อความปกติ |
| #767676 | 4.54 : 1 | AA สำหรับข้อความปกติ |
| #777777 | 4.48 : 1 | ไม่ผ่าน AA สำหรับข้อความปกติ แต่ผ่านสำหรับข้อความขนาดใหญ่ |
คำนิยามของ WCAG อยู่ใน Understanding Success Criterion 1.4.3
คำถามที่พบบ่อย
คำนวณคอนทราสต์อย่างไร
ใช้สูตร WCAG 2.x คือ (ความสว่างสัมพัทธ์ที่มากกว่า + 0.05) ÷ (ความสว่างสัมพัทธ์ที่น้อยกว่า + 0.05) ให้ค่า 1:1 ถึง 21:1 สีดำบนขาวคือ 21:1
ทำไมจึงพูดถึง #767676 บ่อย
เป็นสีเทาที่สว่างที่สุดซึ่งถึง 4.5:1 หรือประมาณ 4.54:1 บนสีขาว จึงเป็นขีดต่ำที่ใช้บ่อยสำหรับข้อความรอง
ไอคอนและเส้นขอบต้องตรวจด้วยไหม
ต้องตรวจ ตั้งแต่ WCAG 2.1 ส่วนประกอบอินเทอร์เฟซและกราฟิก เช่น ขอบปุ่ม ช่องกรอก และไอคอน ต้องมีอย่างน้อย 3:1 เมื่อเทียบกับสีข้างเคียง
ความเป็นส่วนตัว
เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไฟล์และข้อความของคุณได้รับการประมวลผลบนอุปกรณ์ของคุณ และจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ของเรา