เครื่องวิเคราะห์ WCAG

วิเคราะห์อัตราส่วนความเปรียบต่างตาม WCAG ของทุกคู่สีในพาเลททีละคู่ ระบุว่าผ่านระดับ AA หรือ AAA ควบคุมการเข้าถึงของสีทั้งเว็บ

ชุดสีที่จะวิเคราะห์

ตารางค่าคอนทราสต์

	Primary	Secondary	Background	Text	Muted
Primary	—	1.15 Fail	3.68 AA-L	3.98 AA-L	1.29 Fail
Secondary	1.15 Fail	—	4.23 AA-L	3.45 AA-L	1.12 Fail
Background	3.68 AA-L	4.23 AA-L	—	14.63 AAA	4.76 AA
Text	3.98 AA-L	3.45 AA-L	14.63 AAA	—	3.07 AA-L
Muted	1.29 Fail	1.12 Fail	4.76 AA	3.07 AA-L	—

คำอธิบาย WCAG 2.1

AAA

ระดับ AAA

อัตราส่วน ≥ 7:1 - ดีเยี่ยม

ระดับ AA

อัตราส่วน ≥ 4.5:1 - มาตรฐาน

AA-L

AA ใหญ่

อัตราส่วน ≥ 3:1 - ข้อความขนาดใหญ่

ไม่ผ่าน

อัตราส่วน < 3:1 - ไม่ผ่านเกณฑ์

เครื่องวิเคราะห์ WCAG แสดงเฉพาะตัวควบคุมและผลลัพธ์ที่เกี่ยวข้องกับหน้าที่ของเครื่องมือ ตัวเลือกที่มีขึ้นอยู่กับเครื่องมือและข้อมูลนำเข้า

รูปแบบที่รองรับ

Palette

HEX

CSS Variables

JSON

วิธีใช้งาน

ขั้นตอน 1

เปิด เครื่องวิเคราะห์ WCAG และเตรียมข้อมูลที่อินเทอร์เฟซร้องขอ

ขั้นตอน 2

ปรับตัวควบคุมที่มองเห็นตามผลลัพธ์ที่ต้องการ

ขั้นตอน 3

ตรวจสอบผลลัพธ์ก่อนคัดลอก ส่งออก หรือนำไปใช้ซ้ำ

ข้อผิดพลาดที่พบบ่อยที่ควรหลีกเลี่ยง

อย่าถือว่ารูปแบบหรือตัวเลือกได้รับการรองรับหากไม่ปรากฏในอินเทอร์เฟซ
ตรวจสอบค่าก่อนนำไปใช้ในแบรนด์ อินเทอร์เฟซ หรือไฟล์งานจริง
หากใช้กับข้อความหรือ UI ควรตรวจสอบคอนทราสต์ด้วย

เคล็ดลับจากมือโปร

เก็บค่าต้นทางไว้กับผลลัพธ์เมื่อเปรียบเทียบหลายตัวเลือก
ใช้รูปแบบที่เครื่องมือแสดงจริงแทนการคาดเดาการแปลง
บนมือถือและแท็บเล็ตให้ข้อความและตัวควบคุมตัดขึ้นบรรทัดใหม่ได้

การจัดการข้อมูล

การประมวลผลข้อมูลขึ้นอยู่กับฟังก์ชันที่ใช้ การยินยอม การวิเคราะห์ และฟังก์ชันบัญชีของเว็บไซต์แยกจากการทำงานกับสี

เครื่องมือนี้ทำอะไร

วิเคราะห์อัตราส่วนความเปรียบต่างตาม WCAG ของทุกคู่สีในพาเลททีละคู่ ระบุว่าผ่านระดับ AA หรือ AAA ควบคุมการเข้าถึงของสีทั้งเว็บ เครื่องวิเคราะห์ WCAG มุ่งเน้นงานนี้และไม่อ้างถึงฟังก์ชันที่ไม่ปรากฏในอินเทอร์เฟซ ใช้ตัวควบคุมที่มีเพื่อให้ได้ผลลัพธ์ที่ต้องการ แล้วตรวจสอบค่าที่แสดงก่อนนำไปใช้ในเครื่องมืออื่น สไตล์ชีต ไฟล์ออกแบบ หรือเอกสาร

เตรียมข้อมูลนำเข้าที่เหมาะสม

เริ่มจากข้อมูลที่ เครื่องวิเคราะห์ WCAG ขอ ซึ่งอาจเป็นสี ค่า รูปภาพ หรือการตั้งค่าตามหน้าจอ รูปแบบที่ระบุในหน้านี้คือ Palette, HEX, CSS Variables, JSON หากรูปแบบหรือตัวเลือกไม่แสดงในอินเทอร์เฟซ อย่าถือว่าฟังก์ชันนี้รองรับ

อ่านและตรวจสอบผลลัพธ์

อ่านผลลัพธ์ตามบริบทของการทำงานที่คุณดำเนินการ เปรียบเทียบกับค่าต้นทางและตรวจสอบการตั้งค่าที่มีผลต่อการคำนวณ สำหรับงานภาพสำคัญควรดูผลลัพธ์ในอินเทอร์เฟซจริงที่จะใช้งานด้วย ไม่ควรอาศัยโค้ดเพียงอย่างเดียว

ใช้งานบนมือถือและแท็บเล็ต

เครื่องวิเคราะห์ WCAG ใช้เลย์เอาต์แบบ responsive ของเว็บไซต์ บนหน้าจอแคบ หัวข้อ คำอธิบาย breadcrumbs และตัวควบคุมสามารถตัดขึ้นบรรทัดใหม่เพื่อไม่ให้คำแปลยาวถูกตัด อย่างไรก็ตามควรตรวจสอบผลลัพธ์สุดท้ายบนอุปกรณ์และบริบทที่จะใช้งานจริง

นำผลลัพธ์ไปใช้ในโปรเจกต์

หลังตรวจสอบผลลัพธ์แล้ว ให้ใช้เฉพาะการทำงานที่ เครื่องวิเคราะห์ WCAG มีจริง เช่น การคัดลอกหรือส่งออกเมื่อมีตัวเลือกนี้ เก็บค่าต้นทางไว้หากต้องสร้างการตั้งค่าเดิมอีก และสำหรับสี UI ควรบันทึกบทบาทของสีและข้อกำหนดด้านคอนทราสต์ด้วย