色を確認する
色の組み合わせをテストして、テキストの読みやすさのためにWCAGアクセシビリティ基準を満たしていることを確認します。
比較済み:#000000 を #E7FDF9 上に表示
テキスト
16px、レギュラー(400)
通常のテキストとみなされます。
AA(WCAG 1.4.3):少なくとも4.5:1
合格AAA(WCAG 1.4.6):少なくとも7:1
合格
UIコンポーネントとグラフィック
アイコン、入力欄の境界線、フォーカス表示など、インターフェースを使うために見る必要がある部分です。
AA(WCAG 1.4.11):少なくとも3:1
合格
判定方法
- 比較された色(ブレンド後)
- テキスト #000000 を背景 #E7FDF9 上に表示
- 相対輝度
- テキスト 0.0000、背景 0.9407
- 計算式
- (L1 + 0.05) / (L2 + 0.05) ここで L1 は明るい色の輝度、L2 は暗い色の輝度です。
- 正確な比率
- 19.8158 対 1、表示は 19.81 対 1。 表示されている値は切り捨てられており、四捨五入されていません。だから実際より良く見えることはありません。比較に使われるのは正確な値です。
テキストサイズ: 16px、レギュラー(400)
通常のテキストとみなされます。 大きなテキストは少なくとも24px(18pt)、またはボールド(太さ700以上)の場合は少なくとも18.67px(14pt)です。サイズは四捨五入ではなく切り捨てで表示されます。
通常のテキストとみなされます。 大きなテキストは少なくとも24px(18pt)、またはボールド(太さ700以上)の場合は少なくとも18.67px(14pt)です。サイズは四捨五入ではなく切り捨てで表示されます。
素早い茶色の狐が怠けた犬を飛び越える
小さなテキストの例 (12px)
WCAG基準
レベル AA
通常のテキストの最小コントラスト比は 4.5:1、大きなテキストの最小コントラスト比は 3:1。ほとんどのウェブサイトで必須。
レベル AAA
通常のテキストに対する強化されたコントラスト比は 7:1、 大きなテキストに対するのは4.5:1。最適なアクセシビリティのために推奨。
カラーコントラストチェッカー
テキストと背景色のコントラスト比を計算します。
テキストと背景色のためにカラー ピッカーを使用して色を選択するか、例えば #259 または #2596BE のような RGB 16 進形式で色を入力します。スライダーを調整して色を選択できます。Web Content Accessibility Guidelines (WCAG) には、視覚的なユーザーがテキストを読めるかどうかを判断するための具体的なガイドラインがあります。この基準は、特定のアルゴリズムを使用して色の組み合わせを比較可能な比率にマッピングします。この式を使用すると、WCAG は、テキストとその背景に対する 4.5:1 のカラーコントラスト比が、通常の(本文)テキスト、および大きなテキスト(18+ pt 通常または 14+ pt 太字)に適していることを示しています。
主な機能
- リアルタイムのコントラスト比計算
- WCAG AA & AAA適合性チェック
- 微調整用HSLスライダー
- 複数のプレビュー形式
高度なツール
- 自動カラー修正
- テキストと背景のサンプル
- 色名検出
- 結果のエクスポート