🔧Toolify365

เครื่องตรวจสอบ Contrast (ระดับ WCAG AA

เลือกสี foreground และ background เพื่อคำนวณอัตราส่วน contrast WCAG ตัวอย่างข้อความเรียลไทม์และป้ายเกรดสี่ใบ (AA ปกติ, AA ใหญ่, AAA ปกติ, AAA ใหญ่) อัปเดตแบบเรียลไทม์

ตัวอย่างหัวเรื่องขนาดใหญ่ (24px+ หรือ 18.66px+ bold)
ตัวอย่างข้อความเนื้อหาปกติสำหรับย่อหน้าทั่วไป
ข้อความขนาดเล็กสำหรับคำบรรยาย เชิงอรรถ และป้ายกำกับ
อัตราส่วน contrast
17.85:1
✓WCAG AA — ข้อความปกติ
✓WCAG AA — ข้อความขนาดใหญ่
✓WCAG AAA — ข้อความปกติ
✓WCAG AAA — ข้อความขนาดใหญ่

เครื่องมือที่เกี่ยวข้อง

วิธีการทำงาน

อัตราส่วน contrast ทำงานอย่างไร

WCAG (Web Content Accessibility Guidelines) กำหนด contrast เป็นอัตราส่วนระหว่างความสว่างสัมพัทธ์ของสองสี สูตรทำให้แต่ละช่อง sRGB เป็นเส้นตรง ชั่งน้ำหนักตามความไวของดวงตามนุษย์ (R 0.2126, G 0.7152, B 0.0722) จากนั้นคำนวณ (สว่างกว่า + 0.05) / (มืดกว่า + 0.05) ผลลัพธ์อยู่ระหว่าง 1:1 (เหมือนกัน) ถึง 21:1 (ดำบนขาว)

เราคำนวณในเบราว์เซอร์ของคุณโดยใช้สูตร WCAG 2.x อย่างเป็นทางการ ป้ายเกรดสี่ใบตรวจสอบเทียบกับเกณฑ์ AA 4.5:1 (ปกติ) และ 3:1 (ใหญ่) และ AAA 7:1 (ปกติ) และ 4.5:1 (ใหญ่) 'ข้อความขนาดใหญ่' คือ 24px / 18pt หรือมากกว่า หรือ 18.66px / 14pt แบบ bold

ทำไมต้องผ่าน AA อย่างน้อย

AA คือระดับที่บังคับใช้ทางกฎหมายในหลายเขตอำนาจ (ADA สหรัฐฯ, EU EN 301 549, พระราชบัญญัติความเท่าเทียมสหราชอาณาจักรสำหรับบริการดิจิทัล) การไม่ผ่าน AA ในข้อความเนื้อหาเป็นปัญหา accessibility ที่พบบ่อยที่สุดและแก้ไขได้ง่ายที่สุดในระหว่างการออกแบบ มากกว่าหลังเปิดตัว

AAA แนะนำสำหรับการอ่านรูปแบบยาว บริการภาครัฐ และ interface ที่สำคัญ เข้มงวด นักออกแบบที่สัญชาตญาณแรกคือสีเทาอ่อนบนขาวมักไม่ผ่าน AAA ถ้าเว็บไซต์ส่วนใหญ่ให้บริการเนื้อหาดูด่วน มุ่งหมาย AA ถ้าคุณตีพิมพ์หนังสือ บทความ หรือข้อมูลสำคัญ มุ่งหมาย AAA

ข้อผิดพลาดทั่วไป

'ดูปกติบนหน้าจอของฉัน' หน้าจอที่ calibrate แล้ว แสงไฟฟลูออเรสเซนต์ในออฟฟิศ และการใช้งานสมาร์ทโฟนกลางแจ้งล้วนเปลี่ยน contrast ที่รับรู้ ใช้อัตราส่วน ไม่ใช่สายตา

การออกแบบ dark mode โดยการกลับ hex code การกลับสีเปลี่ยน hue และทำลาย contrast ทดสอบคู่สีทุกคู่ใหม่หลังสลับ theme

เชื่อถือ brand guideline palette หลาย brand ถูกเลือกก่อนที่จะรู้จัก WCAG ถ้า brand pink บนขาวไม่ผ่าน ให้เสนอ pink ที่เข้มกว่าเล็กน้อยสำหรับข้อความเนื้อหาและสงวนสีดั้งเดิมไว้สำหรับการใช้ตกแต่ง

คำถามที่พบบ่อย

›AA กับ AAA ต่างกันอย่างไร?

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

›'ข้อความขนาดใหญ่' คืออะไร?

WCAG กำหนดว่า 18pt (24px) หรือมากกว่า หรือ 14pt (18.66px) แบบ bold

›เครื่องมือนี้รองรับความโปร่งใสหรือไม่?

ยังไม่ได้ เลือกสีจริงที่ผู้ใช้เห็น (foreground composited บน background) รองรับความโปร่งใสอาจมาทีหลัง

›ทำไม brand ของฉันจึงไม่ผ่าน?

Palette หลาย brand ถูกเลือกเพื่อสุนทรียภาพ ไม่ใช่ accessibility การแก้ไขทั่วไป: ทำให้สี accent ที่ใช้เป็นข้อความเข้มขึ้น สงวน variant สีอ่อนสำหรับ background หรือองค์ประกอบตกแต่ง

›อัตราส่วนเหมือนกับ 'contrast ที่รับรู้' หรือไม่?

ไม่ WCAG 2.x ใช้สูตรอิงความสว่างแบบง่าย WCAG 3 (กำลังพัฒนา) ใช้ APCA ซึ่งทำนาย contrast ที่รับรู้ได้ดีกว่า แต่ยังไม่ได้มาตรฐาน

›อัตราส่วนสำหรับไอคอนหรือ UI control คือเท่าไหร่?

WCAG 2.1 เพิ่มขั้นต่ำ 3:1 สำหรับ non-text contrast (ไอคอน form control ตัวบ่งชี้ focus) ใช้ checker เดียวกัน ให้ตรงหรือเกิน 3:1

›ใช้สำหรับกราฟข้อมูลได้หรือไม่?

เกณฑ์เดียวกันใช้ระหว่างสีที่อยู่ติดกันซึ่งบ่งบอกความหมาย สำหรับ data viz 3:1 ระหว่างสีที่อยู่ติดกันคือขั้นต่ำ WCAG 1.4.11

›ข้อมูลถูกส่งที่ไหนหรือไม่?

ไม่ การคำนวณทำงานในเบราว์เซอร์ของคุณในเครื่อง

บริการแนะนำ

การเปิดเผย

  • NordVPN

    Sponsored

    Strict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.

    Get NordVPN →

  • Cloudways

    Sponsored

    Managed cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.

    Try Cloudways →

ความคิดเห็นและคำถาม