- CSS
contrast-color() ช่วยให้เบราว์เซอร์เลือกสีข้อความเป็น ดำหรือขาว ให้เข้ากับสีที่เปลี่ยนบ่อย เช่น พื้นหลังปุ่ม ลดภาระในการต้องดูแลคู่สีแยกกัน
- เมื่อส่งสีอ้างอิงเข้าไป เช่น
color: contrast-color(var(--button-color)); ระบบจะคำนวณใหม่เพื่อเลือกตัวเลือกที่ให้ คอนทราสต์สูงกว่า ตามการเปลี่ยนของสีพื้นหลัง
- ปัจจุบัน Safari Technology Preview ใช้อัลกอริทึมคอนทราสต์แบบ WCAG 2 จึงเลือกข้อความสีดำบนพื้นหลัง
#317CFF แต่ในแง่การรับรู้ของมนุษย์ สีขาวอาจดูเป็นธรรมชาติกว่า
- ฟีเจอร์นี้ไม่ได้รับประกันการเข้าถึงโดยอัตโนมัติ และยังคงต้องมี การตรวจสอบด้านการออกแบบ เช่น พาเลตต์ ขนาดตัวอักษร น้ำหนักฟอนต์ และ
prefers-contrast
- CSS Working Group จำกัดฟีเจอร์นี้ไว้ที่การ เลือกดำ/ขาว จนกว่าการถกเถียงเรื่องอัลกอริทึมคอนทราสต์ของ WCAG 3 จะได้ข้อสรุป และเครื่องมือเลือกสีที่ซับซ้อนกว่านี้อาจถูกขยายเพิ่มในภายหลัง
contrast-color() ช่วยลดภาระการจัดการสีอย่างไร
- เวลาสร้างปุ่มหลายสีพื้นหลังในเว็บไซต์หรือเว็บแอป มักต้องจับคู่ให้ข้อความเป็นสีขาวเมื่อพื้นหลังมืด และเป็นสีดำเมื่อพื้นหลังสว่าง
- เดิมทีต้องกำหนดทั้ง
--button-color และ --button-text-color ควบคู่กันเพื่อจัดการ คู่สี และในโปรเจกต์ขนาดใหญ่หรือสภาพแวดล้อมที่หลายทีมทำงานร่วมกัน การรักษาคู่สีให้ถูกต้องตลอดเวลาทำได้ยาก
contrast-color() ทำงานโดยรับสีอ้างอิงใน CSS แล้วให้เบราว์เซอร์เลือกสีดำหรือขาวที่มีคอนทราสต์สูงกว่า
color: contrast-color(purple);
- สำหรับปุ่ม สามารถใช้ตัวแปรสีพื้นหลังร่วมกับ
contrast-color() ได้
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
}
- วิธีนี้กำหนดเพียงสีพื้นหลังตัวเดียวก็พอ ส่วนสีข้อความให้เบราว์เซอร์ตัดสินใจตามให้
แตกสีสำหรับแต่ละสถานะจากตัวแปรเดียว
- หากใช้ Relative Color Syntax ร่วมกัน ก็สามารถสร้างสี hover จากสีปุ่มหลัก และให้
contrast-color() คำนวณสีข้อความของแต่ละสถานะได้
:root {
--button-color: purple;
--hover-color: oklch(from var(--button-color) calc(l + .2) c h);
}
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
text-box: cap alphabetic; /* vertically centers the text */
}
button:hover {
background-color: var(--hover-color);
color: contrast-color(var(--hover-color));
}
ผลลัพธ์ชวนขัดใจจากการคำนวณแบบ WCAG 2
contrast-color() ไม่ได้แก้ ปัญหาคอนทราสต์เพื่อการเข้าถึง ได้ทั้งหมดโดยอัตโนมัติ- สีพื้นหลังบางสีอาจให้คอนทราสต์ไม่เพียงพอทั้งกับสีดำและสีขาว จึงยังต้องให้ดีไซเนอร์ นักพัฒนา และผู้ทดสอบช่วยตรวจสอบ
- ณ เดือนพฤษภาคม 2025 การใช้งานใน Safari Technology Preview ใช้อัลกอริทึมแบบ WCAG 2
- บนพื้นหลังสีน้ำเงิน
#317CFF นั้น WCAG 2 คำนวณคอนทราสต์ของข้อความสีดำได้ 5.45:1
- บนพื้นหลังเดียวกัน ข้อความสีขาวได้คอนทราสต์ 3.84:1
contrast-color() จึงเลือกสีดำซึ่งมีตัวเลขสูงกว่า
- แต่ในการรับรู้ของมนุษย์ ข้อความสีขาวอาจดูดีกว่าในคู่สีนี้ และอัลกอริทึมคอนทราสต์สีของ WCAG 2 ก็ถูกวิจารณ์มานานแล้ว
การถกเถียงเรื่องอัลกอริทึมคอนทราสต์ต่อเนื่องใน APCA และ WCAG 3
- Accessible Perceptual Contrast Algorithm(APCA) เป็นหนึ่งในตัวเลือกที่อาจถูกรวมไว้ใน WCAG 3
- APCA Contrast Calculator ประเมินบนพื้นหลัง
#317CFF ว่าข้อความสีดำมีค่า Lc 38.7 และข้อความสีขาวมีค่า Lc -70.9
- ค่าเป็นลบในคะแนน APCA หมายถึงข้อความสว่างกว่าพื้นหลัง
- เมื่อต้องเทียบระดับคอนทราสต์ ให้ดูขนาดของค่าโดยไม่สนเครื่องหมาย คือ 38.7 เทียบกับ 70.9
- ในผลลัพธ์นี้ ข้อความสีขาวมีคอนทราสต์สูงกว่า
- APCA ให้ความสำคัญกับ คอนทราสต์ตามการรับรู้ มากกว่าสัดส่วนทางคณิตศาสตร์แบบง่าย และสะท้อนว่ามนุษย์ไม่ได้รับรู้คอนทราสต์ของสีและความสว่างแบบเชิงเส้น
- มาตรฐาน CSS ยังบังคับให้ใช้อัลกอริทึมเดิมอยู่ในตอนนี้ แต่มีหมายเหตุว่าอาจเพิ่มอัลกอริทึมคอนทราสต์แบบอื่นได้ในอนาคต
- ยังมีการถกเถียงกันต่อไปว่า WCAG 3 จะใช้อัลกอริทึมใด และจะจัดการเรื่องไลเซนส์ของอัลกอริทึมผู้สมัครอย่างไร
เงื่อนไขที่ยังต้องตรวจสอบร่วมกันในการออกแบบจริง
- การที่
contrast-color() เลือกสีที่ดีกว่า ไม่ได้แปลว่าจะรับประกันคอนทราสต์ที่เพียงพอ
- โดยเฉพาะกับสีกลาง ๆ ผลลัพธ์จากแต่ละอัลกอริทึมอาจต่างกันมาก
- สำหรับผู้ใช้ที่ต้องการคอนทราสต์สูงขึ้น สามารถใช้ media query
prefers-contrast ร่วมได้
@media (prefers-contrast: more) {
/* styling with more contrast */
}
- ตัวอย่างใช้
#2DAD4E เป็นสีพื้นหลังของปุ่มแบรนด์ในเว็บไซต์เรือนเพาะชำต้นไม้
- ตามเกณฑ์ APCA คอนทราสต์กับข้อความสีขาวอยู่ที่ Lc -60.4
- ค่านี้เพียงพอหรือไม่นั้นขึ้นอยู่กับขนาดข้อความและน้ำหนักฟอนต์
- APCA ใช้คะแนนเดี่ยวตั้งแต่ Lc -108 ถึง 106 แทนอัตราส่วนแบบ WCAG 2
- APCA Readability Criterion เสนอเป้าหมายระดับ Bronze, Silver และ Gold เพื่อช่วยเลือกขนาดและน้ำหนักตัวอักษร
- ในการคำนวณตัวอย่าง คู่สีข้อความขาวกับ
#2DAD4E ใช้งานได้กับข้อความขนาด 24px เมื่อใช้ font-weight 400 ขึ้นไป และถ้าจะใช้ font-weight 300 ต้องมีขนาดอย่างน้อย 41px
- สำหรับผู้ใช้ที่ร้องขอคอนทราสต์สูงกว่า สามารถกำหนดสีแยกสำหรับโหมดสว่างและโหมดมืดได้
- โหมดสว่าง: เขียวเข้มกว่าและข้อความสีขาว, Lc -76.1
- โหมดมืด: เขียวอ่อนกว่าและข้อความสีดำ, Lc 75.2
--button-color: #2DAD4E; /* brand green background */
@media (prefers-contrast: more) {
@media (prefers-color-scheme: light) {
--button-color: #419543; /* darker green background */
}
@media (prefers-color-scheme: dark) {
--button-color: #77CA8B; /* lighter green background */
}
}
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
font-size: 1.5rem; /* 1.5 * 16 = 24px at normal zoom */
font-weight: 500;
}
- เนื่องจากปัจจุบัน
contrast-color() ยังทำงานด้วยอัลกอริทึม WCAG 2 ตัวอย่างเว็บไซต์นี้จึงอาจยังใช้งานได้ยาก
- แต่ในโปรเจกต์ที่ใช้สีแบรนด์เป็นเขียวเข้มกว่า และการเลือกดำ/ขาวให้ผลถูกต้อง ก็อาจมีประโยชน์ได้ตั้งแต่ตอนนี้
contrast-color() มีประโยชน์อย่างยิ่งเมื่อกำหนดสีสำหรับหลายสถานะหรือหลายตัวเลือก เช่น enabled/disabled, light/dark mode และ prefers-contrast
เหตุผลที่ตอนนี้ยังจำกัดไว้แค่การเลือกดำ/ขาว
- ตอนนี้
contrast-color() ถูกลดความซับซ้อนลงมากเมื่อเทียบกับ color-contrast() ที่มีใน Safari Technology Preview 122
- CSS Working Group เดินหน้าด้วยเครื่องมือที่เลือกได้เฉพาะ ดำหรือขาว ที่ตัดกับสีอ้างอิงก่อน เพราะการถกเถียงเรื่องอัลกอริทึมคอนทราสต์ของ WCAG 3 ยังไม่จบ
- การตรึงตัวเลือกไว้ที่ดำ/ขาวช่วยลดโอกาสที่เว็บไซต์จะพังในภายหลัง หากอัลกอริทึม WCAG 2 ถูกเปลี่ยน
- ในอนาคตอาจมีเครื่องมือที่ทรงพลังขึ้น เช่น ให้เบราว์เซอร์เลือกจากรายการสีที่ผู้ใช้กำหนดเอง หรือกำหนดระดับคอนทราสต์ที่ต้องการได้
contrast-color() ใช้ได้ไม่เฉพาะกับสีข้อความ แต่ยังใช้กับหลายพร็อพเพอร์ตีที่กำหนดสี เช่น พื้นหลัง เส้นขอบ เป็นต้น
ยังไม่มีความคิดเห็น