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.