แปลงรหัสสี HEX RGB HSL และตรวจคอนทราสต์ตามเกณฑ์ WCAG

มาจากข้อกำหนดของ W3C โดยตรง เกณฑ์ 1.4.3 ระดับ AA กำหนดว่าตัวอักษรกับพื้นหลัง ต้องมีอัตราส่วนอย่างน้อย 4.5:1 และผ่อนให้เหลือ 3:1 สำหรับตัวอักษรขนาดใหญ่ ส่วนเกณฑ์ 1.4.6 ระดับ AAA เข้มกว่าคือ 7:1 และ 4.5:1 สำหรับตัวอักษรขนาดใหญ่ นอกจากนี้ยังมีเกณฑ์ 1.4.11 ระดับ AA ที่กำหนด 3:1 สำหรับขอบปุ่ม ไอคอน และกราฟิก ที่จำเป็นต่อการเข้าใจเนื้อหา ในทางปฏิบัติงานส่วนใหญ่ยึดระดับ AA เป็นเป้าหมาย ส่วน AAA มักใช้กับงานที่มีข้อกำหนดเฉพาะ เราแสดงผลทั้งหมดพร้อมกันเพื่อให้คุณเลือกเอง

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

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

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

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