Contrast Checker ช่วยคำนวณอัตราส่วนความต่างสี (Contrast Ratio) ตามมาตรฐาน WCAG 2.1 ระหว่างสองสี และประเมินผลตามเกณฑ์ AA/AAA สำหรับทั้งข้อความขนาดปกติและขนาดใหญ่ มีพรีวิวสดๆ ให้เห็นการแสดงผลของข้อความบนสีที่เลือก และมีปุ่มสำหรับดูดสีพื้นหลังของหน้าเว็บปัจจุบัน
การเข้าถึงข้อมูล (Accessibility) เป็นสิ่งสำคัญมากขึ้นเรื่อยๆ — การปฏิบัติตามมาตรฐาน WCAG เป็นข้อกำหนดทางกฎหมายในหลายประเทศ และแม้จะไม่มีกฎหมายบังคับ ความต่างสีที่ต่ำเกินไปก็ทำให้ผู้ใช้ใช้งานลำบาก Contrast Checker จะบอกคุณได้ทันทีว่าสีสองสีที่คุณเลือกเป็นไปตามมาตรฐาน WCAG หรือไม่ โดยเลือกสีข้อความและพื้นหลังผ่าน Color Picker หรือวางค่า Hex; เครื่องมือจะคำนวณอัตราส่วนความต่างสีโดยใช้สูตร Luminance อย่างเป็นทางการของ WCAG และประเมินผลตามสี่ระดับ: AA ปกติ (≥4.5:1), AA ใหญ่ (≥3:1), AAA ปกติ (≥7:1) และ AAA ใหญ่ (≥4.5:1) แต่ละระดับจะแสดงป้าย Pass/Fail ที่ชัดเจน มีการแสดงพรีวิวแบบสดทั้งข้อความขนาดใหญ่และปกติบนสีที่เลือกเพื่อให้คุณเห็นผลลัพธ์ที่แท้จริง และมีปุ่มสำหรับดูดสีพื้นหลังของหน้าเว็บปัจจุบัน — มีประโยชน์เมื่อต้องการตรวจสอบว่าคู่สีบนเว็บไซต์จริงผ่านเกณฑ์หรือไม่ การทำงานทั้งหมดเกิดขึ้นในเบราว์เซอร์ ไม่มีการอัปโหลดข้อมูล
ใช้สูตร Luminance อย่างเป็นทางการของ WCAG ในการคำนวณอัตราส่วนความต่างสี ผลลัพธ์มีความแม่นยำและตรงกับเครื่องมือตรวจสอบการเข้าถึงมาตรฐานอื่นๆ
แสดงผล Pass/fail สำหรับ AA ปกติ (≥4.5:1), AA ใหญ่ (≥3:1), AAA ปกติ (≥7:1) และ AAA ใหญ่ (≥4.5:1) ในรูปแบบตาราง
แสดงผลข้อความขนาดใหญ่และปกติบนสีที่คุณเลือก เพื่อให้คุณเห็นผลทางสายตาไปพร้อมๆ กับตัวเลขที่คำนวณได้
ดูดสีพื้นหลัง (Body background) ของหน้าปัจจุบันในคลิกเดียว — มีประโยชน์สำหรับการทดสอบคู่สีในสถานการณ์จริง
พิมพ์ค่า Hex หรือใช้ Color Picker ของระบบ โดยค่าจะซิงก์กันทั้งสองทางเมื่อมีการแก้ไขส่วนใดส่วนหนึ่ง
สลับสีข้อความและพื้นหลังในคลิกเดียว — มีประโยชน์เมื่อต้องการตรวจสอบธีมแบบกลับสีหรือสถานะ Hover
ก่อนจะสรุปชุดสี (Palette) ให้ตรวจสอบสีข้อความเทียบกับพื้นหลังเพื่อให้แน่ใจว่าเป็นไปตามมาตรฐาน WCAG AA — เพื่อเลี่ยงการแก้ไขงานในภายหลัง
ใช้ฟีเจอร์ "ดูดสีพื้นหลัง" บนเว็บจริง แล้ววางสีข้อความที่ใช้อยู่ — หาจุดที่ผิดมาตรฐาน Accessibility ได้ในเวลาไม่กี่นาทีโดยไม่ต้องเปิด Lighthouse
เมื่อแบรนด์เลือกสีที่อาจไม่ผ่านเกณฑ์การเข้าถึง ให้ใช้เครื่องมือนี้เพื่อหาสีที่ใกล้เคียงที่สุดที่ผ่านเกณฑ์ (เช่น เฉดที่เข้มขึ้นหรืออ่อนลงเล็กน้อย)
ยืนยันว่าสีในสถานะ Hover/Active/Disabled ยังคงผ่านเกณฑ์ความต่างสี ไม่ใช่แค่สีในสถานะปกติเท่านั้น
ธีมมืดมักมีปัญหาความต่างสีของข้อความสีเทาบนพื้นหลังสีเทา ให้ตรวจสอบสีเทาที่เข้มที่สุดเทียบกับพื้นหลังที่เข้มที่สุดเพื่อหาจุดบกพร่องเหล่านี้
คลิกไอคอน Contrast ใน DevSuite Pro dock แผงควบคุมจะเปิดขึ้นพร้อมช่องเลือกสีข้อความและพื้นหลัง
ใช้ Color Picker หรือวางค่า Hex สำหรับแต่ละสี พรีวิวจะอัปเดตทันทีเมื่อมีการเปลี่ยนสี
ตัวเลขขนาดใหญ่ (เช่น 4.8:1) คืออัตราส่วนความต่างสี ยิ่งสูงยิ่งดี โดยค่า 3 คือค่าต่ำสุดที่ยอมรับได้ และ 4.5 คือเป้าหมายสำหรับข้อความปกติ
ป้าย Pass/fail สำหรับ AA และ AAA ทั้งขนาดปกติและขนาดใหญ่ จะช่วยให้เห็นว่าคู่สีของคุณผ่านเกณฑ์ระดับใดบ้าง
หากไม่ผ่าน ให้ลองปรับสีให้เข้มขึ้นหรืออ่อนลงจนกว่าระดับเป้าหมายจะแสดงสถานะ Pass
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 64 รายการสำหรับเบราว์เซอร์ของคุณ
