สี

สีที่เข้าถึงได้ง่าย

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

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

คอนทราสต์

• มาตรฐานคอนทราสต์ขั้นต่ำ: รักษาอัตราส่วน 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่หรือไอคอน
• ตรวจสอบมาตรฐานคอนทราสต์ที่ไม่ใช่ข้อความ: รักษาอัตราส่วนคอนทราสต์ขั้นต่ำที่ 3:1 สำหรับขอบเขตและสถานะของคอมโพเนนต์อินเทอร์เฟซผู้ใช้
  • ซึ่งรวมถึงองค์ประกอบภาพ (เส้นขอบ พื้นหลัง เงาของกล่อง การขีดเส้นใต้) ที่สร้างขอบเขตหรือระบุว่ามีคอมโพเนนต์ UI (เช่น เส้นขอบของช่องป้อนข้อมูล)
  • ซึ่งรวมถึงองค์ประกอบภาพที่ระบุสถานะที่ใช้งานอยู่ภายในคอมโพเนนต์ (เช่น เครื่องหมายถูกในช่องทำเครื่องหมายหรือปุ่มสวิตช์)
  • ข้อควรระวัง: การทำให้คอนทราสต์ที่ไม่ใช่ข้อความมีค่า 3:1 อาจเป็นเรื่องยากสำหรับการออกแบบสไตล์มินิมอล การไล่ระดับสีแบบนุ่มนวลหรือเงาด้านใน/ด้านนอกที่ละเอียดอ่อนจะช่วยลดความชัดเจนของขอบเขตภาพได้ ขณะเดียวกันก็เป็นไปตามข้อกำหนดด้านการช่วยเหลือพิเศษ
• ใช้ prefers-contrast เฉพาะเมื่อจำเป็นเท่านั้น: ใช้ @media (prefers-contrast: more) เมื่อการออกแบบใช้สีเน้นที่มีคอนทราสต์ต่ำ (เช่น เส้นขอบที่กลมกลืน ข้อความรองที่สีไม่ฉูดฉาด) ซึ่งจำเป็นต้องเสริมความชัดเจน เว็บไซต์ส่วนใหญ่ที่มีคอนทราสต์พื้นฐานอยู่แล้วจะไม่จำเป็นต้องใช้

รูปแบบสีสว่างและมืด

• รองรับรูปแบบสีสว่างและมืด: ใช้ @media (prefers-color-scheme: dark) และจับคู่กับพร็อพเพอร์ตี้ CSS color-scheme เพื่อให้การควบคุมแบบฟอร์ม แถบเลื่อน และพื้นผิวอื่นๆ ที่แสดงผลโดย UA ตรงกัน ดูรายละเอียดเพิ่มเติมได้ที่โหมดมืด

โหมดบังคับสี

• รองรับโหมดบังคับใช้สี: ในโหมดบังคับใช้สี (คอนทราสต์สูงใน Windows) เบราว์เซอร์จะลบล้างสีของผู้เขียนด้วยคีย์เวิร์ดของระบบและตัด background-image, box-shadow และ border-image ออก กำหนดสีสำรองของระบบสำหรับโทเค็นสีโดยใช้ @media (forced-colors: active)
• ใช้ forced-color-adjust: none เฉพาะในกรณีที่สีเป็นข้อมูลสำคัญ (เครื่องมือไฮไลต์ไวยากรณ์ ตัวอย่างแผ่นสีของตัวเลือกสี) อย่าใช้ forced-color-adjust: none เพียงเพื่อรักษาความสวยงาม
• อย่าใช้ background-image, box-shadow หรือ border-image เพื่อสื่อถึงเส้นขอบ ตัวคั่น หรือสถานะ: เนื่องจากจะหายไปในโหมดบังคับสี (และมักจะหายไปในการพิมพ์ด้วย) หากจำเป็นต้องใช้ ให้ตรวจสอบว่ามีทางเลือกอื่นในโหมดบังคับใช้สี เช่น outline หรือ border ที่มีคีย์เวิร์ดสีของระบบ (CanvasText, LinkText, ButtonText, Highlight, GrayText ฯลฯ)

กำลังสร้างสีอ่อน

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

หากต้องการสร้างสีที่อ่อนหรือเข้มขึ้นแบบไดนามิก ให้ทำดังนี้

• อย่าปรับเฉพาะช่องความสว่างใน oklch/oklab หรือ lch/lab เช่น oklab(from var(--primary) 0.9 a b) แม้ว่าในทางทฤษฎีแล้วจะเป็นวิธีที่ถูกต้อง แต่เบราว์เซอร์ยังไม่ได้ใช้การแมปขอบเขตสี ดังนั้นสีที่ได้จึงคาดเดาไม่ได้
• คุณสามารถใช้ color-mix() เพื่อผสมกับสีขาวหรือสีดำ (ควรใช้ใน oklab) ซึ่งจะช่วยให้สีอยู่ในขอบเขตสีอย่างปลอดภัย แต่มีแนวโน้มที่จะทำให้สีจางลงมากเกินไปและทำให้เกิดสีอ่อนและสีเข้มที่ซีดจาง
• คุณสามารถรวมการปรับความสว่างเข้ากับวิธีอื่นๆ (เช่น color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) เพื่อให้เกิดความสมดุลระหว่างทั้ง 2 วิธี แต่หลีกเลี่ยงการปรับความสว่างเกิน 30%