สีน้ำเงิน​ใน​การ​สร้าง​แบรนด์​บน​เว็บ เมื่อ​สี​แบรนด์​ตรง​กับ​สี​ลิงก์

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

หัวข้อ 15.3.4 ของมาตรฐาน HTML ฉบับ Living Standard ของ WHATWG เขียน​สไตล์​ตั้ง​ต้น​ที่​เบราว์เซอร์​ใช้​กับ​ลิงก์​ไว้​สี่​บรรทัด

• :link { color: #0000EE; }
• :visited { color: #551A8B; }
• :link:active, :visited:active { color: #FF0000; }
• :link, :visited { text-decoration: underline; cursor: pointer; }

ตัวเลข #0000EE ใน​บรรทัด​แรก​คือ​สีน้ำเงิน และ​เป็น​สี​แรก​ที่​ลิงก์​บน​หน้า​เว็บ​ได้​รับ​ก่อน​ที่​ใคร​จะ​แต่ง​อะไร​เลย

หัวข้อ 15.2 ของ​มาตรฐาน HTML ระบุ​ว่า​กฎ CSS ใน​ส่วน​นี้​คาด​หวัง​ให้​เบราว์เซอร์​ใช้​เป็น​สไตล์​ตั้ง​ต้น​ระดับ​เบราว์เซอร์​สำหรับ​ทุก​เอกสาร​ที่​มี​องค์​ประกอบ HTML เว้น​แต่​มี​การ​ระบุ​เป็น​อย่าง​อื่น ค่าที่​เกี่ยว​กับ​ลิงก์​มี​สาม​สถานะ และ​แต่ละ​สถานะ​มี​สี​ระบบ​ที่​ตรง​กัน​ใน​ข้อ​กำหนด CSS

#0000EE เป็น​สีน้ำเงิน​แบบ​ไหน

ค่า #0000EE ไม่มี​แสง​สี​แดง​และ​สี​เขียว​เลย มี​แต่​แสง​สีน้ำเงิน 238 จาก 255 หรือ​ราว​ร้อย​ละ 93 ของ​ค่า​สูงสุด จึง​เป็น​น้ำเงิน​จัด​ที่​เข้ม​กว่า​คำ​ว่า blue ใน CSS ซึ่ง​มี​ค่า #0000FF อยู่​เล็ก​น้อย สีน้ำเงิน​ของ​แบรนด์​ส่วน​ใหญ่​มี​แดง​หรือ​เขียว​ปน​อยู่​บ้าง ค่า​จึง​ไม่​ตรง​กับ #0000EE พอดี แต่​ถ้า​อยู่​ใน​โทน​น้ำเงิน​จัด​เหมือน​กัน คน​ที่​เห็น​ก็​แยก​สอง​สี​นี้​ออก​จาก​กัน​ได้​ยาก

ทำไม​ลิงก์​ที่​กด​แล้ว​เปลี่ยน​เป็น​สี​ม่วง

มาตรฐาน HTML กำหนด​สี #551A8B ให้​ลิงก์​ใน​สถานะ :visited และ W3C อธิบาย​สี​ระบบ VisitedText ไว้​ใน CSS Color 4 ว่า​เป็น​สี​ข้อความ​ของ​ลิงก์​ที่​เคย​เข้า​ชม​แล้ว ซึ่ง​บน​พื้น​สว่าง​เป็น​สี​ม่วง​มา​แต่​เดิม สี​ม่วง​จึง​ทำ​หน้าที่​บอก​ผู้​ใช้​ว่า​ลิงก์​นั้น​เคย​เปิด​แล้ว เรื่อง​สี​ม่วง​ใน​อีก​บริบท​หนึ่ง​เขียน​ไว้​ในสี​ม่วง​ใน​การ​สร้าง​แบรนด์ สี​อัญชัน​เปลี่ยน​ตาม pH และ​อุณหภูมิ

สี​ลิงก์​ตั้ง​ต้น​บน​พื้น​หลัง​สี​เข้ม​เป็น​สี​อะไร

ข้อ​กำหนด​ไม่​ได้​ให้​ค่า​ตายตัว​ไว้ CSS Color 4 เขียน​เพียง​ว่า​สี​ระบบ LinkText บน​พื้น​สว่าง​เป็น​สีน้ำเงิน​มา​แต่​เดิม คำ​อธิบาย​นี้​จำกัด​ไว้​ที่​พื้น​สว่าง จึง​ไม่​ได้​บอก​ว่า​บน​พื้น​มืด​ต้อง​เป็น​สี​อะไร เว็บไซต์​ที่​มี​โหมด​มืด​จึง​ควร​กำหนด​สี​ลิงก์​ของ​โหมด​มืด​เอง และ​ทดสอบ​ว่า​ยัง​แยก​จาก​เนื้อ​ความ​ได้ แทน​การ​ปล่อย​ให้​เบราว์เซอร์​เลือก​ให้

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

ข้อความ​สีน้ำเงิน​ที่​ไม่ใช่​ลิงก์​ควร​ทำ​อย่างไร

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

ป้าย​หน้า​ร้าน​สีน้ำเงิน​ต้อง​เปลี่ยน​ตาม​หน้า​เว็บ​ไหม

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

ข้อความ​สีน้ำเงิน​ใน​รูปภาพ​กด​ได้​ไหม

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

สไตล์​ตั้ง​ต้น​ของ​เบราว์เซอร์​เป็น​ชั้น​ล่าง​สุด​ของ​การ​จัด​ลำดับ CSS สไตล์​ที่​ผู้​สร้าง​เว็บ​เขียน​เอง​จึง​แทนที่​สี​ลิงก์​ได้ แบรนด์​ที่​อยาก​ให้​ลิงก์​เป็น​สีน้ำเงิน​ของ​ตัว​เอง​แทน #0000EE ทำได้​ด้วย​การ​กำหนด​สี​ให้ :link และ :visited และ​ควร​คง​สัญญาณ​อื่น​ของ​ลิงก์​ไว้ เช่น เส้น​ใต้ ส่วน​เคอร์เซอร์​รูป​มือ​ก็​เป็น​ค่า​ตั้ง​ต้น​ใน​บรรทัด​เดียวกัน

สี​ลิงก์​ที่​เคย​กด​แล้ว​แต่ง​ได้​แค่​ไหน

แต่ง​ได้​จำกัด ข้อ​กำหนด Selectors Level 4 ของ W3C ฉบับ 22 มกราคม 2569 ระบุ​ว่า :visited มี​ผล​ต่อ​ความ​เป็น​ส่วน​ตัว เพราะ​เว็บไซต์​อาจ​ใช้​สถานะ​นี้​สืบ​ว่า​ผู้​ใช้​เคย​เข้า​เว็บ​ไหน เบราว์เซอร์​จึง​ต้อง​ปกป้อง​ความ​เป็น​ส่วน​ตัว​ใน​การ​ทำงาน​ของ :visited และ​ข้อ​กำหนด​เสนอ​วิธี​หนึ่ง​คือ​ให้​ลิงก์​จับ​คู่ :visited เฉพาะ​เมื่อ​ปลาย​ทาง หน้า​ต้นทาง และ​เว็บไซต์​ระดับ​บน​ตรง​กับ​ประวัติ​ที่​บันทึก​ไว้ นัก​ออกแบบ​จึง​ไม่​ควร​ฝาก​ความ​หมาย​สำคัญ​ไว้​กับ​สี​ของ​ลิงก์​ที่​เคย​กด

ค่า :focus-visible ใน​สไตล์​ตั้ง​ต้น​เกี่ยว​กับ​สี​แบรนด์​อย่างไร

หัวข้อ 15.3.4 ของ​มาตรฐาน HTML มี​บรรทัด :focus-visible { outline: auto; } อยู่​ถัด​จาก​กฎ​ของ​ลิงก์ ค่า​นี้​ทำให้​เบราว์เซอร์​วาด​เส้น​ขอบ​รอบ​องค์​ประกอบ​ที่​ถูก​เลือก​ด้วย​แป้น​พิมพ์ เวลา​แต่ง​สี​ลิงก์​ให้​เป็น​สี​แบรนด์ จึง​ควร​ตรวจ​ด้วย​ว่า​เส้น​ขอบ​นี้​ยัง​มอง​เห็น​ได้​บน​พื้น​สีน้ำเงิน​ของ​แบรนด์ ถ้า​มอง​ไม่​เห็น ต้อง​กำหนด​สี​เส้น​ขอบ​ใหม่​แทน​การ​ลบ​ทิ้ง

ถอด​เส้น​ใต้​ลิงก์​ออก​ได้​ไหม

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

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

1. ยืนยัน​รหัส​สีน้ำเงิน​หลัก​ของ​แบรนด์​ที่​ใช้บน​ป้าย​และ​เอกสาร​อยู่​แล้ว
2. ตัดสิน​ว่า​ลิงก์​ใช้​สีน้ำเงิน​ของ​แบรนด์​หรือ​ใช้​สี​อื่น แล้ว​กำหนด​สัญญาณ​เสริม​ของ​ลิงก์ เช่น เส้น​ใต้
3. กำหนด​สี​ของ​ลิงก์​ใน​สถานะ​ที่​เคย​กด กำลัง​กด และ​เมื่อ​ชี้​เมาส์ ให้​ต่าง​กัน​พอ​สังเกต​ได้
4. เลือก​สี​เนื้อ​ความ​ธรรมดา​ที่​ไม่ใช่​โทน​เดียว​กับ​ลิงก์
5. เปิด​หน้า​จริง​บน​จอ​โทรศัพท์​และ​คอมพิวเตอร์ แล้ว​ไล่​กด​ทุก​ลิงก์​กับ​ทุก​ปุ่ม​ก่อน​เปิด​ใช้

ปุ่ม​สีน้ำเงิน​กับ​ลิงก์​สีน้ำเงิน​ควร​ต่าง​กัน​ไหม

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

ฟอนต์​ภาษา​ไทย​กับ​เส้น​ใต้​ลิงก์​ต้อง​ระวัง​อะไร

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

ชุด​สี​ลิงก์​ต้อง​มี​กี่​ค่า

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

ข้อ​กำหนด​ที่​ใช้​เป็น​หลัก​ฐาน​ใน​บท​นี้​มี​สาม​ฉบับ คือ​มาตรฐาน HTML ของ WHATWG หัวข้อ 15.2 และ 15.3.4 ข้อ​กำหนด CSS Color 4 ที่ W3C ปรับปรุง​ล่าสุด​เมื่อ 13 กันยายน 2569 และ Selectors Level 4 ฉบับ 22 มกราคม 2569 ข้อ​กำหนด​เหล่า​นี้​บอก​ค่า​ตั้ง​ต้น​และ​การ​ทำงาน​ของ​เบราว์เซอร์ ไม่​ได้​วัด​ว่า​ผู้​ใช้​กด​หรือ​ไม่​กด​ข้อความ​สีน้ำเงิน บท​นี้​จึง​ไม่​ได้​อ้าง​ผล​วิจัย​พฤติกรรม​ผู้​ใช้

เว็บไซต์​ส่วน​ใหญ่​ยัง​ใช้​สี​ลิงก์​ตั้ง​ต้น​อยู่​ไหม

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

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

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

มาตรฐาน HTML ของ WHATWG ให้​เบราว์เซอร์​แสดง​ลิงก์​ที่​ยัง​ไม่​เคย​กด​เป็น​สี #0000EE ลิงก์​ที่​เคย​กด​เป็น #551A8B และ​ขีด​เส้น​ใต้​ทั้ง​สอง​แบบ ข้อ​กำหนด CSS Color 4 อธิบาย​สี​ลิงก์​บน​พื้น​สว่าง​ว่า​เป็น​สีน้ำเงิน​มา​แต่​เดิม แบรนด์​ที่​ใช้​สีน้ำเงิน​บน​ป้าย​จึง​ใช้​สี​เดิม​บน​หน้า​เว็บ​ได้ แต่​ต้อง​แยก​ลิงก์​ออก​จาก​ข้อความ​ธรรมดา​ด้วย​สัญญาณ​อื่น เช่น เส้น​ใต้ และ​ตรวจ​เส้น​ขอบ :focus-visible บน​สี​ของ​แบรนด์​ก่อน​เปิด​ใช้