ตัวตรวจสอบความคมชัดของสี
ป้อนสีพื้นหน้าและสีพื้นหลัง ตัวตรวจสอบจะคืนอัตราส่วนคอนทราสต์ WCAG (1:1 ถึง 21:1) พร้อมผลผ่าน/ไม่ผ่านตามเกณฑ์ WCAG 2.1 AA และ AAA สำหรับข้อความปกติ ข้อความขนาดใหญ่ และองค์ประกอบที่ไม่ใช่ข้อความ ภายในใช้สูตรความสว่างสัมพัทธ์ของ WCAG ซึ่งเป็นคณิตศาสตร์ง่ายๆ แต่สำคัญมากต่อการเข้าถึง แก้ไขการไม่ผ่านด้วยการปรับความสว่างจนอัตราส่วนเกินเกณฑ์ที่คุณต้องการ
คำนวณอัตราส่วนคอนทราสต์อย่างไร
-
1
ป้อนสีสองสี
HEX 3 หรือ 6 หลัก สำหรับทั้งสองสี มีเครื่องมือเลือกสีสำหรับแต่ละสี
-
2
คำนวณความสว่างสัมพัทธ์ของแต่ละสี
L = 0.2126·R + 0.7152·G + 0.0722·B โดยแต่ละช่องสีถูกแปลงเชิงเส้นจาก sRGB
-
3
อัตราส่วนคอนทราสต์
(L_สว่างกว่า + 0.05) / (L_มืดกว่า + 0.05) อัตราส่วนอยู่ระหว่าง 1:1 ถึง 21:1
-
4
ป้ายผ่าน/ไม่ผ่าน
AA (4.5:1 สำหรับข้อความปกติ, 3:1 สำหรับข้อความใหญ่/UI), AAA (7:1 สำหรับข้อความปกติ, 4.5:1 สำหรับข้อความใหญ่) ข้อความขนาดใหญ่ = 18pt ขึ้นไปแบบปกติ หรือ 14pt ขึ้นไปแบบหนา
เกณฑ์คอนทราสต์ WCAG
| ประเภทเนื้อหา | เกณฑ์ AA | เกณฑ์ AAA |
|---|---|---|
| ข้อความปกติ | 4.5:1 | 7:1 |
| ข้อความขนาดใหญ่ (18pt ขึ้นไปแบบปกติ หรือ 14pt ขึ้นไปแบบหนา) | 3:1 | 4.5:1 |
| ไม่ใช่ข้อความ (ส่วนประกอบ UI, วงแหวนโฟกัส) | 3:1 | - |
| ข้อความประกอบ (ตกแต่ง, ปิดใช้งาน, โลโก้) | ได้รับการยกเว้น | ได้รับการยกเว้น |
“ข้อความขนาดใหญ่” หมายถึงความหนาปกติ 18pt ขึ้นไป (ประมาณ 24px ใน CSS) หรือแบบหนา 14pt ขึ้นไป (ประมาณ 19px หนา)
ตัวอย่างคอนทราสต์
| คู่สี | อัตราส่วน | AA ปกติ | AA ใหญ่ | AAA ปกติ |
|---|---|---|---|---|
| ดำบนขาว | 21:1 | ผ่าน | ผ่าน | ผ่าน |
| #333 บนขาว | 12.6:1 | ผ่าน | ผ่าน | ผ่าน |
| #666 บนขาว | 5.7:1 | ผ่าน | ผ่าน | ไม่ผ่าน |
| #888 บนขาว | 3.5:1 | ไม่ผ่าน | ผ่าน | ไม่ผ่าน |
| #AAA บนขาว | 2.3:1 | ไม่ผ่าน | ไม่ผ่าน | ไม่ผ่าน |
| ขาวบน #1976D2 (Material blue 700) | 4.6:1 | ไม่ผ่าน | ผ่าน | ไม่ผ่าน |
| ขาวบน #2196F3 (Material blue 500) | 3.1:1 | ไม่ผ่าน (ปกติ) | ผ่าน | ไม่ผ่าน |
ข้อผิดพลาดด้านการเข้าถึงที่พบบ่อย
- ข้อความเนื้อหาสีเทาบนพื้นขาว ที่ #999 หรืออ่อนกว่า ไม่ผ่าน AA ใช้ #767676 หรือเข้มกว่าสำหรับข้อความเนื้อหาบนพื้นขาว
- ลิงก์สีน้ำเงินบนพื้นเทา: มักไม่ผ่านเพราะทั้งสองสีมีความสว่างระดับกลาง
- ข้อความสีขาวบนสีแบรนด์: ผ่านเมื่อใช้เฉดเข้ม (≥ 4.5:1) แต่ไม่ผ่านเมื่อใช้สีแบรนด์โทนกลาง ใช้ข้อความใหญ่ขึ้นหรือสีแบรนด์เข้มขึ้น
- ข้อความตัวยึด (placeholder) มักมีความคมชัดต่ำเพื่อบอกใบ้ แต่ WCAG ยังคงบังคับใช้หากผู้ใช้ต้องอ่านข้อความนั้น
- สถานะปิดใช้งาน: WCAG 2.2 กำหนดให้ข้อความที่ปิดใช้งานต้องมีคอนทราสต์ 3:1 เทียบกับพื้นหลังของตัวควบคุม เว้นแต่สถานะนั้นจะสื่อด้วยวิธีอื่น
สิ่งที่ WCAG ไม่บอกคุณ
- WCAG 2.x ใช้สูตรจากปี 1988 APCA สมัยใหม่ (อัลกอริทึมคอนทราสต์การรับรู้ขั้นสูง) สะท้อนความอ่านง่ายที่รับรู้ได้ดีกว่า แต่ยังไม่ใช่เกณฑ์ทางกฎหมาย ปรับค่าสูงเกินค่าต่ำสุดของ WCAG เล็กน้อยเพื่อรองรับ APCA และกรณีขอบ
- คอนทราสต์ไม่ใช่มิติเดียวของการเข้าถึง อัตราส่วน 21:1 ไม่มีความหมายหากฟอนต์มีขนาด 9px ระยะห่างบรรทัดแน่นเกินไป หรือใช้สีแดง-เขียวสื่อความหมาย
ปรับปรุงคู่สีที่ไม่ผ่าน
- พื้นหน้าที่สว่างกว่า บนพื้นหลังเข้ม หรือพื้นหน้าที่เข้มกว่าบนพื้นหลังสว่าง
- เพิ่มขนาดหรือความหนาของฟอนต์ เกณฑ์ข้อความขนาดใหญ่ต่ำกว่า
- เพิ่มพื้นหลัง ด้านหลังข้อความที่อยู่บนรูปภาพ (โอเวอร์เลย์, เกรเดียนต์)
- อย่าแก้คอนทราสต์ด้วยการจางไปเป็นสีเทาที่ก็ยังไม่ผ่าน ปรับจนกว่าจะถึง AA
ตรวจสอบซ้ำหลังการปรับแต่ละครั้ง เครื่องมือคำนวณอัตราส่วนใหม่แบบทันที การเปลี่ยนความสว่างเพียงเล็กน้อยก็พลิกผลได้อย่างรวดเร็ว
คำถามที่พบบ่อย
AA เป็นเกณฑ์พื้นฐานทางกฎหมายในเขตอำนาจส่วนใหญ่ (Section 508 สหรัฐฯ, EN 301 549 สหภาพยุโรป) และเป็นสิ่งที่เครื่องมือตรวจสอบส่วนใหญ่ใช้ ธง AAA เป็นเป้าหมายเสริม จำเป็นเฉพาะบริบทการเข้าถึงเฉพาะ (เนื้อหาการศึกษาสำหรับผู้ใช้ที่มีสายตาเลือนราง) ตั้งเป้า AA และถือว่า AAA เป็นโบนัส
ไม่ได้ รับเฉพาะสี HEX ทึบ 3 หรือ 6 หลักเท่านั้น ให้แปลง RGB หรือ HSL เป็น HEX ก่อน หรือใช้เครื่องมือเลือกสีซึ่งจะให้ค่า HEX เสมอ
WCAG 2.1 SC 1.4.11 กำหนดคอนทราสต์ 3:1 สำหรับส่วนประกอบ UI ที่ไม่ใช่ข้อความและวัตถุกราฟิก ซึ่งรวมถึงตัวบ่งชี้โฟกัส ขอบช่องป้อนข้อมูล ปุ่มที่มีเฉพาะไอคอน และสถานะ (โฮเวอร์, แอ็กทีฟ) ให้ตรวจทั้งสถานะเริ่มต้นและสถานะโฟกัส
ทดสอบแต่ละโหมดแยกกัน อัตราส่วนคอนทราสต์ในธีมสว่างและธีมมืดเป็นอิสระต่อกัน ชุดสีหลายชุดที่ผ่านในโหมดสว่างจะไม่ผ่านในโหมดมืดแม้มีความสว่างสัมพัทธ์เท่ากัน
เครื่องมือที่เกี่ยวข้อง
ตารางอ้างอิง ASCII
ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL
อ้างอิงตัวอักษร HTML
รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ
ตัวลดรูปพีชคณิตบูลีน
ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
ตารางอ้างอิงแป้นพิมพ์ลัด
ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux
เครื่องมือตรวจสอบหมายเลขโทรศัพท์
ตรวจสอบโครงสร้างหมายเลขตามประเทศ พร้อมดูภูมิภาค ประเภท และรูปแบบ E.164 ระหว่างประเทศ ในประเทศ และ RFC 3966