色と単位

白い背景に薄い灰色 #bbbbbb の文字は、コントラスト比が 1.92 対 1 です。WCAG は、ふつうの文字に少なくとも 4.5 対 1 を求めています。

色の書き方

CSS では色をいくつかの書き方で指定できますが、どれも最後は同じもの、つまり画面上の赤・緑・青の光の量になります。red、navy、rebeccapurple のような色の名前は読みやすいのですが、種類がかぎられています。16進数表記では、赤・緑・青をそれぞれ 00 から ff（0 から 255）までの 2 けたの16進数で書きます。#1a5fb4 は赤 26、緑 95、青 180 で、中くらいの青です。rgb(26 95 180) は同じ色を10進数で表します。hsl(210 80% 40%) は、色相（色相環の上の角度で、0 が赤、120 が緑、240 が青）、彩度、明度で色を表します。数を一つ変えるだけで、同じ色相の明るい色や暗い色を作れるので便利です。

color: navy;
color: #1a5fb4;              /* same as #1A5FB4 */
color: #36c;                 /* short form of #3366cc */
color: rgb(26 95 180);
color: rgb(26 95 180 / 50%); /* half transparent */
color: hsl(210 80% 40%);
background-color: transparent;

スラッシュのあとに四つめの値を書くと、アルファチャンネル（不透明度）を指定できます。rgb(0 0 0 / 50%) は半分だけ不透明な黒で、うしろにあるものが透けて見えます。color は文字の色、background-color は要素のうしろの塗り、border-color は枠線の色を決めます。キーワード currentColor はその要素の文字の色を表します。文字と色をそろえたいアイコンや枠線に便利です。

コントラストは必須

背景と明るさが近すぎる文字は、多くの人にとって読みにくくなります。視力の弱い人、高齢の読者、そして日なたでスマートフォンを見ている人はみなそうです。W3C のアクセシビリティ指針である WCAG 2.2 は、これをコントラスト比で測ります。1 対 1（差がない）から 21 対 1（白地に黒）までです。達成基準 1.4.3 は、ふつうの文字に少なくとも 4.5 対 1、大きな文字に 3 対 1 を求めています。WCAG の言う大きな文字とは、18 ポイント以上、または太字で 14 ポイント以上の文字です。白地に濃い灰色 #767676 は 4.54 対 1 でぎりぎり合格し、#777777 は 4.48 でぎりぎり不合格です。ブラウザーの開発者ツールで文字の要素を調べるとコントラスト比が表示されるので、勘で決める必要はありません。

また、色だけで情報を伝えてはいけません。エラーを枠線を赤くするだけで示すフォームは、赤が見えにくい人には伝わりません。メッセージやアイコンもそえましょう。

絶対単位と相対単位

長さには単位が必要です（ゼロだけは例外）。px は CSS ピクセルで、固定の単位です。高密度の画面では CSS の 1 ピクセルが物理的なピクセルいくつ分にもなるので、目に見える大きさはだいたい同じに保たれます。相対単位はほかの何かに合わせて大きさが変わります。em はその要素自身のフォントサイズが基準なので、20 ピクセルの文字に padding: 0.5em とすると 10 ピクセルになります。rem はルート（html）のフォントサイズが基準です。読者が変えていなければブラウザーでは 16 ピクセルなので、1.25rem はふつう 20 ピクセルです。% は親が基準で、たいていは親の幅です。vw と vh はビューポートの幅と高さの100分の1、ch は今のフォントの数字ゼロのおよその幅です。

どれを使えばよいでしょうか。文字の大きさを rem で決めると、読者の設定が生かされます。ブラウザーで文字を大きくした人には、rem で決めたものがすべていっしょに大きくなりますが、px で固定した文字は大きくならないことがあります。em で決めたパディングは、囲んでいる文字といっしょに大きくなります。1 ピクセルの枠線のように、大きさを変えたくないものにはピクセルで十分です。