← ทำไมตาถึงอ่านกราฟนี้ได้เร็วกว่า
LEVEL 2 · ระดับกลาง
สี — ช่องทางที่ผิดบ่อยที่สุด
สีอยู่ขั้นล่างสุดของบันไดในบทที่ 5 แต่กลับเป็นช่องทางที่คนหยิบมาใช้บ่อยที่สุด บทนี้อธิบายว่าทำไมมันถึงพัง และพังตรงไหนกันแน่
8.1 สีทำงานสองแบบ และคนมักสลับกัน
มีคำถามเดียวที่ต้องตอบให้ได้ก่อนแตะเครื่องมือเลือกสี — สีกำลังบอกว่า "คนละพวก" หรือบอกว่า "มากกว่า-น้อยกว่า"
| ใช้สีเพื่อ | ต้องการชุดสีแบบ | หลักการ |
|---|---|---|
| แยกกลุ่มที่ไม่มีลำดับ | หลายสีที่ต่างชนิดกัน | ความสว่างควรใกล้กัน ไม่งั้นจะดูเหมือนมีลำดับทั้งที่ไม่มี |
| บอกปริมาณจากน้อยไปมาก | สีเดียว ไล่ความสว่าง | ความสว่างต้องไล่ทางเดียว ห้ามกลับทิศ |
| บอกระยะห่างจากจุดกลาง | สองสี พบกันตรงกลางที่สว่างที่สุด | จุดกลางต้องมีความหมายจริง เช่น ศูนย์ หรือค่าเป้าหมาย |
ความผิดพลาดที่พบบ่อยที่สุดคือเอาชุดแบบแรกไปทำงานของแบบที่สอง — ใช้หลายสีเพื่อบอกปริมาณ ซึ่งพาเราไปหาชุดสีรุ้ง
8.2 ทำไมชุดสีรุ้งถึงพัง
เส้นข้างล่างชุดสีคือ ความสว่างสัมพัทธ์ ของแต่ละขั้น ไม่ใช่ของตกแต่ง
ชุดสีรุ้งกลับทิศ 3 ครั้ง — ความสว่างขึ้นแล้วลง ลงแล้วขึ้น ตาที่พยายามเรียงลำดับจากภาพจึงหาลำดับไม่เจอ และยังไปสร้าง ขอบเขตปลอม ตรงจุดที่ความสว่างกระโดด ทำให้ข้อมูลที่ค่อย ๆ เปลี่ยนดูเหมือนมีเส้นแบ่งชัด ๆ ทั้งที่ไม่มี
ส่วนชุดไล่เฉดสีเดียวลดลงทางเดียวตลอด ไม่กลับทิศเลยสักครั้ง ตาจึงเรียงลำดับได้โดยไม่ต้องดูคำอธิบายสัญลักษณ์
💡 ทำไมความสว่างถึงเป็นตัวชี้ขาด — คนที่มีภาวะตาบอดสีจะแยก เฉดสี บางคู่ไม่ออก แต่ยังเห็น ความสว่าง ได้ปกติ · ชุดสีที่ไล่ความสว่างทางเดียว จึงยังอ่านรู้เรื่องทั้งกับคนตาบอดสี ทั้งเวลาพิมพ์ขาวดำ และทั้งเวลาโปรเจกเตอร์สีเพี้ยน · ตัวเลขที่ถูกอ้างบ่อยที่สุดคือ 8% ของผู้ชาย แต่นั่นเป็นค่าของประชากรเชื้อสายยุโรปเหนือ ส่วนประชากรเอเชียตะวันออกและเอเชียตะวันออกเฉียงใต้ต่ำกว่านั้น ราว 4 ถึง 5% · ในห้องประชุมที่มีผู้ชาย 12 คน ช่วงนี้แปลเป็นโอกาสมีอย่างน้อยหนึ่งคนราว 43% ถึง 63% ขึ้นกับว่าใช้อัตราไหน — ไม่ใช่เรื่องแน่นอน แต่ก็บ่อยพอที่จะไม่ควรเสี่ยง
8.3 วัดชุดสีของคุณเอง
ชุดสีทั้งสองในภาพไม่ได้เลือกด้วยมือ มันถูกสร้างและวัดด้วยสคริปต์นี้ (color.py) · ค่า hex ที่มันพิมพ์ออกมาคือค่าที่เว็บนี้ใช้วาดแถบสีข้างบนจริง ๆ
"""สร้างชุดสีสองแบบแล้ววัดความสว่างของแต่ละขั้น — Python มาตรฐานล้วน"""
import colorsys
N = 7
def to_hex(r, g, b):
return "#%02x%02x%02x" % (round(r * 255), round(g * 255), round(b * 255))
def luminance(r, g, b):
"""ความสว่างสัมพัทธ์ตามสูตร WCAG — ถ่วงน้ำหนักตามความไวของตาต่อแต่ละช่องสี"""
def lin(c):
return c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
# แบบที่หนึ่ง: กวาดสีรุ้ง จากน้ำเงินไปแดง ความสว่างปล่อยตามยถากรรม
rainbow = [colorsys.hls_to_rgb(h, 0.5, 0.95)
for h in [(240 - 240 * i / (N - 1)) / 360 for i in range(N)]]
# แบบที่สอง: สีเดียว ไล่ความสว่างอย่างเดียว
seq = [colorsys.hls_to_rgb(20 / 360, 0.92 - 0.72 * i / (N - 1), 0.55) for i in range(N)]
for name, ramp in (("สีรุ้ง", rainbow), ("ไล่เฉดสีเดียว", seq)):
print(f"=== {name} ===")
lums = []
for i, (r, g, b) in enumerate(ramp):
L = luminance(r, g, b)
lums.append(L)
print(f" ขั้น {i + 1}: {to_hex(r, g, b)} ความสว่าง {L:.3f}")
steps = [round(lums[i + 1] - lums[i], 3) for i in range(len(lums) - 1)]
print(f" ผลต่างความสว่างทีละขั้น: {steps}")
mono = all(s < 0 for s in steps) or all(s > 0 for s in steps)
print(f" ไล่ทางเดียวตลอดไหม: {'ใช่' if mono else 'ไม่ใช่'}")
flips = sum(1 for i in range(len(steps) - 1) if steps[i] * steps[i + 1] < 0)
print(f" จำนวนครั้งที่กลับทิศ: {flips}\n")ผลรันจริง
=== สีรุ้ง ===
ขั้น 1: #0606f9 ความสว่าง 0.070
ขั้น 2: #06a8f9 ความสว่าง 0.348
ขั้น 3: #06f9a8 ความสว่าง 0.704
ขั้น 4: #06f906 ความสว่าง 0.676
ขั้น 5: #a8f906 ความสว่าง 0.758
ขั้น 6: #f9a806 ความสว่าง 0.480
ขั้น 7: #f90606 ความสว่าง 0.202
ผลต่างความสว่างทีละขั้น: [0.278, 0.356, -0.028, 0.083, -0.278, -0.278]
ไล่ทางเดียวตลอดไหม: ไม่ใช่
จำนวนครั้งที่กลับทิศ: 3
=== ไล่เฉดสีเดียว ===
ขั้น 1: #f6e7df ความสว่าง 0.820
ขั้น 2: #e8c3b0 ความสว่าง 0.592
ขั้น 3: #da9e81 ความสว่าง 0.411
ขั้น 4: #cd7a51 ความสว่าง 0.275
ขั้น 5: #ae5c32 ความสว่าง 0.168
ขั้น 6: #7e4325 ความสว่าง 0.086
ขั้น 7: #4f2a17 ความสว่าง 0.034
ผลต่างความสว่างทีละขั้น: [-0.228, -0.18, -0.136, -0.107, -0.082, -0.052]
ไล่ทางเดียวตลอดไหม: ใช่
จำนวนครั้งที่กลับทิศ: 0เอาชุดสีที่คุณใช้อยู่มาใส่แล้วรันดู ถ้า จำนวนครั้งที่กลับทิศไม่เป็นศูนย์ และคุณกำลังใช้มันบอกปริมาณ คุณเจอปัญหาแล้ว
⚠️ สคริปต์นี้ตรวจได้อย่างเดียวคือความสว่างไล่ทางเดียวไหม มันไม่ได้บอกว่าชุดสี ห่างกันสม่ำเสมอ ในการรับรู้หรือเปล่า ซึ่งเป็นคนละเรื่องและต้องใช้ปริภูมิสีที่ออกแบบมาเพื่อการรับรู้โดยเฉพาะ
8.4 สามข้อที่ใช้ได้พรุ่งนี้
- นับสีก่อน ถ้าต้องใช้เกินหกเจ็ดสีเพื่อแยกกลุ่ม แปลว่าไม่ควรแยกด้วยสีตั้งแต่แรก ให้จัดกลุ่มใหม่หรือแยกเป็นภาพชุด
- เน้นด้วยสีเดียว บทที่ 2 บอกแล้วว่าสีเด้งแรงที่สุดเมื่อมีสีเดียวที่ต่างจากพวก · ยิ่งเติมสีที่ต้องแยกจากกันมากขึ้น การอ่านยิ่งเลื่อนไปทางไล่หาทีละชิ้น
- ทดสอบด้วยการทำให้เป็นขาวดำ ถ้าภาพยังอ่านรู้เรื่อง แปลว่าคุณไม่ได้ให้สีแบกงานที่มันแบกไม่ไหว