WCAG 顏色對比度檢查器
透過檢查文本與背景的色彩對比度，確保數位設計符合 WCAG 2.1 AA 與 AAA 標準，讓每位使用者都能清晰閱讀。
前景（文字）顏色
背景顏色
檢測結果
3.83:1
對比度比率
AA 一般文字
合規閾值: {threshold}:1AA 大號文字
合規閾值: {threshold}:1AAA 一般文字
合規閾值: {threshold}:1AAA 大號文字
合規閾值: {threshold}:1即時預覽
敏捷的棕色狐狸
跳過了一隻懶狗。這是文字在所選配色組合下的實際顯示效果。確保高對比度可讓所有使用者輕鬆閱讀內容。
What is a WCAG Contrast Checker?
A **WCAG Contrast Checker** is an accessibility testing tool used to determine if the color contrast between two elements—typically text and its background—meets the standards set by the **Web Content Accessibility Guidelines (WCAG)**. These international guidelines ensure that digital content is readable by everyone, including people with visual impairments like color blindness, low vision, or aging eyes.
The tool calculates a mathematical ratio ranging from **1:1** (white text on white background) to **21:1** (black text on white background). Based on this ratio, it grades your color pair against two levels of compliance: **AA (Minimum)** and **AAA (Enhanced)**.
Why is Color Contrast Important?
Ensuring sufficient contrast is not just a "nice-to-have"—it is a legal requirement for many organizations and a cornerstone of good UX design.
- Inclusivity: Over 2.2 billion people globally have a vision impairment. Proper contrast ensures they can read your headings, buttons, and navigation menus without strain.
- Situational Readability: High contrast helps everyone, not just those with disabilities. Think of a user trying to read your website on a phone while standing in bright sunlight. Low-contrast gray text becomes invisible, while high-contrast text remains legible.
- SEO & Performance: Search engines like Google prioritize accessible websites. A site with good readability metrics often sees lower bounce rates and higher engagement.
- Legal Compliance: In many jurisdictions (like the ADA in the US or EAA in Europe), failing to meet WCAG standards can lead to lawsuits and fines.
How to Use the Online Contrast Checker
Our tool provides real-time feedback as you design. Follow these simple steps:
Step 1: Input Your Colors
Enter the HEX code (e.g., `#007FFF`) for your **Foreground (Text)** and **Background** colors. Alternatively, use the color picker to visually select a hue.
Step 2: Check the Ratio
Look at the large **Contrast Ratio** number.
• **4.5:1** or higher is required for normal text (AA).
• **3:1** or higher is allowed for large text (18pt+ or 14pt bold).
Step 3: Review Compliance Status
The "Pass/Fail" indicators will instantly update. Aim for **AA Pass** for general web compliance. **AAA Pass** (7:1 ratio) is ideal for long-form articles.
Step 4: Use the Live Preview
Don't just rely on numbers. Look at the **Live Preview** card to see how your chosen color combination renders on actual text, buttons, and UI elements.
Frequently Asked Questions (FAQ)
Q: What counts as "Large Text"?
A: According to WCAG, text is considered "large" if it is at least **18pt (approx 24px)** or **14pt (approx 18.5px) bold**. Large text requires a lower contrast ratio (3:1) because it is naturally easier to read.
Q: Does this apply to logos?
A: No. Text that is part of a logo or brand name has no minimum contrast requirement. However, it is still good practice to make your logo legible.
Q: What about disabled buttons?
A: User Interface components that are inactive (disabled) or purely decorative do not need to meet contrast requirements. Only active, interactive, or informational elements matter for compliance.
Q: Why can't I use 3-digit HEX codes?
A: Our tool automatically expands 3-digit codes (like `#FFF`) to 6-digits (`#FFFFFF`). You can type either format, and it will work correctly.