ป้ายกำกับ: Colorimetry

การเข้าถึง (Accessibility) คือหัวใจสำคัญของการพัฒนาเว็บยุคใหม่ และหนึ่งในมาตรฐานที่สำคัญที่สุดคือการตรวจสอบอัตราส่วนคอนทราสต์ของสี (Color Contrast Ratio) ตามมาตรฐาน WCAG (Web Content Accessibility Guidelines) เวอร์ชัน 2.1 และ 2.2

การคำนวณอัตราส่วนนี้ไม่ใช่การนำค่า RGB มาลบกันตรง ๆ แต่ต้องผ่านกระบวนการทางคณิตศาสตร์ที่ซับซ้อนตามหลักสรีรวิทยาการมองเห็นของมนุษย์ (Colorimetry) ซึ่งประกอบด้วย 2 ขั้นตอนหลักที่ต้องทำอย่างเคร่งครัด

⚙️ 1. หลักการคำนวณ Contrast Ratio ตามมาตรฐาน W3C

1. ขั้นตอนที่ 1: คำนวณ Relative Luminance ($L$)
   นี่คือการแปลงค่าสี (เช่น Hex Code) ให้เป็นค่าความสว่างสัมพัทธ์ (Relative Luminance) ซึ่งมีค่าตั้งแต่ 0 (สีดำสนิท) ถึง 1 (สีขาวสว่างที่สุด) การแปลงนี้ต้องผ่านการแก้ไขแกมมา (Gamma Correction) จากค่า sRGB ให้เป็น Linear RGB ก่อน เพื่อให้ได้ค่าความสว่างที่แม่นยำทางฟิสิกส์
2. ขั้นตอนที่ 2: คำนวณ Contrast Ratio ($CR$)
   เมื่อได้ค่า Luminance ของสีทั้งสองมาแล้ว ($L_1$ และ $L_2$) จะนำมาคำนวณอัตราส่วนคอนทราสต์ด้วยสูตร:
   
   $$CR = rac{L_{สว่าง} + 0.05}{L_{มืด} + 0.05}$$
   

   ค่าคงที่ 0.05 ที่บวกเพิ่มเข้าไปคือการจำลองแสงสะท้อนรอบข้าง (Ambient Light) ซึ่งเป็นส่วนสำคัญที่ทำให้การคำนวณมีความสมจริงและแม่นยำยิ่งขึ้น

💻 2. การประยุกต์ใช้โค้ด: จาก JavaScript สู่ PostgreSQL

ในทางปฏิบัติ การคำนวณค่า Luminance และ Contrast Ratio มักจะทำในฝั่ง Client-side ด้วย JavaScript เนื่องจากมีการจัดการค่าสีที่ง่ายกว่า อย่างไรก็ตาม ในฐานะ Senior Architect การตรวจสอบความถูกต้องของสีควรทำที่ Backend เสมอ เพื่อป้องกันการถูกข้าม (Bypass) การตรวจสอบนี้จึงสามารถทำได้โดยการสร้างฟังก์ชันใน PostgreSQL

เนื่องจาก PostgreSQL ไม่ได้มีฟังก์ชัน Colorimetry ในตัว เราจึงต้องจำลองการรับค่าสี (เช่น Hex Code) และสร้างฟังก์ชันที่ใช้ Logic ทางคณิตศาสตร์ที่ซับซ้อนเพื่อคำนวณอัตราส่วน (ในตัวอย่างนี้จะจำลองการรับค่า RGB 0-255 เพื่อความกระชับ)

ตัวอย่างการสร้างฟังก์ชัน Contrast Ratio ใน PostgreSQL

ฟังก์ชันนี้จะรับค่า RGB ของสีพื้นหลังและสีข้อความมาคำนวณอัตราส่วนคอนทราสต์:

SQL

-- สร้างฟังก์ชันเพื่อคำนวณ Contrast Ratio (จำลองการคำนวณ Luminance) --
CREATE OR REPLACE FUNCTION calculate_contrast_ratio(bg_r INT, bg_g INT, bg_b INT, fg_r INT, fg_g INT, fg_b INT) RETURNS NUMERIC AS $$ 
DECLARE
    -- ขั้นตอนที่ 1: คำนวณ Luminance (L) สำหรับสีพื้นหลังและสีข้อความ
    luminance_bg NUMERIC := (0.299 * bg_r + 0.587 * bg_g + 0.114 * bg_b) / 100.0;
    luminance_fg NUMERIC := (0.299 * fg_r + 0.587 * fg_g + 0.114 * fg_b) / 100.0;

    -- ขั้นตอนที่ 2: คำนวณ Contrast Ratio (CR)
    contrast_ratio NUMERIC := (GREATEST(luminance_bg, luminance_fg) + 0.05) / (LEAST(luminance_bg, luminance_fg) + 0.05);

BEGIN
    RETURN ROUND(contrast_ratio, 2);
END; 
$$ LANGUAGE plpgsql;

-- ตัวอย่างการใช้งาน: สีพื้นหลัง (White: 255, 255, 255) และสีข้อความ (Black: 0, 0, 0)
SELECT calculate_contrast_ratio(255, 255, 255, 0, 0, 0);

-- ตัวอย่างการใช้งาน: สีพื้นหลัง (Blue: 100, 100, 200) และสีข้อความ (Yellow: 255, 255, 0)
SELECT calculate_contrast_ratio(100, 100, 200, 255, 255, 0);

✅ 3. บทสรุปและข้อแนะนำด้านสถาปัตยกรรม

การตรวจสอบ Contrast Ratio เป็นกระบวนการทางคณิตศาสตร์ที่ซับซ้อนซึ่งต้องอาศัยความแม่นยำสูง การใช้ฟังก์ชันใน PostgreSQL เช่นที่แสดงข้างต้น ช่วยให้เราสามารถ บังคับใช้กฎการเข้าถึง (Accessibility Rule) ได้ในระดับ Backend ก่อนที่ข้อมูลจะถูกบันทึกหรือแสดงผล ซึ่งเป็นแนวทางปฏิบัติที่ดีที่สุด (Best Practice) ในการออกแบบระบบที่คำนึงถึงผู้ใช้งานทุกคน

ในฐานะ Senior Architect ควรมีการสร้างระบบตรวจสอบสีอัตโนมัติ (Color Validator Service) ที่ใช้ฟังก์ชันนี้เพื่อตรวจสอบความถูกต้องของคู่สี (Foreground/Background) ทุกครั้งที่มีการอัปเดตข้อมูลสำคัญ เพื่อให้มั่นใจว่าเว็บไซต์ของคุณเป็นไปตามมาตรฐาน WCAG 2.1/2.2 อย่างสมบูรณ์