ตรวจสอบความเปรียบต่างของสี

ตรวจสอบอัตราส่วนความเปรียบต่างของสีตามแนวทางการเข้าถึง WCAG 2.1 ผลลัพธ์ AA/AAA ทันที

สีพื้นหน้า

สีพื้นหลัง

ตัวอย่างข้อความขนาดใหญ่ (18pt ตัวหนา)

ตัวอย่างข้อความปกติ — The quick brown fox jumps over the lazy dog.

14.05:1อัตราส่วนความเปรียบต่าง

AA — ข้อความปกติ (≥ 4.5:1)ผ่าน

AA — ข้อความขนาดใหญ่ (≥ 3:1)ผ่าน

AAA — ข้อความปกติ (≥ 7:1)ผ่าน

AAA — ข้อความขนาดใหญ่ (≥ 4.5:1)ผ่าน

เกี่ยวกับเครื่องมือนี้

ตัวตรวจสอบความเปรียบต่างคำนวณอัตราส่วนความเปรียบต่างระหว่างสีพื้นหน้า (ข้อความ) และสีพื้นหลังโดยใช้สูตรความสว่างสัมพัทธ์ WCAG 2.1

WCAG 2.1 กำหนดสองระดับ: AA ต้องการ 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความขนาดใหญ่ AAA ต้องการ 7:1 และ 4.5:1

นักออกแบบ UI ตรวจสอบว่าป้ายกำกับและข้อความตรงตามมาตรฐาน WCAG นักพัฒนา frontend ตรวจสอบชุดข้อความ-พื้นหลังในระบบออกแบบ

"ข้อความขนาดใหญ่" คืออะไร? — WCAG กำหนดข้อความขนาดใหญ่เป็นอย่างน้อย 18pt (24px) ปกติ หรือ 14pt (~18.67px) ตัวหนา
รองรับความโปร่งใสหรือ rgba ไหม? — ไม่ เครื่องมือนี้ใช้ได้เฉพาะกับสี hex แบบทึบ
ควรมุ่งไปที่ระดับ WCAG ใด? — AA คือขั้นต่ำที่แนะนำสำหรับเว็บไซต์สาธารณะส่วนใหญ่ AAA ให้ความสามารถในการอ่านที่ดีกว่า
4.5:1 เพียงพอเสมอหรือไม่? — 4.5:1 ตรงตาม WCAG AA แต่ผู้ใช้ที่มีความบกพร่องทางสายตารุนแรงกว่าอาจได้รับประโยชน์จากอัตราส่วนที่สูงขึ้น