コントラスト比チェッカー

文字色と背景色を入力すると、WCAG 2.1 の判定と APCA Lc を同時に表示します。不足している場合は明度だけを調整した代替色を提案します。

文字色

背景色

大きい見出し 24px

あいうえお Abc 123

ボタンやアイコンなどの UI 要素

2.95:1

コントラスト比

WCAG 2.1 の判定

本文 AA（4.5:1）不合格大きい文字 AA（3:1）不合格本文 AAA（7:1）不合格大きい文字 AAA（4.5:1）不合格UI 要素（3:1）不合格

現行のウェブアクセシビリティ基準です。法令上の要件はほぼこちらを指します。

01 / FIX

基準を満たすには

OKLCH の明度（L）だけを動かし、色相角はそのままにします。別の色ではなく「同じ色の明るさ違い」が得られます。

目標基準

文字色を調整

4.50:1 ・明度を 10.6 移動

背景色を調整

4.50:1 ・明度を 69.2 移動

02 / APCA

APCA Lc

WCAG 3 で検討中の新しい計算方法です。明るい背景の暗い文字と、その逆を区別して評価し、比率ではなく Lc 値で表します。

Lc 55.0

明るい背景に暗い文字

非常に大きい太字のみ（36px 以上）

⚠️ APCA はまだ草案です。準拠を判断する際は上の WCAG 2.1 を基準にしてください。

03 / HOW

計算方法

WCAG 2.1 のコントラスト比は相対輝度から求めます。各チャンネルを 0〜1 に正規化して sRGB ガンマを戻し、L = 0.2126·R + 0.7152·G + 0.0722·B を計算して、（明るい方の L + 0.05）÷（暗い方の L + 0.05）とします。結果は 1:1 から 21:1 の範囲です。

「大きい文字」とは 18pt（約 24px）以上、または太字 14pt（約 18.66px）以上を指します。ロゴと無効状態の要素はこの基準の対象外です。

半透明の色は、背面と合成された後の色で検証する必要があります。このツールは不透明な 2 色を前提に計算します。

04 / NAMES

白背景・黒背景で基準を満たす CSS カラー名

CSS カラー名 141 色を白と黒の背景それぞれに置いて計算し、本文 AA（4.5:1）を満たすかで分類しました。

白背景で本文 AA 合格 30 色

黒背景で本文 AA 合格 111 色

Aliceblue Antiquewhite Aqua Aquamarine Azure Beige Bisque Blanchedalmond Burlywood Cadetblue Chartreuse Chocolate Coral Cornflowerblue Cornsilk Cyan Darkcyan Darkgoldenrod Darkgray Darkkhaki Darkorange Darksalmon Darkseagreen Darkturquoise Deeppink Deepskyblue Dodgerblue Floralwhite Forestgreen Fuchsia Gainsboro Ghostwhite Gold Goldenrod Gray Greenyellow Honeydew Hotpink Indianred Ivory Khaki Lavender Lavenderblush Lawngreen Lemonchiffon Lightblue Lightcoral Lightcyan Lightgoldenrodyellow Lightgray Lightgreen Lightpink Lightsalmon Lightseagreen Lightskyblue Lightslategray Lightsteelblue Lightyellow Lime Limegreen Linen Magenta Mediumaquamarine Mediumorchid Mediumpurple Mediumseagreen Mediumslateblue Mediumspringgreen Mediumturquoise Mintcream Mistyrose Moccasin Navajowhite Oldlace Olive Olivedrab Orange Orangered Orchid Palegoldenrod Palegreen Paleturquoise Palevioletred Papayawhip Peachpuff Peru Pink Plum Powderblue Red Rosybrown Salmon Sandybrown Seagreen Seashell Silver Skyblue Slategray Snow Springgreen Steelblue Tan Thistle Tomato Turquoise Violet Wheat White Whitesmoke Yellow Yellowgreen

05 / FAQ

よくある質問

4.5:1 という数字はどこから来たのですか？

WCAG 2.1 の達成基準 1.4.3 です。視力 20/40 程度の人が本文を読める最低ラインとして定められました。AAA の 7:1 は 20/80 程度を想定しています。

WCAG と APCA で結果が違う場合はどちらを見ますか？

準拠の判定は WCAG 2.1 です。APCA は暗い背景で WCAG が甘くなる問題などを改善しようとする草案なので、デザイン判断の参考として使うのが安全です。

色を変えずにコントラストだけ上げられますか？

このページの提案がその方法です。OKLCH の明度 L を二分探索して目標をちょうど超える点を探します。色相角は保ち、sRGB を外れる場合は彩度を落として表示可能な値に戻します。

次に見る

色覚シミュレーター色を 2 つ入力すると、8 種類の色覚でどう見えるか、そして互いに区別できるかがわかります。計算はブラウザ内で完結します。 カラー選択ドラッグで狙いの色を決め、HEX・RGB・HSL・HSV・CMYK・LAB のコードをワンクリックでコピーできます。画面のどこからでも色を拾えるスポイトと、画像からの色抽出にも対応。 CSS カラー名 141 色CSS や HTML で名前だけで指定できる色です。系統別にまとめてあるので、気になる色を開いてコードと配色を確認してください。