WCAG ความคมชัดของสีสำหรับนักออกแบบ

หากข้อความของคุณไม่ผ่าน WCAG AA ด้านความคมชัด ผู้ที่มีความบกพร่องทางการมองเห็นประมาณ 285 ล้านคนจะไม่สามารถอ่านได้ นอกจากนี้คุณยังเสี่ยงทางกฎหมายมากขึ้นในสหภาพยุโรปและสหรัฐอเมริกา ข่าวดี: กฎนั้นง่ายมาก

กฎ 4.5:1

ข้อความเนื้อหาต้องมีอัตราส่วนความคมชัดอย่างน้อย 4.5:1 กับพื้นหลังเพื่อผ่าน WCAG AA ข้อความขนาดใหญ่ (24px+ ปกติ หรือ 18px+ ตัวหนา) มีเกณฑ์ต่ำกว่าที่ 3:1

สำหรับการปฏิบัติตาม AAA: 7:1 สำหรับเนื้อหา, 4.5:1 สำหรับข้อความขนาดใหญ่

วิธีคำนวณอัตราส่วนความคมชัด

WCAG ใช้ความส่องสว่างสัมพัทธ์ — แปลงแต่ละสีเป็นค่าความส่องสว่าง (0 = ดำ, 1 = ขาว) โดยใช้สูตรเฉพาะ จากนั้นคำนวณ (L1 + 0.05) / (L2 + 0.05) โดยที่ L1 คือสีที่สว่างกว่า

คุณไม่จำเป็นต้องคำนวณเอง — ใช้ เครื่องมือตรวจสอบความคมชัดฟรีของเราเพื่อใส่สองสีใดๆ แล้วดูอัตราส่วน

กรณีที่ล้มเหลวบ่อย

• สีเทาอ่อนบนพื้นขาว — #999 บน #fff = 2.85 (ไม่ผ่าน) #767676 บน #fff = 4.54 (ผ่าน)
• สีขาวบนสีเหลือง — เกือบจะไม่ผ่านเสมอ ใช้ข้อความสีเข้มบนสีเหลือง
• ลิงก์สีในข้อความเนื้อหา — ลิงก์สีน้ำเงินส่วนใหญ่ผ่านบนพื้นขาว แต่ไม่ผ่านบนพื้นเทาอ่อน ทดสอบพื้นหลังจริงที่อยู่รอบๆ
• สีแบรนด์ที่ดูดี — มักจะไม่ผ่าน เพิ่มพื้นหลังสีขาวนวลหรือทำให้ข้อความเข้มขึ้น

การเลือกคู่สีที่เข้าถึงได้

สามรูปแบบที่เชื่อถือได้:

1. สีเข้มบนสีอ่อน — #1f2937 บน #fff = 14:1 (สมบูรณ์แบบ)
2. สีขาวบนสีเข้ม — #fff บน #1f2937 = 14:1 (สมบูรณ์แบบ)
3. สีเข้มบนสีเน้น — #1f2937 บน #fbbf24 = 9:1 (สมบูรณ์แบบสำหรับปุ่ม)

นอกเหนือจากข้อความ

WCAG 2.1 ยังกำหนด 3:1 สำหรับองค์ประกอบที่ไม่ใช่ข้อความ (ปุ่ม, วงแหวนโฟกัส, ขอบฟอร์ม) เครื่องมือตรวจสอบรองรับทั้งสองอย่าง

วอลเปเปอร์ที่ไม่รบกวนวิดเจ็ตของคุณ

หากคุณเป็นนักออกแบบที่ตั้งวอลเปเปอร์ไว้ด้านหลังวิดเจ็ตนาฬิกาและการแจ้งเตือน ให้เลือกวอลเปเปอร์ที่มีความคมชัดต่ำกว่า 5:1 ในบริเวณวิดเจ็ต เครื่องมือ Gaussian blur ของเราสามารถทำให้พื้นที่ที่ซับซ้อนของวอลเปเปอร์ใดๆ อ่อนลงเพื่อให้อ่านวิดเจ็ตได้ดีขึ้น

ลองใช้เครื่องมือฟรีของเรา

คู่มือส่วนใหญ่เหล่านี้มาพร้อมกับเครื่องมือที่ใช้งานได้จริงที่คุณสามารถใช้ได้ทันที — ไม่ต้องสมัครสมาชิกสำหรับการใช้งานครั้งแรก:

• ปรับขนาดภาพ — ย่อและขยายแบบพิกเซลสมบูรณ์
• แปลงเป็น WebP — ไฟล์เล็กลง 30-50% เมื่อเทียบกับ JPG
• ลบพื้นหลัง — ตัดออกด้วยคลิกเดียว, PNG โปร่งใส
• เครื่องสร้าง Favicon — ทุกขนาดเบราว์เซอร์จากแหล่งเดียว
• ปรับขนาดโซเชียลมีเดีย — ขนาดที่แน่นอนของทุกแพลตฟอร์ม
• ประมวลผลเป็นกลุ่ม — ใช้เครื่องมือใดๆ กับภาพสูงสุด 200 ภาพในครั้งเดียว

เรียกดู แคตตาล็อกเครื่องมือทั้งหมด