＼8色・56通りの読みやすさを、一度に判定／ 色を並べると、文字の色と背景の色の全組み合わせについて、コントラスト比（WCAGの計算式）を表で出して、読める組み合わせに○をつけるツールです。 AA・AAA、大きい文字の基準を切り替えられ、色覚の見え方のシミュレーション、パレットの保存、CSS変数・JSONの書き出しもできます。 ■ 例えばこんな使い方 ◎ 配信画面やサムネイルで、背景に埋もれない文字色を選ぶ ◎ ブランドカラーや手持ちの色同士が、読める組み合わせかを点検する ◎ 資料やサイトの配色を決める前に、全部の組み合わせを一覧で見る ■ 使い方（3ステップ） ① palette-contrast-board.html をダブルクリックして、ブラウザで開く ② 色をピッカーか色コード（#RRGGBB）で並べる ③ 「全組み合わせの判定表」を見る（行が文字の色、列が背景の色です）。○が読める組み合わせの目安です 表のマスを押すと、その文字色と背景色の見本と、数字が下に出ます。 ■ できること ◆ 色を8色まで並べる（最大56通りの組み合わせを一度に判定） ◆ 判定の基準を4つから選べる（通常の文字 AA・AAA、大きい文字 AA・AAA） ◆ マスごとに、4つの基準のどれを満たすかを小さな札で表示 ◆ 色覚の見え方のシミュレーション（P型・D型・T型）。色と比を、その見え方で計算し直します（計算で近似した目安です） ◆ 色に名前をつけられる ◆ パレットの自動保存（この端末のブラウザに保存）と、5つまでの名前つき保存 ◆ CSS変数・JSONの書き出しとコピー、JSONの読み込み（ブラウザの外にも控えを残せます） ◆ 選んだ組み合わせの見本表示 ■ 無料版もあります 3色まで・AAの判定だけの無料版です。先に動きを確かめたい方はこちら。https://mall-aibou.booth.pm/items/8987452 ■ 動作環境 ・Chrome / Edge / Safari の最新版（動作確認はChromeのみです） ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ■ 配布内容 ・palette-contrast-board.html ・README.txt ■ ご利用について ・個人・法人どちらも使えます ・商用の制作にも使えます ・クレジット表記は不要です ・ファイルそのものの再配布・販売はご遠慮ください ■ ご注意 ・コントラスト比は、WCAG 2.x の定義にもとづく目安です。法的な適合や認証を保証するものではありません ・実際の見え方は、画面や環境、見る人によって変わります ・非公式のツールです ・動作確認はChromeのみです ・色覚のシミュレーションは計算による近似で、個人差があります ・保存した内容は、お使いのブラウザの中だけにあります。ブラウザの閲覧データを消すと、保存したパレットも消えます。ときどきJSONを書き出して控えを作ってください ■ 更新情報 2026/10/14 公開 TOOL BOX