1:1 to 21:1 · AA · AAA
ตัวตรวจสอบคอนทราสต์
สีดำบนสีขาวมีอัตราส่วนคอนทราสต์ WCAG 21:1 ซึ่งสูงที่สุดที่เป็นไปได้ และสีขาวบน #0060fd มี 5.13:1 ใส่สีข้อความและสีพื้นหลังเพื่อตรวจสอบสีของคุณ
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
อัตราส่วนและการตรวจทั้งห้าจะอัปเดตขณะคุณพิมพ์ อัตราส่วนถูกตัดเหลือสองตำแหน่งทศนิยม ไม่ปัดขึ้น ดังนั้น 4.499 จึงแสดงเป็น 4.49:1 และไม่ผ่านเกณฑ์ 4.5:1
Scanned by 
NortonTM Safe Web
ภาพรวมโดยสรุป
- ราคา
- ไม่มีค่าใช้จ่าย
- บัญชี
- ไม่ต้องมี
- การอัปโหลด
- ไม่เกี่ยวข้อง — คุณพิมพ์สี ไม่มีอะไรถูกส่งไปที่ใด
- สูตร
- (ความสว่างที่สว่างกว่า + 0.05) ÷ (ความสว่างที่เข้มกว่า + 0.05)
- เกณฑ์
- AA 4.5:1 ข้อความปกติ และ 3:1 ข้อความขนาดใหญ่; AAA 7:1 ข้อความปกติ และ 4.5:1 ข้อความขนาดใหญ่; 3:1 สำหรับส่วนของส่วนติดต่อผู้ใช้
- มาตรฐาน
- นิยามความสว่างสัมพัทธ์และอัตราส่วนคอนทราสต์ของ WCAG 2.2
อัตราส่วนคอนทราสต์ของคู่สีที่รู้จักกันดี
แถวเหล่านี้สร้างจากโค้ดเดียวกับตัวตรวจสอบ เครื่องหมายถูกหมายความว่าคู่สีผ่านข้อกำหนด เครื่องหมายกากบาทหมายความว่าไม่ผ่าน
| สีข้อความ | พื้นหลัง | อัตราส่วน | AA ปกติ | AA ใหญ่ | AAA ปกติ | AAA ใหญ่ | ส่วนติดต่อผู้ใช้ |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| การตรวจ | อัตราส่วนขั้นต่ำ |
|---|---|
| AA ข้อความปกติ | 4.5:1 |
| AA ข้อความขนาดใหญ่ | 3:1 |
| AAA ข้อความปกติ | 7:1 |
| AAA ข้อความขนาดใหญ่ | 4.5:1 |
| AA ส่วนติดต่อผู้ใช้และกราฟิก | 3:1 |
วิธีตรวจสอบคู่สี
ใส่สีทั้งสอง
พิมพ์สีข้อความและสีพื้นหลังในรูปแบบ CSS ใดก็ได้ หรือใช้ตัวเลือกสี ปุ่มสลับจะสลับสีทั้งสอง ซึ่งมีประโยชน์กับข้อความสีอ่อนบนพื้นเข้ม
อ่านอัตราส่วน
อัตราส่วนมีตั้งแต่ 1:1 (สีเหมือนกัน) ถึง 21:1 (ดำบนขาว) ตัวอย่างใต้ช่องกรอกแสดงคู่สีที่ขนาด 16 px และ 24 px คุณจึงประเมินผลด้วยสายตาของตัวเองได้
ดูการตรวจทั้งห้า
แต่ละช่องบอกว่าผ่านหรือไม่ผ่านสำหรับข้อกำหนด WCAG หนึ่งข้อ: AA และ AAA สำหรับข้อความปกติ AA และ AAA สำหรับข้อความขนาดใหญ่ และ AA สำหรับส่วนของส่วนติดต่อผู้ใช้ หากข้อความปกติไม่ผ่าน AA หน้านี้จะแนะนำสีข้อความที่ใกล้เคียงที่สุดที่ผ่าน
คำนวณอัตราส่วนคอนทราสต์อย่างไร
WCAG วัดคอนทราสต์ผ่านความสว่างสัมพัทธ์ ซึ่งคือความสว่างของสีตั้งแต่ 0 (ดำ) ถึง 1 (ขาว) ช่องสีแดง เขียว และน้ำเงินแต่ละช่องถูกหารด้วย 255 ค่าที่ไม่เกิน 0.04045 จะหารด้วย 12.92 และค่าที่มากกว่านั้นจะยกกำลัง: (ค่า + 0.055) หารด้วย 1.055 แล้วยกกำลัง 2.4 จากนั้นความสว่างคือ 0.2126 คูณแดง บวก 0.7152 คูณเขียว บวก 0.0722 คูณน้ำเงิน ซึ่งสะท้อนว่าดวงตาตอบสนองต่อแต่ละสีมากเพียงใด อัตราส่วนคอนทราสต์คือความสว่างที่สว่างกว่า บวก 0.05 หารด้วยความสว่างที่เข้มกว่า บวก 0.05
WCAG 2 ที่ระดับ AA ต้องการอย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ ส่วนระดับ AAA คือ 7:1 และ 4.5:1 ข้อความขนาดใหญ่คืออย่างน้อย 18 พอยต์ ซึ่งเท่ากับ 24 พิกเซล CSS หรืออย่างน้อย 14 พอยต์แบบตัวหนา ราว 18.66 พิกเซล เกณฑ์ความสำเร็จ 1.4.11 ต้องการ 3:1 สำหรับส่วนของส่วนติดต่อผู้ใช้และกราฟิกที่ผู้อ่านต้องมองเห็น เช่น ขอบช่องกรอกหรือเส้นกราฟ อัตราส่วนถูกเทียบกับแต่ละเกณฑ์โดยไม่ปัดเศษ หากสีมีความโปร่งใส พื้นหลังโปร่งใสจะวางทับสีขาว และสีข้อความโปร่งใสจะวางทับพื้นหลังก่อนวัด หน้านี้ใช้ WCAG 2.x เท่านั้น ไม่คำนวณ APCA ซึ่งมีการพิจารณาไว้สำหรับแนวทางฉบับหลัง
คำถามเกี่ยวกับคอนทราสต์
WCAG กำหนดอัตราส่วนคอนทราสต์ของข้อความไว้เท่าใด
ที่ระดับ AA ข้อความปกติต้องมีอย่างน้อย 4.5:1 และข้อความขนาดใหญ่อย่างน้อย 3:1 ที่ระดับ AAA ตัวเลขคือ 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ อัตราส่วนวัดระหว่างสีข้อความกับสีที่อยู่ด้านหลังโดยตรง
ข้อความขนาดใหญ่หมายถึงอะไร
WCAG นิยามข้อความขนาดใหญ่ว่าอย่างน้อย 18 พอยต์ ซึ่งเท่ากับ 24 พิกเซล CSS หรืออย่างน้อย 14 พอยต์แบบตัวหนา ซึ่งราว 18.66 พิกเซล CSS สิ่งที่เล็กกว่านั้นนับเป็นข้อความปกติและต้องการอัตราส่วนที่สูงกว่า
สีเทาที่อ่อนที่สุดที่ผ่าน AA บนพื้นขาวคือสีใด
#767676 บนพื้นขาวมีอัตราส่วน 4.54:1 และผ่านเกณฑ์ 4.5:1 สำหรับข้อความปกติ สีเทาที่อ่อนกว่าถัดไปคือ #777777 ได้ 4.47:1 และไม่ผ่าน สำหรับ 7:1 (AAA) สีเทาที่อ่อนที่สุดคือ #595959 ซึ่งได้ 7.00:1
ทำไม 4.49 จึงไม่ผ่านทั้งที่ดูเหมือน 4.5
การตรวจเปรียบเทียบอัตราส่วนที่แท้จริงกับเกณฑ์ อัตราส่วน 4.499 ต่ำกว่า 4.5 จึงไม่ผ่าน และหน้านี้พิมพ์เป็น 4.49:1 แทนที่จะปัดขึ้น ตัวอย่างจริงคือสีแดงล้วนบนพื้นขาว: 3.99:1 ไม่ผ่านเกณฑ์ 4.5:1 สำหรับข้อความปกติ แม้จะใกล้เคียง
ไอคอน ขอบ และช่องกรอกแบบฟอร์มต้องการคอนทราสต์เท่าใด
เกณฑ์ความสำเร็จ 1.4.11 คอนทราสต์ที่ไม่ใช่ข้อความ ซึ่งเพิ่มใน WCAG 2.1 ต้องการอย่างน้อย 3:1 ระหว่างส่วนของส่วนติดต่อผู้ใช้หรือกราฟิกที่ผู้อ่านต้องมองเห็น เช่น ขอบช่องกรอก กรอบโฟกัส หรือเส้นกราฟ กับสีที่อยู่ข้างเคียง ตัวควบคุมที่ปิดใช้งานและกราฟิกที่ตกแต่งล้วน ๆ ได้รับการยกเว้น
อัตราส่วนที่ผ่านทำให้หน้าเว็บเข้าถึงได้หรือไม่
ไม่ คอนทราสต์เป็นเพียงข้อกำหนดหนึ่งจากหลายข้อ ขนาดและน้ำหนักตัวอักษร ระยะบรรทัด การใช้สีเพียงอย่างเดียวสื่อความหมาย การมองเห็นโฟกัส ข้อความบนรูปภาพและไล่เฉดสี และวิธีที่ผู้ที่มองเห็นสีต่างกันเห็นหน้าเว็บ ล้วนสำคัญ ใช้ผลนี้เป็นข้อมูลหนึ่ง และทดสอบหน้าเว็บกับเนื้อหาจริง