เครื่องมือเลือกสี & Contrast

ค่าสีแต่ละระบบอธิบายสีคนละรูปแบบ

HEX ใช้เลขฐานสิบหกแทนช่องสีแดง เขียว และน้ำเงิน ส่วน RGB แสดงค่าของสามช่องโดยตรง ตัวอย่างสีขาวเขียนเป็น #FFFFFF หรือ RGB 255, 255, 255 และสีดำเป็น #000000 หรือ RGB 0, 0, 0 ระบบ HSL ช่วยคิดเป็นเฉดสี ความอิ่มสี และความสว่าง จึงสะดวกเมื่อต้องสร้างสีใกล้เคียงกัน แต่ตัวเลขความสว่างของ HSL ไม่ได้เท่ากับความสว่างที่ใช้คำนวณ contrast โดยตรง หากเปลี่ยนระบบแล้วได้เลขทศนิยมต่างกันเล็กน้อยอาจเกิดจากการปัดค่าระหว่างแปลง

อ่าน contrast จากคู่สีที่ใช้งานจริง

อัตราส่วน contrast ต้องคำนวณจากทั้งสีข้อความและพื้นหลัง ไม่สามารถตัดสินว่าสีหนึ่ง “ผ่าน” ได้โดยไม่ระบุว่าจับคู่กับสีใด ตัวอย่างตัวอักษรดำบนพื้นขาวมีอัตราส่วน 21:1 ซึ่งสูงกว่าสีเทาอ่อนบนพื้นขาว ภายใต้เกณฑ์ WCAG ระดับ AA ข้อความทั่วไปใช้เกณฑ์อย่างน้อย 4.5:1 ส่วนข้อความขนาดใหญ่ตามนิยามของเกณฑ์ใช้ 3:1 ให้ตรวจขนาดและน้ำหนักตัวอักษรที่ใช้จริง ไม่ใช่ถือว่าหัวข้อทุกแบบเป็นข้อความใหญ่โดยอัตโนมัติ

ชุดสีสวยยังต้องตรวจความอ่านง่าย

การสร้างสีคู่ตรงข้ามหรือชุดสีโทนใกล้เคียงช่วยให้ได้แนวทางออกแบบ แต่ไม่ได้รับประกันว่าทุกคู่สีในชุดจะอ่านออกเมื่อนำมาวางทับกัน ควรทดสอบคู่ที่เกิดจริง เช่น ข้อความบนปุ่ม ข้อความช่วยกรอก และเส้นขอบกับพื้นหลัง รวมถึงตรวจทั้งโหมดสว่างและโหมดมืด ถ้าใช้สีเพื่อบอกสถานะ เช่น ผ่านหรือผิด ควรมีข้อความหรือสัญลักษณ์ประกอบด้วย เพื่อไม่ให้ความหมายขึ้นกับการมองแยกสีเพียงอย่างเดียว

สีโปร่งใสและภาพพื้นหลังต้องประเมินเพิ่ม

เมื่อมี opacity เงา ไล่ระดับสี หรือภาพอยู่ด้านหลัง สีที่ผู้ใช้เห็นเป็นผลผสมกับพื้น ไม่ใช่รหัสสีต้นทางเพียงค่าเดียว หากเครื่องมือรับเพียงสีทึบ ควรหาสีผลลัพธ์จริงหรือใช้เครื่องมือตรวจหน้าที่แสดงผลประกอบ โดยตรวจตำแหน่งที่อ่านยากที่สุดด้วย นอกจากนี้หน้าจอและสภาพแสงอาจทำให้รับรู้สีต่างกัน ผลคำนวณช่วยตรวจคู่สีตามมาตรฐานเชิงตัวเลข แต่ไม่ได้รับรอง accessibility ของทั้งหน้าเว็บหรือแทนการทดสอบกับผู้ใช้งาน