WCAG Contrast Checker
WCAG Contrast Checker — ทำงานในเบราว์เซอร์ ไม่บันทึกข้อมูล
คอนทราสต์สี WCAG
กรอกค่า แล้วกดคำนวณ
วิธีใช้
- ใส่ HEX ตัวอักษร (พื้นหน้า) และ HEX พื้นหลัง ค่าเริ่มต้น #111111 และ #ffffff
- กด คำนวณ เพื่อดูตัวอย่างประโยค อัตราส่วนคอนทราสต์ และการจัดอันดับข้อความปกติ / ข้อความใหญ่
- กลับสี กด สลับสี แล้วคำนวณอีกครั้ง
- ถ้าอันดับไม่ผ่าน ให้ทำให้ HEX มืดหรือสว่างขึ้นเล็กน้อยแล้วคำนวณใหม่
- รีเซ็ต คืนคู่ขาวดำเริ่มต้น รองรับเฉพาะ HEX ทึบ
แนวคิดหลัก
ตรวจคอนทราสต์ WCAG เป็นตัวชี้การเข้าถึงเว็บว่าข้อความเนื้อหาและปุ่มโดดจากพื้นหลังแค่ไหน อัตราส่วนคอนทราสต์คำนวณจากความสว่างสัมพัทธ์แล้วเทียบกับ WCAG 2.x ข้อความปกติคือ AA 4.5:1 และ AAA 7:1 ข้อความใหญ่ (ราว 18 พอยต์หรือ 14 พอยต์ตัวหนา) คือ AA 3:1 และ AAA 4.5:1 เป็นตัวตรวจคอนทราสต์ที่แสดงอัตราส่วน WCAG 2 และ AA/AAA ว่าข้อความเนื้อหาและปุ่มแยกจากพื้นหลังได้หรือไม่ เป็นตัวตรวจดูเร็วอัตราส่วนคอนทราสต์และ AA/AAA ของสีเนื้อหาเทียบ HEX พื้นหลังในการตรวจการเข้าถึง ไม่ใช่ข้อสรุปทางกฎหมายสุดท้าย
ผลเป็นการคำนวณอ้างอิง ไม่แทนที่การตรวจการเข้าถึงสุดท้ายหรือการปฏิบัติตามกฎหมาย สีกึ่งโปร่งใสที่มีแอลฟา ไล่สี และข้อความบนรูปอาจต้องการมากกว่าสูตรนี้ คำนวณเฉพาะในเบราว์เซอร์ สูตรความสว่างสัมพัทธ์สมมติ HEX sRGB ทึบ เลเยอร์โปร่งและตัวอักษรบนรูปอาจต่างจากจริง เกณฑ์ข้อความใหญ่กับข้อความปกติต่างกัน จึงคำนวณสีหัวข้อกับสีเนื้อหาแยก
ตัวอย่าง
พื้นหน้า #111111 บนพื้นหลัง #ffffff ได้อัตราส่วนราว 19:1 ใกล้ AAA ทั้งข้อความปกติและใหญ่ เทาอ่อน #9ca3af บนขาวมักไม่ผ่าน AA สำหรับข้อความปกติ สลับสีทำให้พื้นมืดและเปลี่ยนความรู้สึกตัวอย่าง ข้อความ #2563eb บน #ffffff อาจตกช่วงกลาง เกือบผ่านหรือไม่ผ่าน AA ข้อความปกติ ลองน้ำเงินเข้มขึ้น ข้อความ #6b7280 บน #f9fafb อัตราส่วนต่ำ มักไม่ผ่านข้อความปกติ เปลี่ยนข้อความเป็น #111 ใกล้ AAA
ที่เกี่ยวข้อง: พาเลตสี · ตัวแปลงสี
คำถามที่พบบ่อย
เกณฑ์ข้อความใหญ่ WCAG ใช้อย่างไร
เกณฑ์ผ่อน 3:1 / 4.5:1 สำหรับ 18 พอยต์หรือ 14 พอยต์ตัวหนาแสดงในช่องข้อความใหญ่ ช่องนั้นคือเกณฑ์ผ่อนสำหรับหัวข้อและตั้งแต่ 18 พอยต์ สมมติ 18 พอยต์ / 14 พอยต์ตัวหนาใช้เฉพาะช่องข้อความใหญ่
อัตราส่วนคอนทราสต์ WCAG AAA คือเท่าไร
7:1 ขึ้นไปสำหรับข้อความปกติ และ 4.5:1 ขึ้นไปสำหรับข้อความใหญ่ AA คือ 4.5:1 และ 3:1 ตามลำดับ AAA คือ 7:1 สำหรับเนื้อหา จึงสีแบรนด์ซีดมักไม่ผ่าน พาสเทลแบรนด์มักพลาด AAA
HEX ที่มีแอลฟาโปร่งใสใช้ตรวจคอนทราสต์ได้ไหม
รองรับเฉพาะ HEX ทึบ ไม่รองรับความโปร่งใส ให้ใส่ HEX สุดท้ายที่ซ้อนแล้ว สำหรับโปร่ง ให้ซ้อนก่อนแล้วใส่ HEX
ประโยคใดใช้ในตัวอย่างคอนทราสต์
แสดงข้อความตัวอย่าง “Sample 가나다” ด้วยพื้นหน้าและพื้นหลังเดียวกัน ตัวอย่างเป็นประโยคตัวอย่าง อาจต่างจากขนาดคอมโพเนนต์จริง
การตรวจนี้รับประกันการปฏิบัติตามกฎหมายด้านการเข้าถึงไหม
เป็นการคำนวณอ้างอิง ตรวจสุดท้ายแยก อย่าถือเลขนี้เป็นผ่านกฎหมาย อย่าแทนเช็กลิสต์ตรวจด้วยเลขนี้เพียงอย่างเดียว
สลับพื้นหน้ากับพื้นหลังพร้อมกันได้ไหม
ปุ่มสลับสีสลับค่า HEX สองค่า กดคำนวณอีกครั้ง เทียบคู่โหมดมืดด้วยสลับสีได้เช่นกัน
ตรวจทานล่าสุด: 2026-09-04