色とデザイン

1つの色立体で学ぶ7つのユニット

今のところこの科目には色彩理論という講座が1つあり、7つのユニットに分かれています。最初のユニットでは色の見え方を説明します。続く2つではRGBとカラーコード、そして色相・彩度・明度を扱います。4つめでは配色を組み立て、5つめでは光の混色とインクの混色を比べ、最後の2つではコントラストと、実際のデザインでの色の使い方に進みます。ほとんどのユニットで、マウスで回せる同じモデルを使います。512個の小さなブロックでできたRGBの立方体か、同じ色を並べ替えたHSLの円柱です。点をクリックすると、下のパネルにその色のカラーコード、HSLの値、配色の色、選んだ背景に対するコントラスト比が表示されます。

錐体、プリズム、RGBの立方体

赤いリンゴには赤が含まれていません。日光のうち短い波長と中くらいの波長を吸収し、長い波長をはね返しているのです。網膜には3種類の錐体がおよそ600万個あり、脳がそれらを比べたときに色が生まれます。そのため、純粋な黄色の光と、赤と緑を混ぜた光がまったく同じに見えることがあります。ニュートンは1660年代にプリズムで日光を分け、1704年の『光学』（Opticks）で最初期の色相環の1つを描きました。ウェブでは各チャンネルが0から255までの値をとるので、rgb(0 0 0) は黒、rgb(255 255 255) は白です。カラーコードは16進数の数字を2つずつ3組並べたものです。#2273c3 の c3 は 12 × 16 + 3 = 195 を表します。

色相環の上の角度

HSLでは色相を角度で表し、0degが赤、120degが緑、240degが青です。彩度が0%なら色相は何の影響も持たず、明度50%でその色相がいちばん鮮やかになります。このモデルには限界があり、それもはっきり示されています。同じ明度50%でも、黄と青の輝度は0.9278と0.0722です。色を色相環の上に置けば、配色は角度の組み合わせになります。補色は180度離れた色相、トライアドは120度ずつ離れた3つの色相で、スプリット・コンプリメンタリーは150度と210度を使います。注意したい違いが1つあります。光の色相環では青の向かいは黄ですが、画家の色相環では青の向かいはオレンジです。インクは光と逆に働きます。シアンは赤を、マゼンタは緑を、イエローは青を取り除きます。本物のインクを混ぜると濁った茶色になるので、印刷では黒を加えます。

読みやすさを決める比

文字の読みやすさは目で判断せず、測って決めます。WCAGの相対輝度は、線形化したチャンネルに赤0.2126、緑0.7152、青0.0722の重みをかけたもので、コントラスト比は (L1 + 0.05) / (L2 + 0.05) で求め、1:1から21:1までの値になります。レベルAAは本文に4.5:1、大きな文字とインターフェースの部品に3:1を求め、AAAは7:1を求めます。白地にグレー #767676 なら4.54:1で合格ですが、赤 #ff0000 は4.00:1で、本文では不合格です。最後のユニットではWCAG 1.4.1を加えます。情報を伝える手段を色だけにしてはいけません。赤と緑の色覚異常は男性のおよそ8%にあるからです。先に明度の段階を決め、色相はその後に決めましょう。モデルのブランドカラーのオレンジと、その補色の青のコントラスト比は1.06:1しかありません。