WCAGカラーコントラストチェッカー - 色のアクセシビリティ検査 オンライン
WCAG 2.1 AAおよびAAA基準に基づく色のコントラスト比を検査します。通常テキスト、大きなテキスト、UIコンポーネントの即時判定 — 100%クライアントサイド。
よくある質問
WCAGカラーコントラストチェッカーとは？
WCAGカラーコントラストチェッカーは、2つの色のコントラスト比を計算し、WCAG 2.1アクセシビリティ基準を満たすかどうかを評価するオンラインツールです。AA（最低基準、通常テキスト4.5:1）とAAA（強化基準、通常テキスト7:1）の2つのレベルで適合性を検査します。
このツールの使い方は？
HEX、RGB、HSL形式で前景色を入力するか、カラーピッカーを使用します。背景色も入力してください。コントラスト比が即座に表示されます。WCAG適合性テーブルと代替色の提案を確認してください。
カラーデータは安全ですか？
カラーデータは100%安全で、ブラウザの外に出ることはありません。計算は完全にクライアントサイドのJavaScriptで実行されます。データがサーバーに送信されることはありません。
WCAG AAとAAAの違いは？
WCAG AAはほとんどのアクセシビリティ法規で要求される最低適合レベルです。WCAG AAAは可読性を向上させる強化適合レベルです。
WCAGの「大きなテキスト」とは？
WCAG 2.1では、通常ウェイトで18pt（24px）以上、またはボールドで14pt（18.5px）以上のテキストが大きなテキストです。
コントラスト比の計算式は？
WCAG 2.1のコントラスト比は3段階で計算されます：ガンマ補正、相対輝度計算、比率計算。結果は1:1から21:1の範囲です。
「UIコンポーネント」とは？
WCAG 2.1 SC 1.4.11は、フォームフィールドの枠線、ボタンの輪郭、アイコンなど、情報を伝える視覚的要素に最低3:1のコントラスト比を要求しています。
コード例
// WCAG Color Contrast Checker
function sRGBtoLinear(channel) {
const c = channel / 255;
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}
function getRelativeLuminance(r, g, b) {
return (
0.2126 * sRGBtoLinear(r) +
0.7152 * sRGBtoLinear(g) +
0.0722 * sRGBtoLinear(b)
);
}
function getContrastRatio(fg, bg) {
const l1 = getRelativeLuminance(...fg);
const l2 = getRelativeLuminance(...bg);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
}
function checkWCAG(ratio) {
return {
ratio: parseFloat(ratio.toFixed(2)),
aa: {
normalText: ratio >= 4.5,
largeText: ratio >= 3,
uiComponents: ratio >= 3,
},
aaa: {
normalText: ratio >= 7,
largeText: ratio >= 4.5,
},
};
}
// Usage
const fg = [26, 26, 26];
const bg = [255, 255, 255];
const ratio = getContrastRatio(fg, bg);
console.log(`Contrast Ratio: ${ratio.toFixed(2)}:1`);
const result = checkWCAG(ratio);
console.log('AA Normal Text:', result.aa.normalText ? 'Pass' : 'Fail');
console.log('AAA Normal Text:', result.aaa.normalText ? 'Pass' : 'Fail');