ตัวตรวจสอบความแตกต่าง – Contrast Checker

เครื่องมือตรวจสอบความคอนทราสต์นี้จะตรวจสอบความคอนทราสต์ของสีตามมาตรฐาน WCAG และ APCA เพื่อให้เป็นไปตามมาตรฐาน ADA…

✅ สิ่งที่คุณจะได้รับจากเครื่องมือตรวจสอบความคอนทราสต์นี้: - อัตราส่วนความคมชัดตามมาตรฐาน WCAG 2.2 และ APCA Lc - ส่วนประกอบที่มีปัญหาซึ่งถูกเน้นไว้ในหน้าเว็บ - กฎ CSS ที่สร้างสีต่างๆ โดยติดตามผ่านแผนที่ต้นฉบับ (ถ้ามี) - มีเครื่องมือเลือกสีในตัว พร้อมตัววิเคราะห์ความแตกต่างของสี และคำแนะนำสีทางเลือกอื่นๆ - ดูตัวอย่างการแก้ไขแบบเรียลไทม์ - ส่งออกการแก้ไขไปยังไฟล์ CSS (พร้อมคำอธิบายระบุตำแหน่งแหล่งที่มา) 🔍 สร้างขึ้นเพื่อตรวจสอบความสอดคล้องของสีบนเว็บไซต์ โดยสามารถตรวจสอบสถานะเสมือน (pseudo-states), เงาของ DOM (shadow DOM), iframe ที่มีต้นกำเนิดเดียวกัน (same-origin iframe) และข้อความที่ทับซ้อนบนรูปภาพและไล่ระดับสี — ไม่ใช่แค่พื้นหลังเรียบๆ เท่านั้น ⚠️ ต้องได้รับอนุญาตในการดีบักเกอร์ การตรวจสอบความแตกต่างของสีนี้ทำได้เฉพาะผ่าน Chrome DevTools Protocol ซึ่งต้องได้รับอนุญาต 'ดีบักเกอร์' เมื่อเชื่อมต่อแล้ว Chrome จะแสดงแถบข้อมูลในทุกแท็บและจะไม่ซ่อนเมื่อยกเลิกการเชื่อมต่อ ⚡ ขั้นตอนการทำงานที่ได้รับการปรับแต่งอย่างดีเยี่ยม: • ดูองค์ประกอบทั้งหมดที่มีปัญหาด้านการเข้าถึงสีที่ถูกเน้นไว้ได้อย่างรวดเร็ว • การแสดงตัวอย่างจะเปลี่ยนแปลงทันที โดยอัตราส่วนความคมชัดและผลการตัดสินจะถูกคำนวณใหม่ • ใช้ CSS แบบกำหนดเองในแท็บสไตล์ชีต ปัญหาที่ได้รับผลกระทบจะถูกทำเครื่องหมายไว้ในรายการ • หากต้องการตรวจสอบความตัดกันของสีด้วยตนเอง ให้ใช้เครื่องมือเลือกสีในตัว: คลิกซ้ายเพื่อเลือกสีพื้นหน้า คลิกขวาเพื่อเลือกสีพื้นหลัง และอัตราส่วนจะอัปเดตทันที • ใช้แท็บ "การยกเว้น" เพื่อซ่อนทุกอย่างยกเว้นองค์ประกอบที่คุณกำลังแก้ไข 📐 เกณฑ์ที่ใช้ในการตัดสิน เครื่องมือตรวจสอบอัตราส่วนความคมชัดนี้จะทดสอบการเข้าถึงสีตามข้อกำหนด WCAG และ APCA APCA Lc จะถูกประเมินตามเกณฑ์ Bridge-PCA ซึ่งเข้มงวดกว่าอัตราส่วน WCAG ที่ตรงกัน ดังนั้นการผ่านเกณฑ์ Bridge-PCA จึงหมายความว่าผ่านเกณฑ์ WCAG เสมอ 🔬 APCA คืออะไร? APCA (Accessible Perceptual Contrast Algorithm) คือแบบจำลองที่ติดตามวิธีการอ่านข้อความบนหน้าจอของผู้คน คู่สีสองคู่ที่มีอัตราส่วน WCAG เท่ากันอาจดูแตกต่างกันอย่างเห็นได้ชัด และค่า APCA LC (ความแตกต่างของความสว่าง) จะสะท้อนให้เห็นถึงความแตกต่างนั้น กล่าวคือ คู่สีอาจผ่านเกณฑ์ WCAG แต่ยังอ่านยาก โปรแกรมตรวจสอบการเข้าถึงสีของเว็บไซต์นี้จะคำนวณทั้งสองค่านี้ 🚧 ข้อจำกัด: 1. เช่นเดียวกับเครื่องมือตรวจสอบการเข้าถึงเว็บไซต์อื่นๆ เครื่องมือนี้ให้ค่าประมาณตามความพยายามที่ดีที่สุด ไม่ใช่ใบรับรองการปฏิบัติตามมาตรฐาน 2. การตรวจสอบครอบคลุมเฉพาะข้อความเท่านั้น การตรวจสอบองค์ประกอบที่ไม่ใช่ข้อความ (WCAG 1.4.11) อยู่ในแผนงาน 3. จะไม่ทำการตรวจสอบ iframe ที่มาจากโดเมนอื่น 4. พื้นหลังและแอนิเมชันที่ซับซ้อนจะถูกสุ่มตัวอย่างที่จุดเชิงพื้นที่และเวลาที่มีจำนวนจำกัด อัตราส่วนของตัวอย่างที่แย่ที่สุดจะถูกรายงาน แต่ก็อาจยังมองโลกในแง่ดีเกินไป นอกจากนี้ ตัวสุ่มตัวอย่างยังอาจถูกหลอกโดยสิ่งผิดปกติในการแสดงผลได้อีกด้วย 5. เว็บไซต์ที่มีการเปลี่ยนแปลงอย่างรวดเร็วอาจก่อให้เกิดปัญหาที่ไม่จำเป็นได้ 6. โปรแกรมตรวจสอบความเท่าเทียมของสีนี้ไม่ได้ทำการแปลงข้อความเป็นภาพ (OCR) โดยอัตโนมัติ โปรดทดสอบภาพที่มีข้อความที่มีความหมายโดยใช้เครื่องมือเลือกสีที่ให้มาด้วย 🔒 ความเป็นส่วนตัวและการอนุญาต ▸ ทำงานบนเครื่องของคุณเอง ข้อมูลเว็บเพจจะไม่ถูกส่งออกจากเครื่องของคุณ ▸ เฉพาะ 'activeTab' เท่านั้น: สคริปต์การวิเคราะห์จะถูกแทรกเมื่อคุณคลิกไอคอนบนแถบเครื่องมือ ▸ ต้องมีสิทธิ์ 'debugger' เพื่อเข้าถึง Shadow DOM และ iframe, ติดตามซอร์สโค้ด CSS และสุ่มตัวอย่างพื้นหลังที่ซับซ้อน 🧮 รายละเอียดความแม่นยำ ข้อความโปร่งแสงและความทึบแสงของพื้นหลังได้รับการจัดการอย่างถูกต้อง: พื้นหน้าจะถูกรวมเข้ากับพื้นหลังจริงก่อนที่จะวัดความสว่าง ดังนั้นอัตราส่วนที่รายงานจึงตรงกับสิ่งที่ผู้ใช้เห็นจริง ฟังก์ชันสีช่วงกว้าง — oklch, lab, lch, color(display-p3) — ก็ได้รับการรองรับเช่นกัน โดยจะถูกจำกัดไว้ที่ sRGB เมื่ออยู่นอกช่วงสีที่กำหนด 🎨 ข้อความทับรูปภาพและไล่ระดับสี แตกต่างจากเครื่องมือที่คล้ายกันส่วนใหญ่ เครื่องมือนี้จะไม่ละทิ้งพื้นหลังที่ไม่เรียบ หรือเชื่อถือสิ่งที่ 'getComputedStyle' / 'CSS.getBackgroundColors' รายงาน มันจะตรวจสอบลำดับการแสดงผลของเบราว์เซอร์เพื่อสร้างพื้นหลังที่แท้จริง — ความทึบแสง โหมดการผสมสี การไล่ระดับสีเชิงเส้น ตัวกรองพื้นหลัง — และหากยังไม่เพียงพอ เครื่องมือปรับความคมชัดของสีนี้จะสุ่มตัวอย่างพิกเซลที่แสดงผล ณ ตำแหน่งของข้อความ ❓ ถาม-ตอบ 📌 เหตุใดบางครั้งคู่สีเดียวกันจึงได้รับการประเมินที่แตกต่างกันภายใต้มาตรฐาน WCAG และ APCA? ↳ WCAG วัดความสว่าง ส่วน APCA วัดความแตกต่างของภาพที่รับรู้ได้ จอภาพที่มีอัตราส่วน 4.5:1 ขึ้นไป อาจยังไม่ผ่านเกณฑ์ Lc ของ Bridge-PCA ซึ่งเป็นมาตรฐานที่เข้มงวดกว่า 📌 APCA จะมาแทนที่ WCAG หรือไม่? ↳ ไม่ใช่ — APCA ไม่ใช่สิ่งที่จะมาทดแทน แต่เป็นเครื่องมือตรวจสอบความแตกต่างที่ให้ความเห็นที่สองซึ่งมีประโยชน์ เครื่องมือตรวจสอบความแตกต่างนี้จะแสดงผลทั้งสองอย่าง 📌 ฉันสามารถสแกนไฟล์ในเครื่องหรือเซิร์ฟเวอร์สำหรับนักพัฒนาของฉันด้วยเครื่องมือตรวจสอบการเข้าถึงนี้ได้หรือไม่? ↳ ใช่แล้ว เปิดใช้งาน "อนุญาตการเข้าถึง URL ไฟล์" ในการตั้งค่าส่วนขยาย เปิด URL file:// หรือ localhost แล้วคลิกไอคอนบนแถบเครื่องมือ เฉพาะ chrome://, Chrome Web Store และรูปแบบที่ถูกจำกัดอื่นๆ เท่านั้นที่จะถูกข้ามไป 📌 เครื่องมือนี้รับรองว่าสอดคล้องกับมาตรฐาน ADA หรือไม่? ↳ ไม่ใช่ค่ะ โปรแกรมนี้ตรวจสอบเฉพาะความแตกต่างของสี ซึ่งเป็นเพียงแง่มุมหนึ่งของการเข้าถึงได้ การปฏิบัติตามกฎหมาย ADA เป็นข้อกำหนดทางกฎหมายที่ครอบคลุมมาตรฐานและเกณฑ์หลายประการ (ความหมาย การเข้าถึงด้วยแป้นพิมพ์ ข้อความแสดงแทน คำบรรยายภาพ และอื่นๆ) และควรได้รับการประเมินโดยผู้เชี่ยวชาญที่มีคุณสมบัติเหมาะสม