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

กรอกสีข้อความและสีพื้นหลังเพื่อดูอัตราส่วนคอนทราสต์ตามมาตรฐาน WCAG และตรวจสอบระดับการผ่านเกณฑ์ AA และ AAA

สีข้อความ

สีพื้นหลัง

—อัตราส่วนคอนทราสต์

ข้อความปกติAA4.5:1—

ข้อความปกติAAA7:1—

ข้อความขนาดใหญ่AA3:1—

ข้อความขนาดใหญ่AAA4.5:1—

UI และกราฟิก3:1—

กรอกสีข้อความและสีพื้นหลังเพื่อตรวจสอบ

ทุกการตรวจสอบจะทำงานในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูลที่คุณกรอกไปยัง BroBroGo

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

ผลลัพธ์ระดับ AA และ AAA หมายถึงอะไร?

AA คือระดับมาตรฐานที่เว็บไซต์ส่วนใหญ่ตั้งเป้าหมายไว้ โดยต้องการอัตราส่วนอย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ส่วน AAA จะเข้มงวดกว่า โดยต้องการอัตราส่วน 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ โดยอัตราส่วนจะมีตั้งแต่ 1:1 (ไม่มีคอนทราสต์เลย) ไปจนถึง 21:1 (สีดำบนพื้นขาว)

ข้อความแบบใดที่นับว่าเป็นข้อความขนาดใหญ่?

ข้อความที่มีขนาดตั้งแต่ 18pt (ประมาณ 24px) ขึ้นไป หรือ 14pt (ประมาณ 18.5px) ขึ้นไปหากเป็นตัวหนา ข้อความขนาดใหญ่จะยังคงอ่านง่ายแม้มีอัตราส่วนคอนทราสต์ที่ต่ำกว่า ดังนั้นจึงผ่านเกณฑ์ AA ที่อัตราส่วน 3:1 และ AAA ที่ 4.5:1 แทนที่จะใช้เกณฑ์ที่เข้มงวดกว่าของข้อความขนาดปกติ

สามารถกรอกฟอร์แมตสีใดได้บ้าง?

คุณสามารถกรอกค่า Hex เช่น #1a1a1a, ค่า rgb() เช่น rgb(26, 26, 26) หรือค่า hsl() หรือจะคลิกที่จานสีเพื่อเลือกสีก็ได้ นอกจากนี้ยังมีปุ่มสลับสีเพื่อสลับระหว่างสีข้อความและสีพื้นหลังได้อย่างรวดเร็ว

เครื่องมือนี้ใช้เกณฑ์ WCAG 2 หรือวิธี APCA แบบใหม่?

เครื่องมือนี้ใช้สูตร WCAG 2.1 / 2.2 ซึ่งเป็นเกณฑ์มาตรฐานที่ใช้ในการตรวจสอบการเข้าถึง (Accessibility) ในปัจจุบัน ส่วน APCA เป็นวิธีใหม่ที่เน้นการรับรู้ทางสายตาซึ่งยังอยู่ระหว่างการร่างสำหรับ WCAG 3 แม้ว่าจะมีแนวโน้มที่ดีแต่ยังไม่ได้เป็นมาตรฐานบังคับใช้ ดังนั้นผลการทดสอบที่นี่จึงยังไม่ได้ใช้วิธีดังกล่าว

เขียนและตรวจสอบโดยทีมบรรณาธิการ BroBroGoอัปเดตล่าสุดเมื่อ: 2026-07-31

การทำงานของเครื่องมือตรวจสอบคอนทราสต์สี

เครื่องมือนี้ช่วยให้คุณสามารถกรอกสีข้อความและสีพื้นหลังเพื่อคำนวณอัตราส่วนคอนทราสต์ตามมาตรฐาน WCAG 2.1 / 2.2 เครื่องมือจะแสดงผลลัพธ์ว่าคู่สีที่คุณเลือกผ่านเกณฑ์การเข้าถึง (Accessibility) ในระดับ AA และ AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบ UI หรือไม่

เมื่อเริ่มต้นใช้งาน เครื่องมือจะกำหนดค่าสีเริ่มต้นไว้ที่ #4f46e5 สำหรับสีข้อความ และ #ffffff สำหรับสีพื้นหลัง ซึ่งจะได้อัตราส่วนคอนทราสต์อยู่ที่ 6.29 นอกจากนี้ คุณยังสามารถใช้ปุ่มสลับสีข้อความและสีพื้นหลังเพื่อสลับบทบาทของสีทั้งสองได้อย่างสะดวกรวดเร็ว

ข้อมูลนำเข้าที่รองรับ

ในการตรวจสอบคอนทราสต์ คุณต้องระบุข้อมูลสีในช่องนำเข้าสองช่อง ดังนี้:

สีข้อความ: ค่าสีของตัวอักษร
สีพื้นหลัง: ค่าสีของพื้นหลังที่อยู่ใต้ตัวอักษร

ทั้งสองช่องรองรับฟอร์แมตสีที่หลากหลาย ได้แก่ ค่า Hex (เช่น #1a1a1a), ค่า rgb() (เช่น rgb(26, 26, 26)) หรือค่า hsl()

หากคุณกรอกข้อมูลในรูปแบบที่ไม่ถูกต้อง เครื่องมือจะแสดงข้อความแจ้งเตือนข้อผิดพลาด:

หากสีข้อความไม่ถูกต้อง จะแสดงข้อความว่า "กรุณากรอกสีข้อความที่ถูกต้อง เช่น #1a1a1a หรือ rgb(26, 26, 26)"
หากสีพื้นหลังไม่ถูกต้อง จะแสดงข้อความว่า "กรุณากรอกสีพื้นหลังที่ถูกต้อง เช่น #ffffff หรือ rgb(255, 255, 255)"

การแสดงผลลัพธ์และการประเมินผล

เครื่องมือจะคำนวณและแสดงผลลัพธ์ต่าง ๆ ออกมาดังนี้:

อัตราส่วนคอนทราสต์: แสดงผลลัพธ์การคำนวณในรูปแบบ "X:1" โดยมีค่าตั้งแต่ 1:1 (ไม่มีคอนทราสต์เลย) ไปจนถึง 21:1 (สีดำบนพื้นขาว)
ข้อความปกติ: แสดงสถานะ "ผ่าน" หรือ "ไม่ผ่าน" สำหรับเกณฑ์ระดับ AA และ AAA
ข้อความขนาดใหญ่: แสดงสถานะ "ผ่าน" หรือ "ไม่ผ่าน" สำหรับเกณฑ์ระดับ AA และ AAA
UI และกราฟิก: แสดงสถานะ "ผ่าน" หรือ "ไม่ผ่าน" โดยอ้างอิงจากเกณฑ์ขั้นต่ำเพียงค่าเดียวที่ 3:1 ซึ่งในแถวนี้จะไม่มีการแยกความแตกต่างระหว่างระดับ AA และ AAA (แสดงผลลัพธ์เดียว)
คำตัดสิน: ข้อความสรุปผลการประเมินระดับสูงสุดที่ผ่านเกณฑ์ ได้แก่:
- "ผ่านเกณฑ์ AA และ AAA สำหรับข้อความปกติ"
- "ผ่านเกณฑ์ AA สำหรับข้อความปกติ"
- "ผ่านเกณฑ์ AA สำหรับข้อความขนาดใหญ่เท่านั้น"
- "ต่ำกว่าเกณฑ์ขั้นต่ำของ AA — โปรดเพิ่มคอนทราสต์"

เกณฑ์การวัดผลตามมาตรฐาน WCAG

การประเมินผลของเครื่องมืออ้างอิงตามสูตรและกฎเกณฑ์ของมาตรฐาน WCAG 2.1 / 2.2 ซึ่งมีรายละเอียดข้อกำหนดดังนี้:

ข้อความปกติ: ระดับ AA ต้องการอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 ส่วนระดับ AAA ต้องการอัตราส่วนอย่างน้อย 7:1
ข้อความขนาดใหญ่: ระดับ AA ต้องการอัตราส่วนคอนทราสต์อย่างน้อย 3:1 ส่วนระดับ AAA ต้องการอัตราส่วนอย่างน้อย 4.5:1 โดยข้อความขนาดใหญ่หมายถึง ข้อความที่มีขนาดตั้งแต่ 18pt (ประมาณ 24px) ขึ้นไป หรือขนาดตั้งแต่ 14pt (ประมาณ 18.5px) ขึ้นไปหากเป็นตัวหนา
UI และกราฟิก: กำหนดเกณฑ์ขั้นต่ำไว้ที่อัตราส่วนอย่างน้อย 3:1 เพียงเกณฑ์เดียว

ความเป็นส่วนตัวและการประมวลผลข้อมูล

ทุกการตรวจสอบคอนทราสต์สีจะทำงานและประมวลผลภายในเบราว์เซอร์ของคุณโดยตรง และไม่มีการอัปโหลดข้อมูลใด ๆ ที่คุณกรอกไปยัง BroBroGo

กลุ่มผู้ใช้งานที่เหมาะสม

นักออกแบบ (Designers): สำหรับใช้ตรวจสอบความสามารถในการอ่านออกเขียนได้ของข้อความและองค์ประกอบต่าง ๆ ในงานออกแบบ
นักพัฒนา (Developers): สำหรับใช้ตรวจสอบและควบคุมให้การพัฒนาเว็บไซต์เป็นไปตามมาตรฐานการเข้าถึง
ทีมสร้างสรรค์เนื้อหา (Content teams): สำหรับใช้ตรวจสอบคอนทราสต์ของสีในสื่อและเนื้อหาต่าง ๆ เพื่อความถูกต้องชัดเจน

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

ผลลัพธ์ระดับ AA และ AAA หมายถึงอะไร? AA คือระดับมาตรฐานที่เว็บไซต์ส่วนใหญ่ตั้งเป้าหมายไว้ โดยต้องการอัตราส่วนอย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ส่วน AAA จะเข้มงวดกว่า โดยต้องการอัตราส่วน 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ โดยอัตราส่วนจะมีตั้งแต่ 1:1 (ไม่มีคอนทราสต์เลย) ไปจนถึง 21:1 (สีดำบนพื้นขาว)

ข้อความแบบใดที่นับว่าเป็นข้อความขนาดใหญ่? ข้อความที่มีขนาดตั้งแต่ 18pt (ประมาณ 24px) ขึ้นไป หรือ 14pt (ประมาณ 18.5px) ขึ้นไปหากเป็นตัวหนา ข้อความขนาดใหญ่จะยังคงอ่านง่ายแม้มีอัตราส่วนคอนทราสต์ที่ต่ำกว่า ดังนั้นจึงผ่านเกณฑ์ AA ที่อัตราส่วน 3:1 และ AAA ที่ 4.5:1 แทนที่จะใช้เกณฑ์ที่เข้มงวดกว่าของข้อความขนาดปกติ

สามารถกรอกฟอร์แมตสีใดได้บ้าง? คุณสามารถกรอกค่า Hex เช่น #1a1a1a, ค่า rgb() เช่น rgb(26, 26, 26) หรือค่า hsl() หรือจะคลิกที่จานสีเพื่อเลือกสีก็ได้ นอกจากนี้ยังมีปุ่มสลับสีเพื่อสลับระหว่างสีข้อความและสีพื้นหลังได้อย่างรวดเร็ว

เครื่องมือนี้ใช้เกณฑ์ WCAG 2 หรือวิธี APCA แบบใหม่? เครื่องมือนี้ใช้สูตร WCAG 2.1 / 2.2 ซึ่งเป็นเกณฑ์มาตรฐานที่ใช้ในการตรวจสอบการเข้าถึง (Accessibility) ในปัจจุบัน ส่วน APCA เป็นวิธีใหม่ที่เน้นการรับรู้ทางสายตาซึ่งยังอยู่ระหว่างการร่างสำหรับ WCAG 3 แม้ว่าจะมีแนวโน้มที่ดีแต่ยังไม่ได้เป็นมาตรฐานบังคับใช้ ดังนั้นผลการทดสอบที่นี่จึงยังไม่ได้ใช้วิธีดังกล่าว