Skip to main content

Broadcast-Safe Colors

งานถ่ายทอดสด/ออกอากาศมีข้อจำกัดด้านสีที่ต่างจากเว็บ — สีที่ผ่าน WCAG บนจอคอมพิวเตอร์ อาจ "เลือด" (bloom/bleed) หรือแสดงผลผิดเพี้ยนบนกล้อง/จอทีวีได้

Broadcast-Safe Range​

  • หลีกเลี่ยงสีอิ่มตัวสุดขั้ว (over-saturated) — โดยเฉพาะสีแดง/ส้มความอิ่มตัวสูง ซึ่ง #FF6727 (B.Grimm Orange) จัดอยู่ในกลุ่มนี้ สำหรับพื้นที่กราฟิกขนาดใหญ่ (full-screen graphic, background fill) ให้ลดความอิ่มตัวลงเล็กน้อยจากค่าดิจิทัลปกติ เพื่อลด chroma bleeding บนเซนเซอร์กล้องและการส่งสัญญาณ
  • ใช้ #FF6727 เต็มความอิ่มตัวได้ตามปกติสำหรับพื้นที่เล็ก (โลโก้, ไอคอน, เส้นกรอบ, lower-third) ที่ไม่ครอบคลุมพื้นที่จอเป็นบริเวณกว้าง
  • Dark Grey (#63666F) และ White ปลอดภัยสำหรับกล้องอยู่แล้ว ไม่ต้องปรับ
เปรียบเทียบ: พื้นที่ใหญ่ (Full-Screen Graphic)
Orange เต็มความอิ่มตัว
พื้นที่ใหญ่
⚠ ไม่แนะนำสำหรับ Broadcast
#FF6727 — sRGB เต็ม
สีอิ่มตัวสูงทำให้เกิด chroma bleeding บนเซนเซอร์กล้องและการส่งสัญญาณ
Orange ลดความอิ่มตัว
พื้นที่ใหญ่
✓ Broadcast-Safe
#E86E3A — ลด Saturation ~12%
ลด chroma ให้อยู่ในช่วงที่กล้อง/จอทีวีรองรับโดยไม่เพี้ยน ใช้สำหรับพื้นหลังหรือกราฟิกขนาดใหญ่
Dark Grey
พื้นที่ใหญ่
✓ Safe โดยไม่ต้องปรับ
#63666F
สีเทาไม่อิ่มตัว — ปลอดภัยสำหรับกล้องและการส่งสัญญาณอยู่แล้ว

ความแตกต่างระหว่างสี sRGB ปกติกับ broadcast-safe version จะเห็นชัดเจนเฉพาะพื้นที่ขนาดใหญ่ — พื้นที่เล็ก (โลโก้, ไอคอน) ใช้ #FF6727 เต็มความอิ่มตัวได้ตามปกติ

สีสำหรับพื้นที่เล็ก — ใช้ความอิ่มตัวเต็มได้
#FF6727
#E86E3A
#63666F

สำหรับพื้นที่เล็ก (≤ 10% ของจอ) — ใช้ #FF6727 เต็มความอิ่มตัวได้ โดยไม่ต้องลด saturation เพราะพื้นที่จำกัดทำให้ chroma bleeding ไม่เป็นปัญหา

ต่างจาก Contrast Requirement ของเว็บ​

เว็บ (WCAG)Broadcast
เกณฑ์หลักContrast ratio ตัวเลข (4.5:1 / 3:1)Luminance/chroma ที่กล้อง-จอทีวีรองรับโดยไม่เพี้ยน
ความเสี่ยงหลักตัวอักษรอ่านไม่ออกสำหรับผู้ใช้สายตาเลือนรางสี "เลือด" ทะลุขอบ (bloom), สัญญาณส่งผิดเพี้ยนเมื่อบีบอัด
การใช้สีอิ่มตัวสูงพื้นที่ใหญ่ทำได้ถ้า contrast ผ่านควรลดความอิ่มตัวลงแม้ contrast ตัวเลขจะผ่าน

ทั้งสองเกณฑ์ ไม่แทนกันได้ — งาน broadcast ต้องผ่านทั้งคู่: เช็ค contrast ตาม Accessibility & Contrast สำหรับตัวอักษร และเช็คความอิ่มตัวสำหรับพื้นที่กราฟิกใหญ่ตามแนวทางนี้เพิ่มเติม

Safe Area สำหรับ Title/Overlay​

ใช้มาตรฐาน broadcast-safe area ทั่วไป:

  • Action-safe area: เว้นขอบ 5% ของแต่ละด้าน — องค์ประกอบสำคัญทั้งหมดต้องอยู่ในขอบเขตนี้
  • Title-safe area: เว้นขอบ 10% ของแต่ละด้าน — ข้อความ/โลโก้/lower-third ต้องอยู่ในขอบเขตนี้เท่านั้น เพราะจอทีวีบางรุ่น/บางแพลตฟอร์ม stream อาจ crop ขอบจอ

รายละเอียด layout ของ lower-third จริงดูที่ Lower Third & Overlay