カラーコントラストチェック
文字色と
ご利用には NAYUTA Tools 利用規約 が
TOOL WORKSPACE
コントラスト確認
この配色での読みやすさを確認します。
大きな文字（24px・太字18.66px以上）
ボタンの枠線・アイコン- 大きな文字は、24px以上、または太字で18.66px（14pt）以上の文字です。
- UI部品・アイコンの3:1は、ボタンや入力欄の枠線、アイコンなど文字以外の要素と、となりの色との比です（WCAG 2.1 達成基準 1.4.11）。
- コントラスト比は切り捨てて表示しています（4.499:1 は 4.5:1 を満たしません）。
HOW TO USE / 使い方
3ステップで使えます。
- 01
文字色と背景色を指定します（入れ替えもできます）。
- 02
コントラスト比と、AA・AAA・UI部品の判定を確認します。
- 03
基準に届かない場合は、候補の文字色を選んで調整します。
WHAT IT DOES / できること
コントラスト確認で、できること。
文字色と背景色のコントラスト比を計算し、読みやすさの基準を満たすか確認して配色修正の判断を助けるツールです。
FOR / こんな方に
- Webページの文字コントラストを確認したいデザイナー
- ブランドカラーのアクセシビリティを点検したいWeb担当者
- バナーやUIの配色を公開前に確認したい制作者
USE CASES / こんなときに
コントラスト確認を、実務でどう使うか。
- WebデザインQA
- バナー制作
- ブランドカラー確認
FAQ / よくある質問
使う前に知っておきたいこと。
登録は必要ですか？
不要です。ブラウザからそのまま利用できます。
入力したデータは保存されますか？
ブラウザ内で処理する項目はNAYUTAのサーバーへ送信しません。
候補の文字色はどう選んでいますか？
文字色の色味（色相・彩度）はそのままに、明るさだけを変えて、基準に届くいちばん近い色を選んでいます。背景色によっては、明るさの調整だけでは届かないことがあります。
REPORT / 不具合の報告
うまく動かないとき。
SUPERVISION / 監修
監修：岸 和伸
住宅会社で注文住宅の営業を経験した後、Web・SNS・販促・マーケティングへと仕事を広げ、注文住宅に加えて分譲・不動産仲介・リフォームのWeb制作・運用に携わってきました。その後、大手不動産会社で広報・PR、ブランディング、オウンドメディアなどを担当。SNSやAI活用にも取り組んできました。住宅・不動産に携わって、約15年。
ツールの動作、表示・文言、住宅・不動産とマーケティングの実務での使い方に関する確認。計算・判定の結果は目安で、法律・税務・金融・建築等の個別専門判断を代替しない。
GUIDES / 関連ガイド
仕事で使う前に、知っておきたいこと。
- 住宅会社のWebと販促物で色をそろえる｜カラーコードの受け渡しと読みやすさの確認 NAYUTA Media
ロゴや施工写真から色を選ぶ販促担当者向けに、正本の色指定、用途別の役割、文字と背景のコントラストを確認する手順を紹介します。抽出した色をそのままブランドの正式色にしないためのガイドです。
NAYUTA TOOLS
使って
NAYUTA Toolsは、
ツールを