"สวย" เป็นเรื่องรสนิยม แต่ "อ่านออก" วัดได้ ตัวอักษรสีเทาจาง ๆ ดูดีบนจอมอนิเตอร์ดี ๆ แล้วหายไปเลยบนมือถือกลางแดด — เลือกด้วยตาเปล่าเมื่อไร ก็รับประกันว่าเจอปัญหานี้เข้าสักวัน
python3 addons/gohud/tools/check_contrast.py| อะไร | เกณฑ์ที่ต้องผ่าน |
|---|---|
| เนื้อความ | 4.5 : 1 |
| ตัวอักษรขนาดใหญ่ (24px ขึ้นไป) | 3 : 1 |
| เส้นขอบและไอคอนที่ใช้สีเน้น | 3 : 1 |
| เส้นขอบเพื่อการตกแต่ง | 2 : 1 — WCAG ไม่บังคับใช้กฎ 3:1 กับงานตกแต่ง |
| พื้นผิวที่อยู่ติดกัน | 1.12 : 1 — พอให้การ์ดดูแยกออกจากพื้นหลังของมัน |
ตัวอักษรสีเดียวกันบนพื้นย้อมสีเดียวกัน
กับดักนี้โผล่มาแล้ว สามครั้ง ในโค้ดเบสนี้ — ปุ่มขณะถูกกด (พาเนลสีเน้น ป้ายข้อความสีเน้น) ปุ่มอันตราย และชิป มันดูดีเวลาอยู่บนแผ่นตัวอย่างสี แล้วพังทันทีที่ถูกวัด เพราะทั้งสองใช้เฉดสีเดียวกัน จึงไม่มีความต่างของความสว่างเลย
สีของป้ายข้อความจึงไม่ได้ถูกเลือกด้วยมือ ตัวสร้างธีมและ GoSkin ต่างก็ดัน
ความสว่าง — และดันเฉพาะความสว่างเท่านั้น — จนผ่านเกณฑ์บนพาเนลที่ข้อความนั้นวางอยู่จริง
เฉดสีและความอิ่มตัวยังอยู่ครบ จานสีจึงรักษาบุคลิกของมันไว้ได้ และการเปลี่ยนจานสีก็ยังรักษาคอนทราสต์ไว้ได้ด้วย
สีที่ถูกอ่านเป็นตัวอักษรกับสีที่ถูกระบายเป็นพื้นที่ ต้องการคนละอย่าง
บนธีมสว่าง สีเตือนต้องเข้มลงเพื่อให้ยังอ่านออกในฐานะตัวอักษร (#96500A)
พอสีเติมของแถบสืบทอดค่านั้นไป แถบค่าประสบการณ์ก็กลายเป็นสีน้ำตาล การแก้ด้วยสีอย่างเดียว
ไม่ได้ผล: สีเหลืองสว่างโดยธรรมชาติ มันจึงผ่าน 3:1 แม้ไม่มีรางสีเทาอยู่เลย และการทำให้รางเข้มลง
ยิ่งแย่กว่าเดิม (1.52 → 1.06)
ทั้งสองอย่างจึงถูกแยกออกจากกัน สียังคงความสด — จานสีบรรจุสีที่ใช้เติมอย่างเดียวไว้ เช่น
warning_vivid ส่วนขอบเป็นตัวแบกคอนทราสต์ — GoSkin วาดเส้นขอบ 1dp
ให้กับสีเติมทุกสีที่ทำคอนทราสต์ 3:1 กับรางของมันไม่ได้ คำถามที่ว่า "เต็มแค่ไหน" จึงยังอ่านออก
MY_LIGHT = dict(
warning=hexc("9A5407"), # อ่านในฐานะตัวอักษร
warning_vivid=hexc("F2A007"), # ระบายลงบนแถบ
)*_vivid สีเติมที่ออกมาทึมจะทำให้
ตัวสร้างพิมพ์ข้อความ the bar looks drab — add warning_vivid to the palette
(ภาษาเกาหลี: "แถบดูทึม — เพิ่ม warning_vivid ลงในจานสี") จุดที่เคยเสื่อมคุณภาพอย่างเงียบ ๆ
ตอนนี้พูดออกมาแล้ว
พาเนลที่ลอยอยู่ไม่มีทางรู้ว่าข้างหลังมันคืออะไร
HUD ถูกวาดทับฉากเกม — อาจเป็นทุ่งหิมะ หรือถ้ำมืด ถ้าพาเนลของมันกึ่งโปร่งใส สิ่งที่อยู่ข้างหลัง
จะทะลุออกมาและเปลี่ยนสีของพาเนล ลากคอนทราสต์ของตัวอักษรลงไปด้วย ที่ความทึบ 82%
ตัวอักษรโทนจางของธีมมืดตกลงไปเหลือ 3.74:1 เมื่อพื้นหลังสว่าง — ต่ำกว่าเกณฑ์ขั้นต่ำ
พาเนลกึ่งโปร่งใสจึงถูกวัดโดยมีสีขาวล้วนและดำล้วนอยู่ข้างหลัง เพราะนั่นคือสิ่งที่เลวร้ายที่สุด ที่ฉากเกมจะยัดเยียดให้ได้ พาเนล HUD ของธีมที่แถมมามีความทึบมากพอจะผ่าน (92%) ขณะที่ยังคงลุคใสแบบกระจกไว้
ด้วยเหตุผลเดียวกัน สีของไอคอนก็ไม่ได้ถูกตรึงไว้เช่นกัน สัญลักษณ์ในควิกสล็อตเคยถูกฮาร์ดโค้ด
เป็นสีขาวและวัดได้ 1.11:1 บนธีมสว่าง — ตอนนี้มันเดินตามพาเนลที่มันวางอยู่
เหมือนกับที่ป้ายข้อความทำเป๊ะ ๆ
check_contrast.py อ่านจากไฟล์ธีม
ส่วนสีที่สกินผสมขึ้นขณะรัน (ชิป สล็อต) ถูกวัดโดยหัวข้อ skin contrast
ของชุดทดสอบที่รันอยู่ใน Godot