01
文字色を先に指定する
不透明な背景色より先に文字色を入力します。交換すると極性が反転し、入力後約350ミリ秒で再計算されます。
Color & Accessibility
APCAコントラストチェッカー画面上の文字配色を確認
文字色と背景色を指定し、符号付きLcと選択した文字条件の参照値を確かめます。
APCAコントラストチェッカー
APCAの明度コントラスト
Lc 101.5
明地に暗い文字
文字サイズの目安
選択した条件: 16px · 400 · 本文
選択字重の最小参照サイズ: 15px
参照範囲内
本文は少なくともLc75を参照。表は適合判定ではありません。
300: 18.5px400: 15px700: 13px
Lcの目安
Lc 90: 本文に望ましい
Lc 75: 本文の最低目安
Lc 60: 流暢に読む文字の最低目安
Lc 45: 大きい文字の最低目安
Lc 30: 文字全般の最低目安、本文向けではない
Lc 15: 不可視に近く、特定の非文字のみ
APCAは開発中の知覚的コントラスト手法です。この結果はWCAG 2.xやWCAG 3への適合を示しません。
公式apca-w3 0.1.9、基本アルゴリズム0.0.98G-4g。自発光ディスプレイ上のWebコンテンツ用。 © 2019–2022 Andrew Somers / Myndex.
計算はブラウザー内で行われ、色の値は送信されません。
文字の条件
結果は最新です。
同じ配色でも、明るい背景と暗い背景で文字の見え方は対称ではありません。APCAコントラストチェッカーは文字色と背景色の役割を固定し、入れ替えたときの極性も示します。
配色のコントラストを検討するとき、カラーコントラストチェッカーの比率と混同しないことが重要です。APCA Lc値は色の組み合わせで決まり、文字サイズを変えても値自体は変わりません。
APCAコントラストチェッカーを使う理由
文字色と背景色を指定し、符号付きLcと選択した文字条件の参照値を確かめます。
色の向きを符号で残す
APCAコントラストチェッカーは暗い文字と明るい背景を正のLc、逆の組み合わせを負のLcで示します。色を交換すると符号が変わり、一つの無符号比率では見えない違いを確認できます。
文字条件に合わせて読み取る
一つのLcから字重300・400・700の最小参照サイズを表示します。文字サイズと太さの選択は推奨条件を変えますが、色自体のLcを変えません。
数値を合格印として読まないために
02
実際の書体条件を選ぶ
CSSピクセルのサイズ、字重、本文かその他の可読テキストかを指定します。条件は参照表の読み方に影響し、Lc計算式は変えません。
03
条件ごと記録する
自動計算を切った場合はCtrlまたはCmd＋Enterで実行できます。入力や設定を変えると古い結果はコピーできません。
一組の色から読み取れること
極性を含む明度差
公式のsRGB用アルゴリズムによる符号付きLcを表示し、明地に暗字か暗地に明字かを分けます。
字重別の参照表
APCAのフォント参照表から300・400・700の最小サイズを示し、選択条件が目安より低い場合はそのまま知らせます。
レビュー用の要約
両方のHEX値、Lc、極性、文字サイズ、字重、用途をまとめてコピーでき、数値だけの誤解を避けます。
この計算が扱わない範囲
- 不透明なsRGB色のみ
- 入力は3桁または6桁のHEXです。半透明色、グラデーション、画像背景は実際の合成色が必要なため扱いません。
- WCAG 2.x比率に変換しない
- 符号付きLcと4.5:1などの無符号比率は一対一で対応しません。AA・AAAが必要なら別の方式で確認します。
- ページ全体を監査しない
- リンク、フォーカス状態、他の文字や画像は読み取りません。一組の色でサイト全体のアクセシビリティは証明できません。
- 代替色を自動適用しない
- ブランド色を書き換えず、選択した文字条件について現在の配色だけを説明します。
APCAコントラストチェッカーのよくある質問
APCAのLc値とWCAG 2.xのコントラスト比は何が違う？
APCAは符号付きLcで文字と背景の知覚的な差を示します。WCAG 2.xは別の比率と判定基準を使うため、同じ合格表示にまとめません。
大テキストの具体的なサイズ基準は？
WCAG 2.xの大きな文字の固定基準をここへ移しません。APCAではLcと字重に応じた最小参照サイズを確認してください。
色覚多様性への対応もこのツールでできる？
いいえ。このページは一組の色の明度差を計算するだけです。色覚多様性の見え方は別のシミュレーターで確認します。
入力した色データはサーバーに送信される？
送信しません。色と文字条件はブラウザー内で計算し、コピーは利用者が押したときだけ実行します。
JIS X 8341-3とWCAGの関係は？
JIS X 8341-3の適合確認には現行の対象規格と評価手順を使います。このAPCA参照値だけでJISやWCAGへの適合は示せません。
判定が違う色の組み合わせはありますか？