---
title: "カラーコントラストチェッカー - WCAG AA/AAAとAPCAで判定"
description: 文字色と背景色のコントラスト比を計算し、WCAGのAA・AAA基準とAPCAの参考値で合否を確認できるツールです。明度を調整しながら、本文や見出しに適した配色を検討できます。
canonical_url: "https://web-toolbox.dev/tools/color-contrast-checker"
meta:
  author: K
  "og:description": 文字色と背景色のコントラスト比を計算し、WCAGのAA・AAA基準とAPCAの参考値で合否を確認できるツールです。明度を調整しながら、本文や見出しに適した配色を検討できます。
  "og:image": "https://web-toolbox.dev/og/ja/tools/color-contrast-checker-848b51dc.png"
  "og:image:alt": カラーコントラストチェッカー
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "カラーコントラストチェッカー - WCAG AA/AAAとAPCAで判定"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **カラーコントラストチェッカー**

文字色と背景色のコントラストをWCAGとAPCAで確認

## **判定結果**

**コントラスト比**

**14.68****:1**

**WCAG AAA適合**

**APCA（参考）**

**Lc**** +101.5**

**本文に使える**

- **AA**** 合格**

  **通常の文字** · 4.5:1以上
- **AA**** 合格**

  **大きな文字** · 3:1以上
- **AAA**** 合格**

  **通常の文字** · 7:1以上
- **AAA**** 合格**

  **大きな文字** · 4.5:1以上

大きな文字は24px以上、または太字18.66px以上です

## **色の設定**

**文字色**

文字色の明度

%

**背景色**

背景色の明度

%

-
-
-
-
-
-
-
-

## **プレビュー**

**Aa **

大きな文字 24px

**太字 18.66px**

大きな文字の境界

本文 16px。文字色と背景色の組み合わせを、実際の文字サイズで確認できます。

UI 14px**詳しく見る**ガイドラインを見る

キャプション 12px

## カラーコントラストチェッカーとは？

文字色と背景色のコントラスト比を計算し、WCAGのAA・AAA基準とAPCAの参考値を確認できるツールです。本文や見出しに使う配色が読みやすさの基準を満たすかを、色を変えながら確かめられます。

## 使い方

1. 文字色と背景色を入力する
2. コントラスト比、WCAGの合否、APCAの参考値、プレビューが更新される
3. 判定が足りない場合は、明度を調整するか色を入れ替えて試す

色は3桁または6桁の16進数のほか、`**rgb()**`・`**hsl()**`・`**oklch()**`などのCSS表記でも入力できます。よく使う配色から始めたいときは、ブランドプリセットを選ぶと文字色と背景色がまとめて切り替わります。

## 判定の見方

コントラスト比は1:1から21:1までの値で、大きいほど文字と背景の明暗の差があります。

WCAG 2.xの基準は、通常の文字と大きな文字で異なります。

| **基準** | **通常の文字** | **大きな文字** |
| --- | --- | --- |
| AA | 4.5:1以上 | 3:1以上 |
| AAA | 7:1以上 | 4.5:1以上 |

大きな文字は24px以上、または太字18.66px以上の文字を指します。通常の文字でAAAを満たすとAAA、AAを満たすとAA、大きな文字だけでAAを満たすと「大きな文字のみ」と表示されます。

APCAは別の計算方式による参考値です。Lcが75以上なら本文、60以上なら大きな文字に使える目安で、マイナスは暗い背景に明るい文字を置いた組み合わせを表します。WCAGの判定は置き換えないため、基準の確認にはWCAGの結果を使ってください。

## 主な設定項目

### 明度

文字色と背景色それぞれの明度を0〜100%で調整できます。色味を保ったまま明るさだけを変えたいときに使います。

### ブランドプリセット

SpotifyやIKEAなど、実在するブランドの配色をまとめて適用できます。色の組み合わせを考える出発点にしたいときに使います。

## 活用シーン

- サイトやアプリの配色が、本文の読みやすさの基準を満たすか確認する
- ブランドカラーをボタンや見出しに使う前に、背景との組み合わせを確かめる
- ダークモード用に、明るい背景の配色を反転させて読みやすさを確認する
- デザインレビューで、配色の指摘を数値で共有する

## 使うときの注意点

- 判定の対象は文字色と背景色の組み合わせだけです。フォントの太さ、字間、背景の画像や透過は考慮しません
- コントラスト比が基準を満たしていても、非常に細い文字や小さい文字では読みにくく感じることがあります
- APCAはWCAG 3の策定途中の方式です

**使ってみてどうでしたか？**

最終更新: 2026年10月30日

### **関連ツール**

- [<h4>**カラーコードコンバーター**</h4>](https://web-toolbox.dev/tools/color-converter)
- [<h4>**カラーコード抽出**</h4>](https://web-toolbox.dev/tools/color-extractor)
- [<h4>**カラースポイト**</h4>](https://web-toolbox.dev/tools/color-eyedropper)
- [<h4>**Tailwindカラーパレットジェネレーター**</h4>](https://web-toolbox.dev/tools/tailwind-color-palette)
- [<h4>**アスペクト比計算**</h4>](https://web-toolbox.dev/tools/aspect-ratio-calculator)
- [<h4>**営業日カレンダー**</h4>](https://web-toolbox.dev/tools/business-calendar)
- [<h4>**文字数カウンター**</h4>](https://web-toolbox.dev/tools/character-counter)
- [<h4>**クレジットカードバリデーター**</h4>](https://web-toolbox.dev/tools/credit-card-validator)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/color-contrast-checker#webpage","@type":"WebPage","description":"文字色と背景色のコントラスト比を計算し、WCAGのAA・AAA基準とAPCAの参考値で合否を確認できるツールです。明度を調整しながら、本文や見出しに適した配色を検討できます。","name":"カラーコントラストチェッカー - WCAG AA/AAAとAPCAで判定","url":"https://web-toolbox.dev/tools/color-contrast-checker","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/color-contrast-checker"]}]},{"@id":"https://web-toolbox.dev/tools/color-contrast-checker#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"文字色と背景色のコントラスト比を計算し、WCAGのAA・AAA基準とAPCAの参考値で合否を確認できるツールです。明度を調整しながら、本文や見出しに適した配色を検討できます。","name":"カラーコントラストチェッカー - WCAG AA/AAAとAPCAで判定","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.