ข้ามไปเนื้อหาหลัก

ทฤษฎี​สี (Color Theory) และ​จิตวิทยา​สี บน​ป้าย​ร้าน​และ​บน​จอ

อัปเดตล่าสุด 26 กันยายน 2569
เวลาอ่านประมาณ 14 นาที
ทฤษฎี​สี (Color Theory) และ​จิตวิทยา​สี บน​ป้าย​ร้าน​และ​บน​จอ

KEY TAKEAWAYS

3 ประเด็น

สี​สี่​สี​ใน​พื้นที่​จริง​มี​ความ​หมาย​ถูก​กำหนด​ไว้​แล้ว​ตาม มอก. 635-2554

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

บนจอ WCAG 2.2 ข้อ 1.4.1 ห้าม​ใช้​สี​เป็น​สัญญาณ​เดียว และ​ข้อ 1.4.11 กำหนด​ให้​ปุ่ม​กับ​ไอคอน​ต่าง​จาก​พื้น​หลัง​อย่าง​น้อย 3:1

สีชมพู​ของ​ฟิจิ⁠ทัล #EA1B56 วัด​ได้ 4.38:1 บน​พื้น​ขาว ผ่าน​เกณฑ์​ปุ่ม​แต่​ต่ำ​กว่า 4.5:1 ของ​ตัว​อักษร​ขนาด​ปกติ

ตัวเลข "62-90% ของ​การ​ประเมิน​มา​จาก​สี" มา​จาก​บทความ​ทบทวน​วรรณกรรม​ของ Singh (2006)

ใช้​กับ​การ​ประเมิน​ใน​ช่วง​แรก​ของ​การ​พบ​สินค้า ไม่​ได้​วัด​ว่า​ลูกค้า​ซื้อ​หรือ​ไม่​ซื้อ​เพราะ​สี

ทฤษฎี​สี​กับ​จิตวิทยา​สี​สำหรับ​ชุด​สี​แบรนด์​ที่​ใช้​ทั้ง​หน้า​ร้าน​และ​เว็บ สี​เพื่อ​ความ​ปลอดภัย​ตาม มอก. 635-2554 เกณฑ์ WCAG 2.2 ข้อ 1.4.1 และ 1.4.11 และ​การ​อ่าน​ตัวเลข 62-90% ให้​ถูก

ร้าน​ค้า​ปลีก​หนึ่ง​ร้าน​ใช้​สี​แบรนด์​อย่าง​น้อย​สาม​ที่​ใน​เวลา​เดียวกัน คือ​ป้าย​หน้า​ร้าน ผนัง​และ​ชั้น​วาง​ด้าน​ใน กับ​เว็บไซต์​หรือ​หน้า​ร้าน​ออนไลน์ แต่ละ​ที่​มี​เกณฑ์​ภายนอก​กำกับ​สี​อยู่​แล้ว ใน​พื้นที่​จริง​มี​มาตรฐาน​ผลิตภัณฑ์​อุตสาหกรรม มอก. 635-2554 ที่​กำหนด​ความ​หมาย​ของ​สี​แดง น้ำเงิน เหลือง และ​เขียว บน​จอ​มี​เกณฑ์ WCAG 2.2 ของ W3C ที่​วัด​ความ​ต่าง​ของ​สี​เป็น​ตัวเลข

บท​นี้​อธิบาย​ทฤษฎี​สี​และ​จิตวิทยา​สี​ใน​ฐานะ​เครื่อง​มือ​ตัดสิน​ใจ​ของ​เจ้าของ​ธุรกิจ​ที่​ต้อง​อนุมัติ​ชุด​สี​ชุด​เดียว​ให้​ใช้ได้​ทั้ง​สอง​พื้นที่ โดย​อ่าน​ตัว​บท​ของ​มาตรฐาน เกณฑ์​ของ W3C และ​งาน​วิจัย​ที่​เปิด​ต้นทาง​ได้ แล้ว​วัด​ชุด​สี​ของ​ฟิจิ⁠ทัล​เอง​ด้วย​สูตร​เดียว​กับ​ที่​ผู้​อ่าน​นำ​ไป​ใช้​ต่อ​ได้

ทฤษฎี​สี​กับ​จิตวิทยา​สี คนละ​คำถาม​กัน

ทฤษฎี​สีต​อบ​ว่า​สี​แต่ละ​คู่​อยู่​ด้วย​กัน​แล้ว​ตัด​กัน​หรือ​กลมกลืน​แค่​ไหน ส่วน​จิตวิทยา​สีต​อบ​ว่า​ผู้​ชม​รู้สึก​หรือ​ตีความ​สี​นั้น​อย่างไร สอง​คำถาม​นี้​ใช้​หลัก​ฐาน​คนละ​แบบ ทฤษฎี​สี​วัด​ได้​ด้วย​ตำแหน่ง​บน​วง​ล้อ​สี​และ​ค่า​ความ​สว่าง จิตวิทยา​สี​ขึ้น​กับ​บริบท วัฒนธรรม และ​ประสบการณ์​ของ​ผู้​ชม

ทฤษฎี​สี (Color Theory) คือ​อะไร

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

หลัก​จำ​ที่​ใช้​กัน​แพร่​หลาย​ใน​งาน​ตกแต่ง​ภายใน​และ​งาน​กราฟิก​คือ​สัดส่วน 60-30-10 สีห​ลัก​ราว​หก​ส่วน สี​รอง​สาม​ส่วน สี​เน้น​หนึ่ง​ส่วน ตัวเลข​นี้​เป็น​หลัก​จำ​ของ​ผู้​ปฏิบัติ​งาน ไม่ใช่​ผล​การ​ทดลอง ใช้​เป็น​จุด​เริ่ม​ต้น​เมื่อ​ยัง​ไม่มี​เหตุผล​อื่น

จิตวิทยา​สี​ใช้​ตัดสิน​สี​แบรนด์​ได้​แค่​ไหน

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

ตัวเลข 62-90% มา​จาก​ไหน

ตัวเลข​ที่​ถูก​อ้าง​บ่อย​ที่สุด​ใน​เรื่อง​สี​กับ​การ​ตลาด​มา​จาก​บทความ Impact of color on marketing ของ Satyendra Singh ใน​วารสาร Management Decision ปี 2006 เล่ม 44 ฉบับ​ที่ 6 หน้า 783-789 บทคัดย่อ​เขียน​ว่า​ผู้คน​ตัดสิน​ใจ​ภายใน 90 วินาที​แรก​ที่​พบ​คน​หรือ​สินค้า และ​ราว 62-90% ของ​การ​ประเมิน​นั้น​มา​จาก​สี​อย่าง​เดียว

ตัวเลข 90% ใน​บทความ​การ​ตลาด​แปล​ว่า​ลูกค้า​ซื้อ​เพราะ​สีห​รือ​ไม่

บทความ​ของ Singh เป็นการ​ทบทวน​วรรณกรรม ผู้​เขียน​ระบุ​วิธี​การ​ไว้​ใน​บทคัดย่อ​ว่า​รวบรวม​งาน​ด้าน​จิตวิทยา​สี​ใน​บริบท​การ​ตลาด​และ​ชี้​ข้อ​ขัด​แย้ง​ของ​งาน​เหล่า​นั้น ไม่​ได้​ทดลอง​วัด​ยอด​ขาย ตัวเลข 62-90% หมาย​ถึง​สัดส่วน​ของ "การ​ประเมิน" ใน​ช่วง​แรก​ที่​พบ​สินค้า ไม่ใช่​การ​ตัดสิน​ใจ​ซื้อ บทความ​การ​ตลาด​ที่​ตัด​เหลือ "90% ของ​การ​ตัดสิน​ใจ​ซื้อ" จึง​อ้าง​เกิน​กว่า​ที่​ต้นทาง​เขียน และ​ตัด​ขอบ​ล่าง 62% ทิ้ง​ไป​ด้วย

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

สี​เพื่อ​ความ​ปลอดภัย​ตาม มอก. 635-2554

สี่​สี​ที่​นัก​ออกแบบ​เลือก​บ่อย​ที่สุด​มี​ความ​หมาย​ถูก​กำหนด​ไว้​แล้ว​ใน​พื้นที่​จริง มาตรฐาน​ผลิตภัณฑ์​อุตสาหกรรม สี​และ​เครื่องหมาย​เพื่อ​ความ​ปลอดภัย มอก. 635-2554 ประกาศ​ใน​ราช​กิจ​จา​นุ​เบกษา เล่ม 129 ตอน​พิเศษ 43 ง วัน​ที่ 1 มีนาคม 2555 แทน​ฉบับ พ.ศ. 2529 สอง​เล่ม ตาราง​ที่ 1 ของ​มาตรฐาน​กำหนด​รูป​ทรง​และ​สี​ไว้​ดังนี้

รูป​ทรง ความ​หมาย สี​เพื่อ​ความ​ปลอดภัย สี​ตัด ตัวอย่าง​การ​ใช้​ใน​มาตรฐาน
วงกลม​พร้อม​แถบ​เฉียง ห้าม แดง ขาว ห้าม​สูบ​บุหรี่ ห้าม​ผ่าน ห้าม​ใช้​ดื่ม
วงกลม บังคับ​ให้​ปฏิบัติ ฟ้า (blue) ขาว ต้อง​สวม​อุปกรณ์​ปกป้อง​ตา ต้อง​ปิด​สวิตช์
สามเหลี่ยม​ด้าน​เท่า เตือน เหลือง ดำ ระวัง​พื้น​ผิว​ร้อน ระวัง​อันตราย​จาก​ไฟฟ้า
สี่เหลี่ยม​จัตุรัส สภาวะ​ปลอดภัย เขียว ขาว ปฐมพยาบาล ทาง​หนี​ไฟ จุดรวม​พล
สี่เหลี่ยม​จัตุรัส อุปกรณ์​เกี่ยว​กับ​อัคคี​ภัย แดง ขาว จุด​แจ้ง​เหตุ อุปกรณ์​ผจญ​เพลิง

มาตรฐาน​กำหนด​สัดส่วน​พื้นที่​ไว้​ด้วย เครื่องหมาย​ห้าม​ต้อง​มี​สี​แดง​ไม่​น้อย​กว่า​ร้อย​ละ 35 ของ​พื้นที่​เครื่องหมาย เครื่องหมาย​บังคับ เตือน สภาวะ​ปลอดภัย และ​อุปกรณ์​อัคคี​ภัย​ต้อง​มี​สี​เพื่อ​ความ​ปลอดภัย​ไม่​น้อย​กว่า​ร้อย​ละ 50

สี​แบรนด์​สี​แดง​หรือ​สี​เขียว​ใช้​ใน​ร้าน​ที่​มี​ป้าย​ความ​ปลอดภัย​ได้​ไหม

ใช้ได้ มาตรฐาน​นี้​ประกาศ​ตาม​มาตรา 15 ของ พ.ร.บ.มาตรฐาน​ผลิตภัณฑ์​อุตสาหกรรม พ.ศ. 2511 และ​กำกับ​เครื่องหมาย​เพื่อ​ความ​ปลอดภัย ไม่​ได้​ห้าม​ใช้​สี​แดง​หรือ​สี​เขียว​ใน​การ​ตกแต่ง จุด​ที่​ต้อง​ระวัง​คือ​การ​ใช้ "สี​คู่​กับ​รูป​ทรง" ของ​มาตรฐาน เช่น กล่อง​สี่เหลี่ยม​สี​เขียว​ตัว​อักษร​ขาว​ติด​ผนัง​ใกล้​ทาง​เดิน ผู้​มา​ใช้​บริการ​อาจ​อ่าน​เป็น​ป้าย​ทาง​หนี​ไฟ หรือ​แผ่น​สี่เหลี่ยม​สี​แดง​ข้าง​ถัง​ดับ​เพลิง​ที่​ทำให้​ป้าย​จริง​กลืน​หาย​ไป ทาง​แก้​ที่​ไม่​ต้อง​เปลี่ยน​สี​แบรนด์​คือ​เปลี่ยน​รูป​ทรง​และ​เว้น​ระยะ​จาก​ป้าย​จริง

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

สี​บน​จอ​ตาม WCAG 2.2 ข้อ 1.4.1 และ 1.4.11

บนจอ เกณฑ์​ที่​วัด​เรื่อง​สี​ได้​ตรง​ที่สุด​คือ Web Content Accessibility Guidelines (WCAG) 2.2 ของ W3C เกณฑ์​เรื่อง​สี​ตัว​อักษร​กับ​พื้น​หลัง 4.5:1 ใน​ข้อ 1.4.3 อธิบาย​ไว้​แล้ว​ใน​บท Art Director คือ​อะไร ผู้​กำกับ​ศิลป์​ตัดสิน​อะไร​ใน​งาน​โฆษณา บท​นี้​พูด​ถึง​อีก​สอง​ข้อ​ที่​กระทบ​การ​เลือก​ชุด​สี​โดยตรง

ข้อ ระดับ สิ่ง​ที่​เกณฑ์​กำหนด ตัวอย่าง​ที่​ตก​เกณฑ์
1.4.1 Use of Color A สี​ต้อง​ไม่​เป็น​วิธี​เดียว​ใน​การ​สื่อ​ข้อมูล บอก​การก​ระ​ทำ เรียก​ให้​ตอบ​สนอง หรือ​แยก​องค์​ประกอบ ช่อง​กรอก​ข้อมูล​ที่​ผิด​เปลี่ยน​เป็น​ขอบ​แดง​อย่าง​เดียว ไม่มี​ข้อความ​บอก
1.4.11 Non-text Contrast AA ส่วน​ประกอบ​ของ​หน้า​จอ​และ​ภาพ​กราฟิก​ที่​จำเป็น​ต่อ​การ​เข้าใจ ต้อง​ต่าง​จาก​สี​ที่​อยู่​ติด​กัน​อย่าง​น้อย 3:1 ขอบ​ปุ่ม​สี​เทา​อ่อน​บน​พื้น​ขาว ไอคอน​สี​พาส​เทล​ที่​เป็น​ปุ่ม​เดียว​ของ​หน้า

ค่า Contrast Ratio คำนวณ​อย่างไร

ค่า Contrast Ratio เทียบ​ความ​สว่าง​สัมพัทธ์​ของ​สอง​สี สูตร​ใน WCAG แปลง​ค่า​แดง เขียว น้ำเงิน​ของ​แต่ละ​สี​เป็น​ความ​สว่าง โดย​ให้​น้ำ​หนัก​สี​เขียว 0.7152 สี​แดง 0.2126 และ​สีน้ำเงิน 0.0722 แล้ว​หาร (ความ​สว่าง​ของ​สี​ที่​สว่าง​กว่า + 0.05) ด้วย (ความ​สว่าง​ของ​สี​ที่​มืด​กว่า + 0.05) ผลอ​อก​มา​ตั้งแต่ 1:1 สำหรับ​สี​เดียวกัน​ถึง 21:1 สำหรับ​ดำ​กับ​ขาว น้ำ​หนัก​ที่​ต่าง​กัน​มาก​นี้​ทำให้​สี​เขียว​สด​ดู​สว่าง​กว่า​สีน้ำเงิน​สด​เสมอ แม้​เฉด​จะ​ดู​เข้ม​พอกัน

เกณฑ์​ข้อ 1.4.1 ระดับ A หมายความ​ว่า​แม้​ชุด​สี​จะ​ผ่าน​ค่า​ความ​ต่าง​ทุก​คู่ ถ้า​หน้า​เว็บ​บอก​สถานะ​ด้วย​การ​เปลี่ยน​สี​อย่าง​เดียว เช่น สินค้า​หมด​แสดง​เป็น​ราคา​สี​เทา​โดย​ไม่มี​คำ​ว่า "หมด" หน้า​นั้น​ก็​ยัง​ไม่​ผ่าน

ลูกค้า​ที่​แยก​สี​บาง​คู่​ไม่​ออก

บทความ​ทบทวน​เรื่องเกณฑ์​การ​มอง​เห็น​สี​สำหรับ​การ​ขับขี่​ใน​ประเทศ​อาเซียน ใน​วารสาร The Lancet Regional Health – Southeast Asia ปี 2566 ระบุ​ว่า​ภาวะ​บกพร่อง​การ​มอง​เห็น​สี​แต่​กำเนิด​พบ​ใน​เพศ​ชาย​มากกว่า​เพศ​หญิง ราว​ร้อย​ละ 8 เทียบ​กับ​ร้อย​ละ 0.4 และ​ยัง​เกิด​ภาย​หลัง​ได้​จาก​โรค​ตา เช่น ต้อกระจก จอ​ประสาท​ตา​เสื่อม​ตาม​วัย ต้อหิน และ​เบา​หวาน​ขึ้น​จอ​ตา

ร้าน​ค้า​ต้อง​สนใจ​เรื่อง​ตาบอด​สี​แค่​ไหน

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

แนวทาง​แก้​ใช้​หลัก​เดียว​กับ​ข้อ 1.4.1 ใน​พื้นที่​จริง คือ​ให้​ทุก​ความ​หมาย​มี​สัญญาณ​ที่​สอง​เสมอ เช่น ไอคอน​พริก คำ​ว่า "ลด" หรือ​รูป​ทรง​ของ​ป้าย มาตรฐาน มอก. 635-2554 ใช้​หลัก​เดียวกัน​นี้​อยู่​แล้ว ป้าย​ห้าม​กับ​ป้าย​อุปกรณ์​อัคคี​ภัย​เป็น​สี​แดง​ทั้ง​คู่ แต่​แยก​กัน​ด้วย​วงกลม​กับ​สี่เหลี่ยม

วัด​ชุด​สี​ของ​ฟิจิ⁠ทัล​ด้วย​สูตร​เดียวกัน

ฟิจิ⁠ทัล​วัด​ชุด​สี​ใน​คู่มือ​แบรนด์​ของ​ตัว​เอง​ด้วย​สูตร WCAG ที่​อธิบาย​ด้าน​บน เทียบ​กับ​พื้น​ขาว #FFFFFF พื้น​สว่าง​ของ​เอกสาร #F4F6F9 และ​พื้น​มืด​ของ​เว็บไซต์ #0A0A0F ผล​คือ​สี​เดียวกัน​ผ่าน​บาง​พื้น​และ​ไม่​ผ่าน​บาง​พื้น

สี​ใน​คู่มือ​แบรนด์ ค่า​สี บน​พื้น​ขาว บน​พื้น​เอกสาร บน​พื้น​เว็บ​สี​มืด
อิน​ดิ​โก้ (สีห​ลัก) #2C1F60 14.27:1 13.18:1 1.38:1
ชมพู (สี​เน้น) #EA1B56 4.38:1 4.05:1 4.50:1
สเปซ (สี​รอง) #1C2C58 13.54:1 12.51:1 1.46:1
ทอง (เรท​การ์ด) #AB8C24 3.23:1 2.98:1 6.12:1

ตัวเลข​นี้​คำนวณ​โดย​ทีม​ฟิจิ⁠ทัล​เมื่อ 26 กันยายน 2569 จาก​ค่า​สี​ใน​คู่มือ​แบรนด์​ฉบับ​ใช้​งาน ผู้​อ่าน​ตรวจ​ซ้ำ​ได้​ด้วย​เครื่อง​มือ​วัด​ค่า Contrast Ratio ทั่วไป

ตาราง​นี้​บอก​อะไร​กับ​การ​ใช้​งาน​จริง

ตาราง​บอก​ว่าการ​อนุมัติ "สี​แบรนด์" ยัง​ไม่​พอ ต้อง​อนุมัติ​เป็น "คู่​สี" สีชมพู​ผ่าน​เกณฑ์ 3:1 ของ​ปุ่ม​และ​ไอคอน​บน​ทุก​พื้น แต่​ได้ 4.38:1 บน​พื้น​ขาว ต่ำ​กว่า 4.5:1 ของ​ตัว​อักษร​ขนาด​ปกติ​เล็ก​น้อย จึง​เหมาะ​กับ​หัวข้อ​ขนาด​ใหญ่​และ​ปุ่ม​มากกว่า​ข้อความ​เนื้อหา สี​อิน​ดิ​โก้​เข้ม​พอ​จะ​เป็น​ตัว​อักษร​บน​พื้น​สว่าง แต่​บน​พื้น​เว็บ​สี​มืด​ได้​เพียง 1.38:1 จึง​ใช้​เป็น​ตัว​อักษร​บน​พื้น​มืด​ไม่​ได้ ส่วน​สี​ทองบน​พื้น​เอกสาร​ได้ 2.98:1 ต่ำ​กว่า​เกณฑ์​ปุ่ม จึง​ควร​อยู่​บน​พื้น​มืด​หรือ​มี​ขอบ​กำกับ

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

ตรวจ​ชุด​สี​ห้า​ขั้น​ก่อน​อนุมัติ

การ​อนุมัติ​ชุด​สี​ที่​ใช้ได้​ทั้ง​ใน​ร้าน​และ​บน​จอ​เริ่ม​จาก​เขียน​รายการ​คู่​สี​ที่​จะ​เกิด​ขึ้น​จริง ไม่ใช่​ดู​แผ่น​สี​ที​ละ​สี ลำดับ​ด้าน​ล่าง​ใช้​เอกสาร​สาม​ชุด​ที่​อ้าง​ใน​บท​นี้​เป็น​เกณฑ์

  1. เขียน​รายการ​พื้น​หลัง​ทุก​แบบ​ที่​แบรนด์​จะ​เจอ ทั้ง​พื้น​เว็บ พื้น​เอกสาร ผนัง​ร้าน และ​วัสดุ​ป้าย แล้ว​วัด​ค่า​ความ​ต่าง​ของ​สีห​ลัก​และ​สี​เน้น​กับ​พื้น​แต่ละ​แบบ
  2. แยก​คู่​สี​ตาม​หน้าที่ คู่​ที่​ใช้​กับ​ตัว​อักษร​เนื้อหา​ต้อง​ได้ 4.5:1 คู่​ที่​ใช้​กับ​ปุ่ม ขอบ​ช่อง​กรอก และ​ไอคอน​ต้อง​ได้ 3:1
  3. หา​ทุก​จุด​ที่​สี​ทำ​หน้าที่​บอก​ข้อมูล​เพียง​อย่าง​เดียว ทั้ง​บน​หน้า​เว็บ บน​เมนู และ​บน​ป้าย​ราคา แล้ว​เพิ่ม​ข้อความ ไอคอน หรือ​รูป​ทรง​กำกับ
  4. เดิน​ดู​ผัง​ร้าน​คู่​กับ​ตาราง​ที่ 1 ของ มอก. 635-2554 จุด​ที่​สี​แบรนด์​เป็น​แดง เขียว น้ำเงิน หรือ​เหลือง และ​มี​รูป​ทรง​วงกลม สามเหลี่ยม หรือ​สี่เหลี่ยม​จัตุรัส ให้​ย้าย​หรือ​เปลี่ยน​รูป​ทรง​เมื่อ​อยู่​ใกล้​ป้าย​จริง
  5. บันทึก​ผล​เป็น​คู่​สี​ที่​อนุญาต​ใน​คู่มือ​แบรนด์ เช่น "ชมพู​บน​พื้น​ขาว​ใช้​กับ​หัวข้อ 24 พอ​ยต์​ขึ้น​ไป" แทน​การ​เขียน​แค่​ค่า​สี

ขั้น​ตอน​ที่ 1 ต้อง​ทำ​แยก​กับ​สี​ที่​พิมพ์​จริง เพราะ​สี​บน​จอ​กับ​สี​บน​วัสดุ​พิมพ์​ใช้​ระบบ​สี​ต่าง​กัน ราย​ละเอียด​อยู่​ใน​บท RGB vs CMYK และ DPI สี​จอ​กับ​สี​พิมพ์​ต่าง​กัน​ตาม​ค่า​วัด​ของ ICC ส่วน​การ​วาง​สี​เหล่า​นี้​ลง​ใน​ภาพ​และ​หน้า​เว็บ​ให้​สายตา​ไป​ถูก​จุด อ่าน​ต่อ​ได้​ใน​บท Rule of Thirds คือ​อะไร องค์​ประกอบ​ภาพ​ตาม​งาน​วิจัย​การ​มอง​จริง

ต้อง​ทดสอบ​กับ​ผู้​ใช้​จริง​ไหม หรือ​ใช้​เครื่อง​มือ​วัด​อย่าง​เดียว​พอ

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

สรุป

ทฤษฎี​สี​บอก​ว่า​สี​คู่​ใด​ตัด​กัน​หรือ​กลมกลืน จิตวิทยา​สี​บอก​ว่า​ผู้​ชม​ตีความ​สี​อย่างไร แต่​ชุด​สี​แบรนด์​ที่​ใช้​ทั้ง​ใน​ร้าน​และ​บน​จอ​ต้อง​ผ่าน​เกณฑ์​ภายนอก​อีก​สอง​ชุด ใน​พื้นที่​จริง มอก. 635-2554 กำหนด​ความ​หมาย​ของ​แดง ฟ้า เหลือง และ​เขียว​คู่​กับ​รูป​ทรง​ไว้​แล้ว บนจอ WCAG 2.2 ข้อ 1.4.1 ห้าม​ใช้​สี​เป็น​สัญญาณ​เดียว​และ​ข้อ 1.4.11 กำหนด​ค่า​ความ​ต่าง 3:1 ตัวเลข 62-90% ของ Singh เป็นการ​ประเมิน​ช่วง​แรก ไม่ใช่​การ​ตัดสิน​ใจ​ซื้อ การ​อนุมัติ​ที่​ใช้ได้​จริง​จึง​อนุมัติ​เป็น​คู่​สี​ตาม​พื้นที่​ใช้​งาน

คำถามที่พบบ่อย (FAQ)

ตาราง​ที่ 1 ของ มอก. 635-2554 ระบุ​สี​เหลือง​สำหรับ​เครื่องหมาย​เตือน​และ​ใช้​สี​ดำ​เป็น​สี​ตัด​กับ​สี​สัญลักษณ์​ภาพ ถ้า​สี​แบรนด์​เป็น​ส้ม​หรือ​เหลือง ให้​ระวัง​การ​วาง​รูป​สามเหลี่ยม​ขอบ​ดำ​ใน​พื้นที่​เดียว​กับ​ป้าย​เตือน​จริง เพราะ​ผู้​มา​ใช้​บริการ​อาจ​อ่าน​เป็น​ป้าย​เตือน​อันตราย

W3C ออก WCAG ใน​สถานะ​ข้อ​แนะนำ (Recommendation) และ​กฎหมาย​ไทย​ยัง​ไม่​ได้​บังคับ​เกณฑ์​นี้​กับ​เว็บ​ของ​เอกชน​โดยตรง ธุรกิจ​มัก​เจอ​เกณฑ์​นี้​ผ่าน​เงื่อนไข​ใน​สัญญา​หรือ​เอกสาร​จัด​ซื้อ​ของ​หน่วย​งาน​ที่​เป็น​ลูกค้า ส่วน​เหตุผล​ทาง​ธุรกิจ​คือ​ลูกค้า​ที่​อ่าน​ไม่​ออก​หรือ​หา​ปุ่ม​ไม่​เจอ​จะ​ออก​จาก​หน้า​เว็บ​ก่อน​ซื้อ

ประกาศ​กระทรวง​อุตสาหกรรม​ฉบับ​ที่ 4386 (พ.ศ. 2554) ออก​ตาม​มาตรา 15 ของ พ.ร.บ.มาตรฐาน​ผลิตภัณฑ์​อุตสาหกรรม ซึ่ง​เป็น​มาตรา​ที่​ใช้​กำหนด​มาตรฐาน ข้อ​กำหนด​เรื่อง​การ​ติด​ป้าย​ใน​สถาน​ประกอบ​การ​มา​จาก​กฎหมาย​เฉพาะ​ด้าน เช่น กฎหมาย​ความ​ปลอดภัย​ใน​การ​ทำงาน​หรือ​กฎหมาย​อาคาร ผู้​ประกอบ​การ​ควร​ตรวจ​กับ​หน่วย​งาน​ที่​กำกับ​กิจการ​ของ​ตนเอง

ไม่​ต้อง WCAG ยกเว้น​ตัว​อักษร​ที่​เป็น​ส่วน​หนึ่ง​ของ​โลโก้​หรือ​ชื่อ​แบรนด์​จาก​เกณฑ์​ข้อ 1.4.3 ทาง​ที่​ใช้​กัน​คือ​เก็บ​สี​เดิม​ไว้​ใน​โลโก้​และ​งาน​กราฟิก แล้ว​เพิ่ม​เฉด​ที่​เข้ม​ขึ้น​หรือ​อ่อน​ลง​ของ​สี​เดียวกัน​สำหรับ​ตัว​อักษร​และ​ปุ่ม

ใช้​เป็น​ค่า​ประมาณ​ทั่วไป​เท่านั้น บทความ​ทบทวน​ใน The Lancet Regional Health – Southeast Asia อ้าง​ตัวเลข​นี้​เป็น​ค่า​ทั่วไป​ของ​เพศ​ชาย ไม่​ได้​แยก​ตาม​ประเทศ ถ้า​ต้องการ​ตัวเลข​ของ​ประชากร​ไทย​ต้อง​อ้าง​งาน​สำรวจ​ใน​ไทย​ที่​เปิด​อ่าน​วิธี​วัด​ได้

ไม่มี​เกณฑ์​ภายนอก​กำหนด​จำนวน​สี สิ่ง​ที่​กำหนด​ได้​คือ​จำนวน​คู่​สี​ที่​ผ่าน​เกณฑ์ ชุด​สี​สาม​สี​ที่​มี​พื้น​หลัง​สาม​แบบ​มี​คู่​สี​ให้​ตรวจ​เก้า​คู่ ยิ่ง​เพิ่ม​สี​มาก​เท่าไร งาน​ตรวจ​ก่อน​ใช้​จริง​ก็​เพิ่ม​ตาม​ทุก​สื่อ

PHYGITAL INSIGHT

ฟิจิ⁠ทัล​วัด​ชุด​สี​ของ​ตัว​เอง​แล้ว​พบ​ว่า​สีชมพู #EA1B56 ได้ 4.38:1 บน​พื้น​ขาว​แต่​ได้ 4.50:1 บน​พื้น​มืด สี​เดียวกัน​จึง​เปลี่ยน​หน้าที่​ตาม​พื้นที่​วาง​เสมอ เมื่อ​สี​แบรนด์​ต้อง​ขึ้น​ผนัง​และ​ชั้น​วาง​จริง บริการ​ตกแต่ง​ภายใน​ของ​ฟิจิ⁠ทัล​วาง​ผัง​สี​ของ​ร้าน​คู่​กับ​ตำแหน่ง​ป้าย​ทาง​หนี​ไฟ​และ​อุปกรณ์​ดับ​เพลิง​ตั้งแต่​แบบ​ร่าง​แรก ให้​สี​แบรนด์​เด่น​โดย​ไม่​ทำให้​ป้าย​ความ​ปลอดภัย​กลืน​หาย​ไป

ให้ PHYGITAL AGENCY ช่วยต่อยอดเรื่องนี้สู่ผลลัพธ์จริง

สี​แบรนด์​ที่​ผ่าน​เกณฑ์​บน​จอ​อาจ​ไป​ชน​กับ​ป้าย​ความ​ปลอดภัย​บน​ผนัง​ร้าน

ให้ PHYGITAL AGENCY วาง​ผัง​สี​ของ​ร้าน​และ​พื้นที่​บริการ​ให้​สี​แบรนด์​กับ​ป้าย​ความ​ปลอดภัย​อยู่​ด้วย​กัน​ได้​ตั้งแต่​แบบ​ร่าง​แรก

PARANATH PANARATANA

WRITTEN BY

PARANATH PANARATANA

CHAIRMAN OF PHYGITAL AGENCY

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