WCAG ตัวตรวจสอบความคมชัด — AA/AAA ออนไลน์ _

การตรวจสอบความคมชัด WCAG ดำเนินการผ่านไม่กี่ขั้นตอนตรงไปตรงมา ไม่มีอะไรออกจากเบราว์เซอร์ของคุณ

1. คุณป้อนสีพื้นหน้าและสีพื้นหลัง เครื่องมือจะแยกวิเคราะห์ hex, rgb(), hsl() หรือสี CSS ที่มีชื่อเป็นค่าแชนเนลสีแดง สีเขียว และสีน้ำเงิน
2. แต่ละแชนเนล RGB ถูกทำให้เป็นเส้นตรงโดยใช้ฟังก์ชันถ่ายโอน sRGB ซึ่งแปลงค่าที่แสดงผลที่เข้ารหัสแกมมาเป็นความเข้มแสงเชิงเส้น
3. ค่าเชิงเส้นถูกถ่วงน้ำหนักตามความไวของดวงตามนุษย์ต่อแต่ละแชนเนล — 0.2126 สำหรับสีแดง 0.7152 สำหรับสีเขียว 0.0722 สำหรับสีน้ำเงิน ผลรวมคือความส่องสว่างสัมพัทธ์ของสี
4. อัตราส่วนความคมชัดคือ (L1 + 0.05) ÷ (L2 + 0.05) โดยที่ L1 คือความส่องสว่างของสีที่สว่างกว่าและ L2 คือสีที่เข้มกว่า 0.05 ที่เพิ่มเข้ามาช่วยให้สูตรใช้ได้กับสีดำล้วน
5. อัตราส่วนถูกเปรียบเทียบกับเกณฑ์ WCAG: ข้อความปกติ AA ต้องการอย่างน้อย 4.5:1 ข้อความใหญ่ AA ต้องการ 3:1 ข้อความปกติ AAA ต้องการ 7:1 และข้อความใหญ่ AAA ต้องการ 4.5:1 ข้อความใหญ่หมายถึงอย่างน้อย 18pt หรือ 14pt ตัวหนา

FAQ

คำถามทั่วไปเกี่ยวกับการตรวจสอบความคมชัด WCAG

ความแตกต่างระหว่าง AA และ AAA คืออะไร?

AA คือระดับความสอดคล้องขั้นต่ำสำหรับเนื้อหาเว็บส่วนใหญ่ ต้องการอัตราส่วนความคมชัดอย่างน้อย 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความใหญ่ AAA เป็นมาตรฐานที่สูงกว่าที่ต้องการ 7:1 สำหรับข้อความปกติและ 4.5:1 สำหรับข้อความใหญ่ คุณอาจตั้งเป้า AAA สำหรับเนื้อหาสำคัญเช่นเนื้อหาหลักบนเว็บไซต์ข่าว ในขณะที่ใช้ AA สำหรับการออกแบบโดยรวม การทำให้ผ่าน AAA ทุกที่อาจเป็นเรื่องยากกับสีแบรนด์ ดังนั้นหลายทีมจึงตั้งเป้า AA ทั่วทั้งบอร์ดและยกระดับข้อความสำคัญเป็น AAA ในที่ที่ทำได้

อะไรที่ถือว่าเป็น "ข้อความใหญ่" ภายใต้ WCAG?

WCAG 2.x กำหนดข้อความใหญ่ว่าอย่างน้อย 18 point (24px) สำหรับน้ำหนักปกติ หรือ 14 point (ประมาณ 19px) สำหรับน้ำหนักตัวหนา สัญลักษณ์และไอคอนที่เป็นส่วนหนึ่งของหน้าฟอนต์เป็นไปตามเกณฑ์เดียวกัน หากคุณไม่แน่ใจว่าเกณฑ์ใดใช้กับ UI ของคุณ ให้ตรวจสอบทั้งสอง — AA ใหญ่มีเกณฑ์ที่ต่ำกว่า (3:1) ดังนั้นคู่สีส่วนใหญ่ที่ไม่ผ่าน AA ปกติจะผ่าน AA ใหญ่เมื่อข้อความใหญ่เพียงพอ

ทำไมคู่สีของฉันถึงผ่าน AA ใหญ่ แต่ไม่ผ่าน AA ปกติ?

เพราะ AA ใหญ่ต้องการอัตราส่วนเพียง 3:1 ในขณะที่ AA ปกติต้องการ 4.5:1 WCAG ตั้งเกณฑ์ที่ต่ำกว่าสำหรับข้อความใหญ่เพราะตัวอักษรที่ใหญ่กว่าอ่านง่ายกว่าแม้จะมีความคมชัดน้อยกว่า คู่สีที่ได้คะแนน เช่น 4.0:1 ผ่าน AA ใหญ่ (เกณฑ์ 3:1) แต่ไม่ผ่าน AA ปกติ (เกณฑ์ 4.5:1) ซึ่งพบได้บ่อยมากกับสีแบรนด์ที่อ่อนกว่าที่ใช้เป็นสีพื้นหน้าบนพื้นหลังสีขาว

ฉันสามารถพึ่งพาเครื่องมือนี้เพียงอย่างเดียวสำหรับการตรวจสอบการเข้าถึงได้หรือไม่?

เครื่องมือนี้ตรวจสอบสิ่งหนึ่ง — อัตราส่วนความคมชัด WCAG 2.x ระหว่างสองสีทึบ การเข้าถึงที่แท้จริงเกี่ยวข้องกับมากกว่า: ตัวบ่งชี้โฟกัส ขนาดและน้ำหนักฟอนต์ สีที่เป็นวิธีเดียวในการสื่อสารข้อมูล และความเข้ากันได้กับโปรแกรมอ่านหน้าจอและเครื่องมือซูม ใช้การตรวจสอบความคมชัดนี้ควบคู่กับวิธีการตรวจสอบอื่นๆ เพื่อภาพรวมที่สมบูรณ์ของการเข้าถึงแอปพลิเคชันของคุณ

รูปแบบสีใดบ้างที่อินพุตรับ?

คุณสามารถวางรหัส hex 3, 4, 6 หรือ 8 หลัก (มีหรือไม่มี #), ค่า rgb() และ rgba() ในไวยากรณ์จุลภาคแบบเก่าหรือไวยากรณ์การแยกช่องว่างแบบสมัยใหม่, hsl() และ hsla() ด้วยหน่วยสีใดๆ ตามมาตรฐาน (deg, rad, grad, turn), hsv(), hwb() และสี CSS ที่มีชื่อใดๆ จาก 150 สีจากข้อกำหนด CSS Color Module Level 4 สีถูกแยกวิเคราะห์บนอุปกรณ์ของคุณทั้งหมด