🛠️ เครื่องมือในเบราว์เซอร์

เครื่องมือตรวจสอบความต่างสี

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

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

สร้างชุดสีที่เข้าถึงได้อย่างมั่นใจ

#000000
#f0f4f8

ดูตัวอย่าง

ข้อความปกติ

This is an example of normal body text that would appear on your website or application.

ข้อความขนาดใหญ่

This is an example of large text (18pt or 14pt bold).

"Good design is accessible design. Contrast is essential for readability."

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

19.00:1

0

คะแนน

ข้อความปกติ

AAA

ข้อความขนาดใหญ่

AAA

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

เคล็ดลับและข้อเสนอแนะ

  • Maintain a contrast ratio of at least 4.5:1 for normal text.
  • Use 3:1 or higher for large text (18pt or 14pt bold).
  • Consider using darker text on lighter backgrounds or vice versa.
  • For full WCAG AAA compliance, aim for a ratio of 7:1.
  • Adjust brightness or saturation slightly to improve contrast.

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

สี Tools

View All →

เครื่องมือแปลงสี HSV เป็น Pantone ฟรี

แปลงสี HSV (Hue, Saturation, Value) ให้เป็นสี Pantone ที่ใกล้เคียงที่สุดได้ทันที ค้นหาสี Pantone ที่สมบูรณ์แบบด้วยเครื่องมือจับคู่สีที่ครอบคลุมของเรา ซึ่งมีการเปรียบเทียบด้วยภาพและวิทยาศาสตร์สีที่แม่นยำ

เครื่องมือแปลงสี RGB เป็น Pantone ฟรี

แปลงสี RGB ให้เป็นสี Pantone ที่ใกล้เคียงที่สุดด้วยอัลกอริทึมจับคู่สีขั้นสูงของเรา เลือกดูสี Pantone ที่คัดสรรมาอย่างดี เปรียบเทียบความแตกต่างของสี และรับรหัสสีที่แม่นยำสำหรับโครงการออกแบบของคุณ

เครื่องมือเลือกสีจากรูปภาพออนไลน์

ดึงสีจากรูปภาพใดๆ ทางออนไลน์ได้ฟรี อัปโหลดรูปภาพ คลิกเพื่อเลือกสี และรับค่า HEX, RGB, HSL และ CMYK สร้างและส่งออกจานสีได้

เครื่องมือสร้างคอลลาจชุดสี

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

เครื่องมือสร้างจานสีออนไลน์ฟรี

สร้างจานสีที่สวยงามทางออนไลน์ด้วยเครื่องมือสร้างจานสีฟรีของเรา สร้างโทนสีที่กลมกลืนโดยใช้หลักการทฤษฎีสี หรือดึงสีจากรูปภาพ ส่งออกเป็นรูปแบบ CSS, SCSS, Tailwind, JSON, PDF และ PNG

เครื่องมือสร้างพาเลทสีไล่ระดับฟรี

สร้างสีไล่ระดับที่น่าทึ่งและสร้างชุดสีที่กำหนดเองได้ฟรีทางออนไลน์ เลือกสีเริ่มต้นและสีสิ้นสุด ปรับขนาดพาเลท และคัดลอกโค้ด CSS หรือรหัสสี Hex แต่ละสี เหมาะสำหรับการออกแบบเว็บไซต์ กราฟิกดีไซน์ และโปรเจกต์สร้างสรรค์

วิธีตรวจสอบความต่างสี

1

เลือกสีข้อความ

คลิกเครื่องมือเลือกสีแรกเพื่อเลือกสีข้อความของคุณ หรือป้อนรหัสเลขฐานสิบหกโดยตรง

2

เลือกสีพื้นหลัง

ใช้เครื่องมือเลือกสีที่สองเพื่อเลือกสีพื้นหลังสำหรับการทดสอบความต่างสี

3

ตรวจสอบผลลัพธ์ความต่างสี

ตรวจสอบอัตราส่วนความต่างสีที่คำนวณได้ และดูการให้คะแนน AA/AAA สำหรับข้อความปกติและข้อความขนาดใหญ่

4

ดูตัวอย่างการออกแบบของคุณ

ดูตัวอย่างแบบสดเพื่อดูว่าชุดสีของคุณมีลักษณะอย่างไรเมื่อใช้กับเนื้อหาข้อความจริง

คุณสมบัติหลัก

การทดสอบความต่างสีแบบเรียลไทม์

คำนวณอัตราส่วนความต่างสีได้ทันทีเมื่อคุณเลือกชุดสีข้อความและพื้นหลังที่แตกต่างกัน

การให้คะแนนตามมาตรฐาน WCAG

รับการให้คะแนน AA และ AAA สำหรับทั้งข้อความปกติและข้อความขนาดใหญ่ตามหลักเกณฑ์การเข้าถึงเนื้อหาเว็บ

แผงแสดงตัวอย่างแบบสด

ดูว่าชุดสีของคุณจะมีลักษณะอย่างไรเมื่อใช้กับข้อความตัวอย่างทั้งขนาดปกติและขนาดใหญ่

ตัวบ่งชี้คะแนนภาพ

ดูประสิทธิภาพความต่างสีของคุณด้วยแผนภูมิวงกลมที่เข้าใจง่าย แสดงคะแนนตั้งแต่ 0-100

เครื่องมือเลือกสีแบบโต้ตอบ

เลือกสีได้อย่างง่ายดายด้วยเครื่องมือเลือกสีในตัวสำหรับทั้งสีข้อความและสีพื้นหลัง

เคล็ดลับการเข้าถึง

รับคำแนะนำที่เป็นประโยชน์สำหรับการปรับปรุงความต่างสีและการปฏิบัติตามมาตรฐานการเข้าถึง

เครื่องมือตรวจสอบความต่างสีคืออะไร?

เครื่องมือตรวจสอบความต่างสีคือเครื่องมือที่ใช้วัดความแตกต่างของความสว่างระหว่างสีข้อความและสีพื้นหลัง โดยจะคำนวณอัตราส่วนความต่างสีตามมาตรฐาน WCAG (Web Content Accessibility Guidelines) เพื่อให้แน่ใจว่าเนื้อหาสามารถอ่านได้สำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น รวมถึงผู้ตาบอดสีและผู้ที่มีสายตาเลือนราง

ทำไมถึงควรใช้เครื่องมือตรวจสอบความต่างสีของเรา?

1

การปฏิบัติตาม WCAG

มั่นใจว่าการออกแบบของคุณเป็นไปตามมาตรฐานการเข้าถึงสากลด้วยการให้คะแนน AA และ AAA ที่แม่นยำ

2

ข้อเสนอแนะแบบเรียลไทม์

ดูผลลัพธ์ทันทีเมื่อคุณปรับสี ทำให้ง่ายต่อการค้นหาชุดค่าผสมที่ตรงตามข้อกำหนด

3

ระบบคะแนนภาพ

ทำความเข้าใจประสิทธิภาพความต่างสีได้อย่างรวดเร็วด้วยระบบการให้คะแนน 0-100 ที่เข้าใจง่ายของเรา

4

ไม่ต้องติดตั้ง

ทดสอบชุดสีได้ทันทีในเบราว์เซอร์ของคุณโดยไม่ต้องดาวน์โหลดซอฟต์แวร์ใดๆ

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

อัตราส่วนความต่างสีที่ดีควรเป็นเท่าไหร่?

สำหรับข้อความปกติ ควรตั้งเป้าหมายที่ 4.5:1 เป็นอย่างน้อยสำหรับการปฏิบัติตามมาตรฐาน AA หรือ 7:1 สำหรับ AAA ส่วนข้อความขนาดใหญ่ (18pt หรือ 14pt ตัวหนา) ต้องการ 3:1 สำหรับ AA หรือ 4.5:1 สำหรับ AAA

การให้คะแนน AA และ AAA หมายถึงอะไร?

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

อัตราส่วนความต่างสีคำนวณอย่างไร?

อัตราส่วนความต่างสีคำนวณโดยใช้ค่าความสว่างสัมพัทธ์ของสีตามที่กำหนดโดยหลักเกณฑ์ WCAG มีค่าตั้งแต่ 1:1 (ไม่มีความต่างสี) ถึง 21:1 (ความต่างสีสูงสุด)

ข้อความขนาดใหญ่หมายถึงอะไร?

ข้อความขนาดใหญ่หมายถึงข้อความขนาด 18 พอยต์ (24px) หรือใหญ่กว่า หรือ 14 พอยต์ (18.66px) หรือใหญ่กว่าหากเป็นตัวหนา ข้อความขนาดใหญ่มีข้อกำหนดความต่างสีที่ยืดหยุ่นกว่า

ทำไมความต่างสีจึงสำคัญ?

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

ฉันสามารถใช้เครื่องมือนี้กับรูปแบบสีใดก็ได้หรือไม่?

เครื่องมือนี้รองรับรหัสสีฐานสิบหก (hex color codes) คุณสามารถแปลงจากรูปแบบอื่น ๆ (RGB, HSL ฯลฯ) เป็นรหัสเลขฐานสิบหกได้โดยใช้เครื่องมือแปลงออนไลน์หรือเครื่องมือออกแบบ