เครื่องมือนักพัฒนา

ตรวจสอบ Color Contrast

ตรวจสอบอัตราส่วนคอนทราสต์สี WCAG 2.1 AA/AAA สำหรับการออกแบบเว็บที่เข้าถึงได้

rgb(304159)

rgb(248250252)

Preview

Sample Text Aa

The quick brown fox jumps over the lazy dog

Regular body text — this is how a paragraph will appear at 16 px.

Small helper text at 14 px — used for captions and labels.

13.98:1
Contrast Ratio
AA — Normal Text4.5:1
< 18pt (24px) regular or < 14pt (18.67px) bold
AA — Large Text3:1
≥ 18pt (24px) regular or ≥ 14pt (18.67px) bold
AAA — Normal Text7:1
Enhanced, < 18pt regular
AAA — Large Text4.5:1
Enhanced, ≥ 18pt regular
Foreground Color
HEX
#1E293B
RGB
rgb(304159)
Background Color
HEX
#F8FAFC
RGB
rgb(248250252)

Color Contrast Checker — WCAG AA/AAA

Check whether your text and background color combination meets WCAG 2.1 accessibility standards. Shows contrast ratio and pass/fail for AA (4.5:1) and AAA (7:1) levels.

FAQ

What is WCAG?

The Web Content Accessibility Guidelines (WCAG) are international standards for making web content accessible to people with disabilities, including color vision deficiencies.

What contrast ratio do I need?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+). AAA requires 7:1 for normal and 4.5:1 for large.

Why does color contrast matter?

Low-contrast text is hard to read for people with low vision, color blindness, or in bright sunlight. It also affects your legal compliance in many jurisdictions.

ไม่เจอสิ่งที่ต้องการ?

เราสร้างเครื่องมือฟรีจากข้อเสนอแนะของชุมชน หากมีเครื่องมือที่จะช่วยเวิร์กโฟลว์ของคุณ แนะนำได้เลย!

Color Contrast Checker — Free Tool Online | FreeTool24 | FreeTool24