読みやすい文字色ジェネレーター
背景色に合う読みやすい文字色を提案。WCAG コントラスト比とプレビューで確認できます。
関連ツール： Webサイト配色プレビュー , ランダムグラデーション生成ツール , ランダム5色パレット生成 など
背景色を設定
3 桁または 6 桁の 16 進数を入力してください。# は省略できます（例：#FFF、#1E3A8A）。sRGB の単色のみ対応します。
大きな文字は、通常の太さで 24 CSS px 以上、または太字で 18⅔ CSS px 以上です。大きな文字のプレビューは 24 px で表示します。
文字色の候補
文字色を生成すると、背景に合う読みやすい色が表示されます。
黒、白、グレー、各種の有彩色からなる固定パレットから、基準を満たす色だけを表示します。すべての RGB 色を網羅しているわけではありません。基準を上げると候補が減る場合があります。背景や基準を変更すると前の結果は消去されます。
表示する比率は小数第 2 位に丸めています。WCAG 2 の sRGB 計算式を使用し、丸めずに基準と比較します。結果はこの単色の組み合わせの文字コントラストのみを評価します。フォント、透明度、画像、グラデーション、ページの他の部分は別途確認が必要です。
読みやすい文字色を探す手順
- 単色の背景を HEX で入力するか、カラーピッカーで選択します。
- 通常の文字 AA（4.5:1）、通常の文字 AAA（7:1）、大きな文字 AA（3:1）を選び、文字色を生成します。
- プレビューする文字を入力し、候補の色とコントラスト比を比較して、HEX または文字色・背景色の CSS 宣言をコピーします。
Web デザインでの活用例
- #FFFFFF の背景で、企業サイトや購入フォームに使う暗い文字色を探す。
- #1E3A8A の背景で、ナビゲーションやダッシュボードの見出しに使う明るい文字色を探す。
- #777777 と 7:1 の基準を試し、中間の明るさの背景では通常の文字の AAA 基準を満たせない場合があることを確認する。
よくある質問
コントラストチェッカーとの違いは？
このツールは背景色を指定すると、選択した基準を満たす文字色を提案します。コントラストチェッカーは、すでに選んだ文字色と背景色の組み合わせを評価します。
AAA の候補がない場合があるのはなぜですか？
中間の明るさの背景には、どの文字色でも 7:1 を達成できないものがあります。最も暗い黒と最も明るい白の両方が基準を満たさなければ、不透明な sRGB の文字色でその基準に届く色はありません。背景色の変更を試してください。
通常の本文に 3:1 を使えますか？
いいえ。通常の文字の AA 基準は 4.5:1 です。3:1 は、通常の太さで 18 pt（24 CSS px）以上、または太字で 14 pt（18⅔ CSS px）以上の大きな文字に適用されます。
基準を満たす配色なら、サイト全体もアクセシブルですか？
いいえ。計算対象は不透明な sRGB 単色の文字コントラストです。実際のフォント、フォーカス状態、コンテンツ、キーボード操作、画像など、他のアクセシビリティ要件も別途確認してください。
色やプレビュー文字はアップロードされますか？
計算とプレビューはブラウザーのタブ内で行います。このツールは色やプレビュー文字を保存せず、アクセス解析イベントにも含めません。コピーすると、指定した HEX または CSS だけがクリップボードに書き込まれます。
背景色、プレビュー文字、結果はこのブラウザータブ内で処理します。ツールはこれらを保存せず、アクセス解析イベントにも含めません。保存したい場合は HEX または CSS をコピーしてください。
このツールは便利でしたか？チームと共有して、作業をよりスムーズにしましょう。
役に立った場合は を、改善が必要な場合は を押してください。優先的に対応します。