ToolDeck

ตัวตรวจสอบคอนทราสต์สี

ตรวจสอบอัตราส่วนคอนทราสต์ WCAG AA และ AAA ระหว่างสีพื้นหน้าและสีพื้นหลัง

ลองตัวอย่าง

สีพื้นหน้า (ข้อความ)

สีพื้นหลัง

ตัวอย่างข้อความขนาดใหญ่ (18px ตัวหนา)

ตัวอย่างข้อความปกติ — นี่คือลักษณะที่ข้อความเนื้อหาของคุณจะปรากฏบนสีพื้นหลังที่คุณเลือก

อัตราส่วนคอนทราสต์

14.63:1

ความสอดคล้องกับ WCAG

ผ่าน

ปกติ AA

ผ่าน

ปกติ AAA

ผ่าน

ขนาดใหญ่ AA

ผ่าน

ขนาดใหญ่ AAA

WCAG AAข้อความปกติ: 4.5:1, ข้อความขนาดใหญ่ (18px ขึ้นไป หรือ 14px ตัวหนา): 3:1

WCAG AAAข้อความปกติ: 7:1, ข้อความขนาดใหญ่ (18px ขึ้นไป หรือ 14px ตัวหนา): 4.5:1

การตรวจสอบคอนทราสต์สีคืออะไร?

การตรวจสอบคอนทราสต์สีวัดความแตกต่างของความสว่างระหว่างสีพื้นหน้า (โดยทั่วไปคือข้อความ) กับสีพื้นหลัง แล้วแสดงผลเป็นอัตราส่วน อัตราส่วน 1:1 หมายความว่าสีทั้งสองเหมือนกัน ส่วน 21:1 คือค่าสูงสุดที่แสดงถึงตัวอักษรสีดำบนพื้นขาวหรือในทางกลับกัน Web Content Accessibility Guidelines (WCAG) ที่เผยแพร่โดย W3C กำหนดอัตราส่วนคอนทราสต์ขั้นต่ำที่ข้อความต้องผ่านเพื่อให้ผู้ที่มีสายตาอ่อนแอหรือบกพร่องในการมองเห็นสีอ่านได้

สูตรคำนวณอัตราส่วนคอนทราสต์มาจาก WCAG 2.x และอาศัยความสว่างสัมพัทธ์ (relative luminance) ซึ่งเป็นตัววัดว่าสีปรากฏสว่างเพียงใดต่อดวงตามนุษย์ ความสว่างสัมพัทธ์คำนวณโดยการทำให้ช่องสัญญาณ sRGB แต่ละช่องเป็นเชิงเส้น (ลบ gamma ออก) แล้วถ่วงน้ำหนักช่องสัญญาณตามค่าสัมประสิทธิ์ ITU-R BT.709 ได้แก่ 0.2126 สำหรับแดง 0.7152 สำหรับเขียว และ 0.0722 สำหรับน้ำเงิน สีเขียวมีน้ำหนักมากที่สุดเพราะดวงตามนุษย์ไวต่อแสงสีเขียวมากที่สุด จากนั้นคำนวณอัตราส่วนด้วยสูตร (L1 + 0.05) / (L2 + 0.05) โดย L1 คือความสว่างของสีที่สว่างกว่า

WCAG กำหนดระดับความสอดคล้องสองระดับ ระดับ AA ต้องการอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความขนาดปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (18px ขึ้นไป หรือ 14px ตัวหนา) ระดับ AAA เพิ่มเกณฑ์เป็น 7:1 และ 4.5:1 ตามลำดับ WCAG 2.1 ยังได้เพิ่ม Success Criterion 1.4.11 ซึ่งกำหนดให้ส่วนประกอบ UI ที่ไม่ใช่ข้อความ เช่น เส้นขอบ ไอคอน และตัวบ่งชี้โฟกัส ต้องมีอัตราส่วน 3:1

ทำไมต้องใช้ตัวตรวจสอบคอนทราสต์นี้?

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

คำนวณอัตราส่วนได้ทันที
เลือกหรือพิมพ์สองสีแล้วดูอัตราส่วนคอนทราสต์อัปเดตแบบเรียลไทม์ ไม่มีฟอร์มให้ส่ง ไม่มีการโหลดหน้าใหม่
🔒
ประมวลผลโดยให้ความเป็นส่วนตัวเป็นหลัก
การคำนวณความสว่างทำงานทั้งหมดในเบราว์เซอร์ของคุณ ค่าสีไม่ถูกส่งออกจากเครื่องของคุณ และไม่มีคุกกี้หรือการวิเคราะห์ติดตามการเลือกของคุณ
🎯
ผลลัพธ์ AA และ AAA
ผลลัพธ์แสดงสถานะผ่าน/ไม่ผ่านสำหรับ WCAG AA และ AAA ทั้งสำหรับข้อความปกติและข้อความขนาดใหญ่ คุณจึงรู้ชัดเจนว่าผ่านเกณฑ์ใดบ้าง
📋
ไม่ต้องสร้างบัญชี
เปิดหน้าเว็บแล้วเริ่มทดสอบได้เลย ไม่ต้องลงทะเบียน ไม่มีขีดจำกัดอัตราการใช้งาน เครื่องมือทำงานแบบออฟไลน์หลังจากโหลดหน้าแล้ว

กรณีการใช้งานตัวตรวจสอบคอนทราสต์

การพัฒนา Frontend
ก่อนส่งมอบการเปลี่ยนแปลง UI ให้วางสีข้อความและพื้นหลังจาก CSS ของคุณเข้าไปในตัวตรวจสอบเพื่อยืนยันว่าคู่สีนั้นผ่านเกณฑ์ WCAG AA วิธีนี้ช่วยตรวจจับความล้มเหลวด้านคอนทราสต์ก่อนที่จะถึงขั้นตอน code review หรือการตรวจสอบอัตโนมัติ
การส่งมอบงานออกแบบ
นักออกแบบสามารถตรวจสอบว่าคู่สีทุกคู่ในไฟล์ Figma ผ่านระดับ WCAG ที่กำหนดก่อนส่งสเปคให้วิศวกร การแก้ไขคอนทราสต์ในขั้นตอนออกแบบมีต้นทุนต่ำกว่าการแก้ไขหลังการพัฒนามาก
การตรวจสอบ Accessibility
วิศวกร QA ที่ทำการตรวจสอบ WCAG สามารถตรวจสอบคู่สีเฉพาะที่ถูกตั้งค่าสถานะโดยเครื่องมืออัตโนมัติอย่าง Lighthouse หรือ axe ตัวตรวจสอบยืนยันอัตราส่วนที่แน่นอนและระบุว่าระดับใดผ่านหรือไม่ผ่าน
โทเค็นสีใน Design System
เมื่อกำหนดโทเค็นสีสำหรับ design system ให้ทดสอบคู่พื้นหน้า/พื้นหลังแต่ละคู่เพื่อให้แน่ใจว่าชุดสีโทเค็นผ่านเกณฑ์ AA เป็นอย่างน้อย บันทึกอัตราส่วนไว้พร้อมกับโทเค็นเพื่อให้ทีมงานปลายทางมั่นใจในการเลือกสี
การทดสอบเทมเพลต Email
โปรแกรม email ลบฟีเจอร์ CSS อย่าง opacity และ blend mode ออก ทำให้สีที่แสดงจริงอาจต่างจากต้นฉบับ ทดสอบค่าสีพื้นหน้าและพื้นหลังที่แท้จริงที่ถึงกล่องรับจดหมายเพื่อยืนยันความสามารถในการอ่าน
การศึกษามาตรฐาน Accessibility
นักศึกษาที่เรียนรู้ WCAG สามารถทดลองกับคู่สีต่างๆ และเห็นทันทีว่าอัตราส่วนเปลี่ยนอย่างไร การปรับทีละช่องสัญญาณช่วยสร้างความเข้าใจเชิงปฏิบัติว่าความสว่างสัมพัทธ์กับคอนทราสต์ที่รับรู้ได้สัมพันธ์กันอย่างไร

ข้อกำหนดอัตราส่วนคอนทราสต์ WCAG

ตารางด้านล่างสรุปอัตราส่วนคอนทราสต์ขั้นต่ำที่กำหนดโดย WCAG 2.1 สำหรับประเภทเนื้อหาและระดับความสอดคล้องต่างๆ ข้อความขนาดใหญ่หมายถึง 18px (24 CSS pixels) ขึ้นไปที่น้ำหนักปกติ หรือ 14px (18.66 CSS pixels) ขึ้นไปที่น้ำหนักตัวหนา

ระดับอัตราส่วนขั้นต่ำใช้กับหมายเหตุ
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminance, AA และ AAA อธิบาย

การคำนวณอัตราส่วนคอนทราสต์มีสามขั้นตอน ได้แก่ คำนวณความสว่างของแต่ละสี หาอัตราส่วน และเปรียบเทียบกับเกณฑ์ WCAG

Relative Luminance
ตัวเลขเดียวตั้งแต่ 0 (สีดำ) ถึง 1 (สีขาว) ที่แสดงว่าสีปรากฏสว่างเพียงใด โดยคำนึงถึงเส้นโค้ง gamma ของ sRGB ที่ไม่เป็นเชิงเส้น และความไวที่ไม่เท่ากันของดวงตามนุษย์ต่อแสงสีแดง เขียว และน้ำเงิน สีเขียวบริสุทธิ์ (#00FF00) มีความสว่าง 0.7152 ขณะที่สีน้ำเงินบริสุทธิ์ (#0000FF) มีเพียง 0.0722
WCAG AA
ระดับ Accessibility พื้นฐานที่กำหนดโดยมาตรฐานทางกฎหมายส่วนใหญ่ รวมถึง European Accessibility Act (EAA) ของสหภาพยุโรป และ Section 508 ในสหรัฐอเมริกา AA กำหนดอัตราส่วน 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ design system ส่วนใหญ่กำหนด AA เป็นเกณฑ์ขั้นต่ำสำหรับองค์ประกอบข้อความทั้งหมด
WCAG AAA
ระดับขั้นสูงที่ออกแบบมาสำหรับเนื้อหาที่ต้องอ่านได้โดยผู้ชมกลุ่มกว้างที่สุดเท่าที่เป็นไปได้ รวมถึงผู้ที่มีความบกพร่องทางสายตาอย่างมีนัยสำคัญ AAA กำหนดอัตราส่วน 7:1 สำหรับข้อความปกติ และ 4.5:1 สำหรับข้อความขนาดใหญ่ เว็บไซต์ทั้งหมดที่ผ่าน AAA ในทุกหน้านั้นพบได้น้อย แต่เนื้อหาสำคัญอย่างประกาศทางกฎหมายและข้อมูลทางการแพทย์มักตั้งเป้าหมายไว้ที่ระดับนี้

ตัวอย่างโค้ด

คำนวณอัตราส่วนคอนทราสต์ WCAG โดยใช้โปรแกรม ตัวอย่างแต่ละชิ้นนำสูตรความสว่างสัมพัทธ์จาก WCAG 2.x และการคำนวณอัตราส่วนคอนทราสต์ไปใช้ โดยทดสอบคู่สีดำบนขาวและอินดิโกบนขาวเพื่อเปรียบเทียบ

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

คำถามที่พบบ่อย

อัตราส่วนคอนทราสต์ที่ดีสำหรับข้อความคือเท่าใด?
สำหรับข้อความเนื้อหาบนเว็บ ควรตั้งเป้าที่อย่างน้อย 4.5:1 (WCAG AA) อัตราส่วนที่สูงกว่า 7:1 ผ่านเกณฑ์ WCAG AAA และสะดวกสบายต่อการอ่านนาน ตัวอักษรสีดำบนพื้นขาวให้อัตราส่วนสูงสุด 21:1 แต่สีเทาเข้มมาก (#1e293b) บนพื้นขาวยังให้ประมาณ 12.6:1 ซึ่งสูงกว่า AAA มาก
ข้อความขนาดใหญ่ใน WCAG หมายถึงอะไร?
WCAG กำหนดข้อความขนาดใหญ่ว่าคือ 18px (24 CSS pixels) ที่น้ำหนักปกติ หรือ 14px (18.66 CSS pixels) ที่น้ำหนักตัวหนา ข้อความขนาดใหญ่ได้เกณฑ์คอนทราสต์ที่ต่ำกว่าเพราะตัวอักษรที่ใหญ่กว่ารับรู้ได้ง่ายกว่า ใน CSS 1px เท่ากับ 0.75pt ดังนั้น 18pt จึงเท่ากับ 24px
WCAG AA เป็นข้อกำหนดทางกฎหมายหรือไม่?
ในหลายเขตอำนาจศาล ใช่ European Accessibility Act (EAA) ซึ่งมีผลบังคับใช้ในเดือนมิถุนายน 2025 อ้างอิง WCAG 2.1 AA Section 508 ของ US Rehabilitation Act กำหนดให้หน่วยงานรัฐบาลกลางปฏิบัติตาม WCAG 2.0 AA Americans with Disabilities Act (ADA) ถูกตีความโดยศาลสหรัฐฯ ว่าต้องการเว็บไซต์ที่เข้าถึงได้ โดยใช้ WCAG AA เป็นมาตรฐาน แคนาดา ออสเตรเลีย และสหราชอาณาจักรมีข้อกำหนดที่คล้ายกัน
ความสว่างสัมพัทธ์คำนวณอย่างไร?
ค่าช่องสัญญาณ sRGB แต่ละช่อง (0-255) หารด้วย 255 แล้วทำให้เป็นเชิงเส้น โดยค่าที่ 0.04045 หรือต่ำกว่าหารด้วย 12.92 และค่าที่สูงกว่าแปลงด้วย ((c + 0.055) / 1.055) ^ 2.4 จากนั้นช่องสัญญาณที่ถูกทำให้เป็นเชิงเส้นทั้งสามถูกถ่วงน้ำหนักด้วยค่าสัมประสิทธิ์ ITU-R BT.709 (0.2126 R, 0.7152 G, 0.0722 B) แล้วรวมกัน ผลลัพธ์เป็นตัวเลขระหว่าง 0 ถึง 1
ทำไม WCAG จึงใช้ offset 0.05 ในสูตรคอนทราสต์?
offset 0.05 ป้องกันการหารด้วยศูนย์เมื่อสีหนึ่งคือสีดำบริสุทธิ์ (ความสว่าง = 0) นอกจากนี้ยังคำนึงถึงแสงแวดล้อมและการสะท้อนแสงจากหน้าจอที่ทำให้ความสว่างที่รับรู้ได้ของแม้แต่พิกเซลที่มืดที่สุดสูงขึ้นเล็กน้อย หากไม่มี offset นี้ สีดำบนสีเข้มใดๆ ก็จะให้อัตราส่วนที่อนันต์หรือสูงเกินจริง
สองสีอาจผ่าน AA แต่ยังอ่านยากอยู่ได้หรือไม่?
ได้ อัตราส่วนคอนทราสต์ WCAG วัดความแตกต่างของความสว่าง ไม่ใช่ความแตกต่างของโทนสี สีแดงอิ่มตัวบนสีเขียวอิ่มตัวอาจผ่านเกณฑ์อัตราส่วนได้ทางเทคนิค แต่ยังอ่านไม่สะดวกสำหรับผู้ดูบางคน โดยเฉพาะผู้ที่มีความบกพร่องในการมองเห็นสีแดง-เขียว การจับคู่สีที่แตกต่างกันทั้งในแง่ความสว่างและโทนสีมักให้ผลที่สบายตายิ่งขึ้น
ความแตกต่างระหว่างคอนทราสต์ WCAG 2.x กับ APCA คืออะไร?
WCAG 2.x ใช้อัตราส่วนความสว่างแบบง่ายที่ปฏิบัติต่อพื้นหน้าและพื้นหลังอย่างสมมาตร APCA (Advanced Perceptual Contrast Algorithm) ซึ่งเสนอสำหรับ WCAG 3.0 ใช้แบบจำลองความสว่างที่รับรู้ได้ซึ่งคำนึงถึงขั้วสี ข้อความสีเข้มบนพื้นหลังสว่างมีคอนทราสต์ที่รับรู้ได้ต่างจากข้อความสีอ่อนบนพื้นหลังมืดที่ความแตกต่างความสว่างเท่ากัน APCA ยังเป็นแค่ working draft และยังไม่ได้แทนที่วิธี WCAG 2.x ในกฎระเบียบใดๆ