「操作して学ぶ教材」6本を公開しました ― 色の見え方を、画面の上で操作して確かめる

色彩101は、色の見え方を画面の上で操作して確かめる「操作して学ぶ教材」6本を、2026年10月24日に公開しました。どの教材も、先に自分の目で答え、そのあとに色の値や理由を見る順になっています。

登録なしで使えます。答えは、使っている端末の中にだけ保存され、サーバーには送られません。

6本の教材

12色の色見本から壁の色を選ぶと、部屋の絵の壁一面に同じ値の色が塗られます。小さな色見本と大きな壁を見比べ、壁の色を明るさとあざやかさのスライダーで動かして、同じに見えるところを探します。色見本の大きさを4段階で変える課題もあります。

文字の色と地の色を20色から選び、3つの大きさの文で読みやすさを答えます。答えたあとに、W3C の WCAG 2.2 の定義によるコントラスト比と基準を表示します。文字の明るさだけを動かして、読みやすくなる境目を探す課題もあります。

同じ値の色の正方形を、2つの背景の上に置いて見比べます。背景の組み合わせは、明るさ・色み・あざやかさの3種類について2つずつ、合わせて6つです。右の正方形の色を動かして、左と同じに見えるところで止め、動かした量を記録します。

ブランドの色を HEX で入れると、白・生成り・薄い灰・黒の地と、ブランドの色の地に白文字の5つで、名刺の小さな文字と看板の大きな文字の見え方を確かめられます。街並み・木の壁・青空の写真3枚の上に置いたときと、名刺・看板・ウェブの見出しの3つの場面に置いたときも見られます。

部屋の絵を、壁・ソファとカーテン・クッションなどの小物の3つに分け、決まった3色をどこに置くかを入れ替えて見比べます。3色の組は4つ、並びは組ごとに6通りです。自分で選んだ3色で並びを決めることもできます。

生成りのトップスとグレージュのボトムスに、黒・赤・紺・からし・深緑のうち1色を入れ、入れる場所を靴・バッグ・ベルト・トップス・ボトムスの5か所で切り替えます。場所ごとに、その色が全体に占める広さも表示します。1か所に入れたときと2か所に入れたときの比較もあります。

画面の明るさの設定や、まわりの明るさによって、色の見え方は変わることがあります。