PlusMagi's Blog By Pitt Phunsanit Technology เปรียบเทียบเชิงลึก: forced-colors กับ prefers-contrast: more ต่างกันอย่างไรและควรใช้เมื่อใด?

เปรียบเทียบเชิงลึก: forced-colors กับ prefers-contrast: more ต่างกันอย่างไรและควรใช้เมื่อใด?

2017-04-032017-04-03| phunsanitphunsanit| 0 Comment | 07:00
Categories:

ทั้ง @media (forced-colors: active) และ @media (prefers-contrast: more) เป็น CSS Media Features ที่อยู่ในกลุ่ม Accessibility (A11y) เหมือนกัน และมักถูกกระตุ้นเมื่อผู้ใช้ต้องการเพิ่มความชัดเจนในการมองเห็น แต่ในทางวิศวกรรมแล้ว ทั้งสองฟีเจอร์มี ระดับอำนาจการควบคุม (Authority), กลไกการทำงาน และ วัตถุประสงค์ ที่แตกต่างกันอย่างสิ้นเชิง

ตารางเปรียบเทียบภาพรวม (Feature Comparison)

มิติการเปรียบเทียบforced-colors: activeprefers-contrast: more
แนวคิดหลัก“การบังคับยึดอำนาจ” (Hostile Takeover)
ระบบเข้าควบคุมและลบสีทิ้งเกือบทั้งหมด		“การขอร้องอย่างสุภาพ” (Gentle Request)
ผู้ใช้ขอให้แสดงผลแบบคมชัดขึ้น โดยคงสีเดิมไว้
การกระทำของเบราว์เซอร์ลบสไตล์ CSS ทิ้งอัตโนมัติ: color, background, box-shadow, border-color ถูกแทนที่ด้วย System Colorsไม่แตะต้องสไตล์เดิม: ไม่มีการ Override ค่าสีใด ๆ จนกว่านักพัฒนาจะเขียน Media Query มารองรับเอง
จานสีที่ใช้ (Color Palette)จำกัดเฉพาะ System Color Keywords
(เช่น Canvas, CanvasText, Highlight)		ใช้สีใดก็ได้ในมาตรฐาน CSS
(Hex, OKLCH, RGB, HSL)
การเปิดใช้งานในระดับ OSเปิดใช้งาน Windows Contrast Themes (High Contrast Mode)เปิดตัวเลือก Increase Contrast ใน Settings ของ macOS, iOS, Android หรือ Windows
เป้าหมายผู้ใช้งานผู้มีภาวะสายตาเลือนรางรุนแรง (Low Vision), ผู้แพ้แสงอย่างหนัก (Photophobia)ผู้สูงอายุ, ผู้ที่มีภาวะสายตาเหนื่อยล้า, ผู้ใช้งานกลางแจ้งที่มีแสงสะท้อนจ้า

เจาะลึกกลไก: forced-colors (เมื่อระบบเข้าควบคุม)

เมื่อผู้ใช้เปิด Contrast Themes บน Windows เบราว์เซอร์จะถือว่า “สีที่นักพัฒนาเขียนมาทั้งหมดเชื่อถือไม่ได้” และจะทำการตัดทิ้งสิ่งเหล่านี้ทันที

  • box-shadow และ text-shadow ถูกสั่งเป็น none
  • background-color และ background-image ถูกลบทิ้ง (ยกเว้นรูปในแท็ก <img>)
  • สีข้อความและเส้นขอบจะถูกจับคู่เข้ากับ System Colors ตามบทบาทของ Element

หน้าที่ของ Developer: ไม่ใช่การกำหนดสีใหม่ แต่เป็นการ “ซ่อมแซมโครงสร้างที่หายไป” เช่น เติม Border ให้กับการ์ด หรือใช้ currentColor ให้กับไอคอน SVG

CSS

/* การใช้ forced-colors: เพื่อซ่อมส่วนที่ถูกลบ */
@media (forced-colors: active) {
  .card {
    /* เมื่อ box-shadow หายไป ต้องดึงเส้นขอบของระบบกลับมา */
    border: 1px solid CanvasText;
  }

  .badge {
    /* ดึงขอบรอบ Badge กลับมา เพื่อไม่ให้ข้อความลอยเคว้ง */
    border: 1px solid ButtonText;
  }
}

เจาะลึกกลไก: prefers-contrast: more (เมื่อแบรนด์ยังอยู่ แต่เพิ่มความคมชัด)

ตรงกันข้ามกับแบบแรก prefers-contrast: more ไม่ได้ทำลายสไตล์เดิมของหน้าเว็บ ผู้ใช้ยังคงต้องการเห็นสีแบรนด์ หน้าตาเว็บ และภาพรวมเดิม เพียงแต่ต้องการให้ “แยกแยะเนื้อหาได้ง่ายขึ้น”

หน้าที่ของ Developer: ยกระดับคอนทราสต์ของ Typography และขอบเขต UI จากระดับ AA (4.5:1) สู่ AAA (7:1), เพิ่มความหนาของเส้นขอบ หรือตัดสีพื้นหลังที่อ่อนเกินไปทิ้ง

CSS

/* โหมดปกติ */
.button-secondary {
  background-color: oklch(95% 0.01 260);
  color: oklch(45% 0.02 260); /* คอนทราสต์ประมาณ 4.5:1 (ผ่าน AA) */
  border: 1px solid transparent;
}

/* เมื่อผู้ใช้ขอ Contrast เพิ่ม */
@media (prefers-contrast: more) {
  .button-secondary {
    background-color: #ffffff;
    color: #000000;              /* ขยับเป็นคอนทราสต์ 21:1 (ระดับ AAA) */
    border: 2px solid #000000;   /* เสริมเส้นขอบหนา 2px ให้ชัดเจน */
    font-weight: 700;            /* ปรับตัวอักษรให้หนาขึ้น */
  }
}

แผนผังการตัดสินใจเลือกใช้งาน (Decision Matrix)

สถานการณ์สิ่งที่ควรทำMedia Query ที่เกี่ยวข้อง
ต้องการขยายเส้นขอบ border จาก 1px เป็น 2px และปรับตัวหนังสือให้อ่านง่ายขึ้นตามโทนสีแบรนด์เดิมปรับแต่งระดับสีให้เข้าใกล้ขาว/ดำมากขึ้น โดยคง Palette ของเว็บไว้@media (prefers-contrast: more)
แก้ปัญหากล่องข้อความหรือการ์ดกลืนหายไปกับพื้นหลังบน Windows High Contrastผูกเส้นขอบเข้ากับ System Colors เช่น CanvasText@media (forced-colors: active) หรือใส่ border: 1px solid transparent;
มี UI ที่ต้องเลือกสีจริง (เช่น Color Picker / Swatches) และห้ามถูกระบบแปลงสีปิดการแทรกแซงของระบบเฉพาะคอมโพเนนต์นั้นใช้ forced-color-adjust: none;

การเขียนผสานทั้งสองระบบเข้าด้วยกันใน Tailwind CSS

เราสามารถเขียนคอมโพเนนต์เดียวที่รองรับทั้งโหมดปกติ, contrast-more: และ forced-colors: ได้อย่างไร้รอยต่อ

CSS

<button 
  type="button"
  class="px-4 py-2 rounded-lg font-medium transition
         /* 1. สไตล์ปกติ (ผ่านเกณฑ์ AA) */
         bg-blue-600 text-white shadow-sm border border-transparent
         
         /* 2. เมื่อผู้ใช้ขอ Contrast เพิ่ม (prefers-contrast: more) */
         contrast-more:bg-blue-900 contrast-more:text-white 
         contrast-more:border-2 contrast-more:border-black contrast-more:font-bold
         
         /* 3. เมื่อระบบเข้าสู่ Forced Colors Mode */
         forced-colors:border-[ButtonText] forced-colors:text-[ButtonText]">
  ยืนยันคำสั่งซื้อ
</button>

กล่าวโดยสรุป forced-colors คือการเอาตัวรอดจากการถูกระบบบังคับเปลี่ยนสี (ทำให้เว็บยังคงอ่านและแยกแยะได้) ขณะที่ prefers-contrast: more คือการยกระดับความคมชัดของดีไซน์เดิมให้ไปถึงมาตรฐานขั้นสูงสุด (WCAG Level AAA) ตามความต้องการของผู้ใช้