สีและคอนทราสต์ที่อ่านง่ายสำหรับทุกคน

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

คอนทราสต์คือเรื่องของตัวเลข ไม่ใช่ความรู้สึก

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

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

อย่าให้สีเป็นตัวสื่อความหมายเพียงอย่างเดียว

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

หลักเดียวกันใช้กับกราฟ ถ้าเส้นสามเส้นต่างกันด้วยสีอย่างเดียว ให้เพิ่มรูปแบบเส้นหรือป้ายกำกับที่ปลายเส้น เพื่อให้อ่านได้แม้พิมพ์ขาวดำ

จำนวนสีที่พอดี

ชุดสีที่ใช้งานง่ายมักมีไม่กี่ตัว คือสีพื้นหลัง สีตัวอักษร สีตัวอักษรรอง สีเส้นคั่น และสีเน้นหนึ่งสี การมีสีเน้นหลายสีทำให้ไม่มีสีไหนเน้นได้จริง เพราะทุกอย่างแข่งกันเรียกความสนใจ

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

โหมดมืดไม่ใช่การกลับสี

การสลับขาวดำตรง ๆ มักได้ผลลัพธ์ที่แสบตา สีขาวสนิทบนพื้นดำสนิทมีคอนทราสต์สูงเกินไปและทำให้ตัวอักษรดูฟุ้ง ให้ใช้สีตัวอักษรที่อ่อนลงเล็กน้อยบนพื้นที่ไม่ดำสนิท

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

ตรวจคู่สีหลักด้วยเครื่องมือวัดคอนทราสต์หนึ่งรอบ แล้วเปิดเว็บบนมือถือกลางแจ้งอีกหนึ่งรอบ สองรอบนี้จับปัญหาเรื่องสีได้เกือบทั้งหมด