เครื่องมือตรวจสอบความสามารถในการเข้าถึงสี
ป้อนสีข้อความและสีพื้นหลัง (รหัสสีฐานสิบหก) เพื่อตรวจสอบอัตราส่วนความคมชัดและการปฏิบัติตามมาตรฐาน WCAG
นี่คือข้อความตัวหนาขนาดใหญ่
นี่คือข้อความขนาดปกติ
21.00:1
อัตราส่วนความคมชัด
ข้อความปกติ (AA)
ข้อความขนาดใหญ่ (AA)
18pt+ or 14pt+ bold
องค์ประกอบ UI (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
วิธีใช้ เครื่องมือตรวจสอบความสามารถในการเข้าถึงสี
- 1
ป้อนสองสี
ระบุสีพื้นหน้า (ข้อความ) และสีพื้นหลังเป็นรหัส hex เช่น #1a1a1a และ #ffffff
- 2
ตรวจค่าคอนทราสต์
คลิก "ตรวจการเข้าถึง" เพื่อคำนวณอัตราส่วนคอนทราสต์ระหว่างสองสี
- 3
ดูผลลัพธ์ WCAG
ดูป้ายผ่านหรือไม่ผ่านสำหรับ AA และ AAA ที่ระดับข้อความปกติ ข้อความขนาดใหญ่ และคอมโพเนนต์ UI พร้อมตัวอย่างแบบสด
- 4
ปรับตามต้องการ
สลับสีหรือปรับค่า hex จนกว่าคู่สีจะผ่านระดับ WCAG ที่โปรเจกต์ของคุณต้องการ
ไขความกระจ่างเรื่องคอนทราสต์ของสีตามมาตรฐาน WCAG
อัตราส่วนคอนทราสต์หมายความว่าอย่างไร
คอนทราสต์ของสีแสดงเป็นอัตราส่วนระหว่างสีที่สว่างกว่าและสีที่เข้มกว่าของสองสี ตั้งแต่ 1:1 ถึง 21:1 อัตราส่วน 1:1 หมายความว่าทั้งสองสีเหมือนกัน ข้อความจึงมองไม่เห็นเลยบนพื้นหลัง ขณะที่ 21:1 คือค่าสูงสุด ซึ่งเป็นคอนทราสต์ระหว่างสีดำสนิทกับสีขาวบริสุทธิ์ ทุกคู่สีอื่น ๆ จะอยู่ที่ใดที่หนึ่งระหว่างนั้น อัตราส่วนนี้ไม่ได้เกี่ยวกับว่าคุณใช้สีอะไรหรือเฉดสีต่างกันแค่ไหน แต่เป็นเรื่องของความต่างของความสว่างล้วน ๆ ซึ่งเป็นเหตุผลที่สองสีที่ดูแตกต่างกันสำหรับคุณก็ยังอาจไม่ผ่านได้
ตัวเลขเดียวนี้คือกระดูกสันหลังของสีที่เข้าถึงได้ เพราะมันทำนายได้ว่าข้อความจะอ่านออกหรือไม่สำหรับผู้คนและสภาพแวดล้อมที่หลากหลายที่สุด ตัวตรวจจะคำนวณค่านี้สำหรับทุกคู่สีพื้นหน้าและพื้นหลังที่คุณป้อน และเปรียบเทียบผลลัพธ์กับเกณฑ์ที่ประกาศไว้
เกณฑ์ AA ที่คุณต้องผ่านให้ได้
WCAG ระดับ AA คือเกณฑ์ที่เว็บไซต์ส่วนใหญ่มุ่งหวัง และที่กฎหมายว่าด้วยการเข้าถึงและกฎการจัดซื้อจัดจ้างจำนวนมากอ้างถึง ดังนั้นจงถือว่ามันเป็นพื้นฐานของคุณ AA กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความเนื้อหาปกติ และอย่างน้อย 3:1 สำหรับข้อความขนาดใหญ่ ตัวเลขสองค่านั้นครอบคลุมการตัดสินใจในการออกแบบประจำวันเป็นส่วนใหญ่ และป้ายในเครื่องมือนี้จะบอกคุณทันทีว่าคู่สีที่กำหนดผ่านแต่ละเกณฑ์หรือไม่
หากคู่สีผ่าน AA ทั้งสำหรับข้อความปกติและข้อความขนาดใหญ่ คุณก็มีรากฐานที่มั่นคงและปกป้องได้ หากมันไม่ผ่านข้อความปกติแต่ผ่านข้อความขนาดใหญ่ คุณยังใช้มันได้ แต่เฉพาะที่ขนาดใหญ่เท่านั้น ซึ่งเป็นข้อจำกัดที่ควรตัดสินใจอย่างจงใจ มากกว่าจะมาค้นพบทีหลัง
AAA และความหมายของข้อความขนาดใหญ่
ระดับ AAA คือชั้นขั้นสูง มีไว้เพื่อความอ่านง่ายสูงสุด และยกระดับข้อกำหนดเป็น 7:1 สำหรับข้อความปกติและ 4.5:1 สำหรับข้อความขนาดใหญ่ AAA ไม่ได้ถูกคาดหวังสำหรับทั้งเว็บไซต์และมักไม่สามารถทำได้จริงสำหรับชุดสีของแบรนด์ แต่มันเป็นเป้าหมายที่ควรค่าสำหรับการอ่านเนื้อหายาว เนื้อหาสำคัญยิ่ง และกลุ่มผู้ใช้ที่มีสายตาเลือนราง ตัวตรวจจะรายงาน AAA ควบคู่กับ AA เพื่อให้คุณเห็นว่าคู่สีมีระยะเผื่อมากแค่ไหน
ข้อความขนาดใหญ่มีนิยามที่แม่นยำซึ่งทำให้หลายคนประหลาดใจ มันหมายถึงขนาดประมาณ 18pt ขึ้นไป หรือ 14pt ขึ้นไปเมื่อเป็นตัวหนา ซึ่งแปลงเป็นประมาณ 24px แบบปกติ หรือ 18.66px แบบตัวหนา เหตุผลที่เกณฑ์ต่ำกว่าก็เพียงเพราะรูปอักษรที่ใหญ่และหนากว่ายังคงอ่านออกได้ที่คอนทราสต์น้อยกว่า สิ่งใดก็ตามที่เล็กกว่าขอบเขตนั้นต้องผ่านอัตราส่วนข้อความปกติที่เข้มงวดกว่า ดังนั้นอย่าสันนิษฐานว่าหัวเรื่องที่ดูใหญ่จะเข้าข่ายโดยไม่ตรวจสอบขนาดและน้ำหนักจริง
ทำไมคอนทราสต์จึงสำคัญสำหรับผู้ใช้จริง
คอนทราสต์ที่เพียงพอไม่ใช่แค่การทำเครื่องหมายให้ครบช่อง แต่เป็นตัวกำหนดว่าผู้คนจริง ๆ จะใช้อินเทอร์เฟซของคุณได้หรือไม่ ผู้ใช้ที่มีสายตาเลือนราง ซึ่งพบได้บ่อยขึ้นเมื่ออายุมากขึ้น พึ่งพามันโดยตรง และเช่นเดียวกับใครก็ตามที่อ่านหน้าจอกลางแสงแดดจ้า บนจอที่สลัวหรือราคาถูก หรือขณะเหนื่อยล้า คอนทราสต์ยังมีปฏิสัมพันธ์กับภาวะตาบอดสี เพราะอัตราส่วนอิงตามความสว่างมากกว่าเฉดสี คู่สีที่พึ่งพาความต่างระหว่างสีแดงกับสีเขียวอาจล่มสลายสำหรับคนที่แยกแยะเฉดสีเหล่านั้นไม่ได้ ขณะที่ความต่างของความสว่างที่ชัดเจนก็ยังคงอ่านออก
ประเด็นสุดท้ายนั้นมีข้อสรุปที่ควรกล่าวให้ชัดเจน: อย่าพึ่งพาสีเพียงอย่างเดียวในการสื่อความหมาย จงจับคู่สีกับข้อความ ไอคอน เส้นใต้ หรือรูปทรง เพื่อให้ข้อมูลอยู่รอดได้ทั้งในสภาพคอนทราสต์ต่ำและภาวะตาบอดสี
อัตราส่วนถูกคำนวณอย่างไร
คณิตศาสตร์เบื้องหลังป้ายเริ่มต้นด้วยความสว่างสัมพัทธ์ (relative luminance) ซึ่งเป็นการวัดว่าแต่ละสีปรากฏสว่างเพียงใดต่อสายตามนุษย์ มันไม่ใช่ค่าเฉลี่ยแบบเรียบ ๆ ของช่องสีแดง เขียว และน้ำเงิน เพราะตามนุษย์ไวต่อสีเขียวมากกว่าสีน้ำเงินมาก สีเขียวจึงถูกถ่วงน้ำหนักมากที่สุดและสีน้ำเงินน้อยที่สุด แต่ละช่องสียังถูกส่งผ่านการแก้ไขแกมมาเล็กน้อยก่อน เพื่อให้ผลลัพธ์สอดคล้องกับการรับรู้มากกว่าสัญญาณดิบ
เมื่อทั้งสองสีมีค่าความสว่างแล้ว อัตราส่วนคอนทราสต์คือความสว่างที่มากกว่าบวกค่าคงที่เล็กน้อย หารด้วยความสว่างที่น้อยกว่าบวกค่าคงที่เดียวกันนั้น ค่าคงที่ช่วยให้สูตรทำงานได้ดีเมื่ออยู่ใกล้สีดำ คุณไม่จำเป็นต้องคำนวณด้วยมือ แต่การรู้ว่าความสว่างซึ่งไม่ใช่เฉดสี เป็นตัวขับเคลื่อนผลลัพธ์ อธิบายได้ว่าทำไมการเลือกเพียงสีที่ดูแตกต่างกันจึงไม่เพียงพอ
คอนทราสต์ของส่วนที่ไม่ใช่ข้อความและ UI
กฎคอนทราสต์ไม่ได้จำกัดอยู่ที่ข้อความ WCAG ยังกำหนดค่าต่ำสุด 3:1 สำหรับขอบเขตทางสายตาของส่วนประกอบที่โต้ตอบได้และกราฟิกที่มีความหมาย ซึ่งตัวตรวจจะกำกับไว้ภายใต้องค์ประกอบ UI สิ่งนั้นครอบคลุมขอบของช่องป้อนข้อความ เส้นขอบของปุ่ม เครื่องหมายถูกภายในกล่องกาเครื่องหมาย ตัวบ่งชี้โฟกัส และส่วนของไอคอนหรือแผนภูมิที่ผู้ใช้ต้องรับรู้เพื่อเข้าใจมัน เส้นขอบช่องป้อนข้อมูลสีเทาจาง ๆ บนการ์ดสีขาวคือความล้มเหลวแบบคลาสสิกของกฎข้อนี้ แม้เมื่อข้อความป้ายกำกับด้านในจะผ่านได้อย่างสบาย
การออกแบบตัวควบคุมให้ผ่าน 3:1 เมื่อเทียบกับสภาพแวดล้อมรอบ ๆ หมายความว่าผู้คนจะหาและใช้งานมันได้จริง ไม่ใช่แค่อ่านคำที่อยู่ข้าง ๆ ได้ ทดสอบขอบและสถานะต่าง ๆ ของส่วนประกอบ ไม่ใช่แค่ข้อความของมัน
ความล้มเหลวที่พบบ่อยและวิธีแก้
มีรูปแบบไม่กี่อย่างที่ล้มเหลวครั้งแล้วครั้งเล่า ข้อความ placeholder หรือข้อความรองสีเทาอ่อนบนพื้นขาวพบบ่อยที่สุด ค่าอย่างสีเทากลาง ๆ ใกล้ #999999 บนพื้นขาวจะต่ำกว่า 4.5:1 และจำเป็นต้องทำให้เข้มขึ้น สีของแบรนด์เป็นอีกตัวการที่ผิดซ้ำซาก โดยเฉพาะสีน้ำเงิน เขียว และส้มโทนกลางที่ใช้กับข้อความเนื้อหาหรือกับข้อความสีขาวบนปุ่มสี ซึ่งคู่สีมักจะลงเอยต่ำกว่า AA อยู่นิดเดียว เส้นขอบบางสีอ่อนบนพื้นหลังสีอ่อนก็มักจะไม่ผ่านเกณฑ์ UI ที่ 3:1 เช่นกัน
วิธีแก้มักจะเป็นเรื่องเล็ก ทำให้สีพื้นหน้าเข้มขึ้นหรือสีพื้นหลังอ่อนลงจนกว่าอัตราส่วนจะผ่านเส้น ซึ่งในแง่ของ HSL มักหมายถึงการปรับความสว่างเพียงเล็กน้อยขณะคงเฉดสีไว้ เพื่อให้แบรนด์ยังคงอ่านออกได้ สำหรับข้อความบนภาพหรือไล่เฉดสีที่ยุ่งเหยิง ให้เพิ่มฉากทึบหรือกึ่งโปร่งใสไว้ด้านหลังเพื่อให้บริเวณที่แย่ที่สุดยังคงผ่าน ป้อนสีจริงของคุณที่นี่ ดูอัตราส่วนและป้าย AA และ AAA อัปเดต และค่อย ๆ ปรับค่าจนกว่าทุกระดับที่โปรเจกต์ของคุณต้องการจะกลายเป็นสีเขียว
คำถามที่พบบ่อย
อัตราส่วนคอนทราสต์คืออะไร และเท่าไหร่ถึงเรียกว่าดี
AA กับ AAA ต่างกันอย่างไร
ทำไมข้อความขนาดใหญ่ผ่าน แต่ข้อความปกติไม่ผ่าน
ฉันควรป้อนสีในรูปแบบใด
ตัวตรวจนี้ฟรีและส่งสีของฉันไปที่ไหนหรือไม่
เครื่องมือที่เกี่ยวข้อง
ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้