ตรวจ contrast ของสี

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

สีของฉันถูกส่งไปไหนไหม

ไม่ การคำนวณเกิดขึ้นในแท็บนี้ขณะที่คุณพิมพ์ นโยบายความปลอดภัยของเว็บกำหนด connect-src ‘none’ เบราว์เซอร์จึงบล็อกการเรียกเครือข่ายจากหน้านี้ ต่อให้โค้ดอยากส่งอะไรออกไปก็ส่งไม่ได้

ตัวเลข 4.5 กับ 3 มาจากไหน

มาจากเกณฑ์ WCAG ข้อ 1.4.3 ซึ่งเป็นระดับที่งานด้านการเข้าถึงเกือบทั้งหมดยึด และเป็นสิ่งที่กฎหมายหลายประเทศอ้างถึง 4.5 ต่อ 1 คือตัวอักษรทั่วไป ส่วนตัวอักษรใหญ่ต้องการแค่ 3 เพราะรูปตัวอักษรที่ใหญ่กว่าทนต่อ contrast ที่ต่ำกว่าได้ ส่วนระดับ AAA ซึ่งเป็นข้อ 1.4.6 ยกขึ้นเป็น 7 กับ 4.5 เหมาะกับอะไรที่คนต้องอ่านนาน ๆ

ตัวอักษรใหญ่นับยังไง

24 พิกเซล หรือ 18.66 พิกเซลถ้าเป็นตัวหนา ตัวเลขหลังดูเหมือนสุ่มมาแต่ไม่ใช่ เพราะเกณฑ์เขียนไว้เป็นหน่วยพอยต์คือ 14pt ตัวหนา และ 14pt เท่ากับ 18.66px พอดี นี่คือเส้นที่คนพลาดบ่อยที่สุด มักพลาดเพราะคิดว่าหัวข้อต้องนับเป็นตัวใหญ่โดยอัตโนมัติ ทั้งที่ตั้งไว้ที่ 18px ซึ่งไม่ผ่าน

บรรทัดที่บอกเรื่องเส้นขอบกับไอคอนคืออะไร

คือเกณฑ์ WCAG ข้อ 1.4.11 ที่เพิ่มเข้ามาปี 2018 ครอบคลุมทุกอย่างที่ไม่ใช่ตัวอักษรแต่ยังสื่อความหมาย เช่นเส้นขอบช่องกรอก ไอคอนที่เป็นป้ายเดียวของปุ่ม กรอบที่บอกว่าโฟกัสอยู่ตรงไหน หรือเส้นในกราฟ ทั้งหมดต้องได้ 3 ต่อ 1 เทียบกับสิ่งที่อยู่ข้าง ๆ เว็บตรวจส่วนใหญ่ไม่พูดถึงเลย และเป็นข้อที่เว็บซึ่งดูแลอย่างดีแล้วยังพลาดมากที่สุด

สีที่แนะนำมาคำนวณยังไง

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

ทำไมถึงไม่รับสีที่มีความโปร่งใส

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