墨色と黒の違いは？画面上の色見本で見比べる

墨色と黒は、画面で並べるとどれくらい違うのでしょうか。どちらも暗い色ですが、色見本の数値や背景との組み合わせによって、見た目の違いが分かります。Webページの文字・見出し・フッターを例に、使い分けるときの判断材料を紹介します。

墨色は黒に近い色だが、色コードは同じではない

CSS（Webページの見た目を指定する仕組み）で色名「black」を指定すると、黒■#000000になります。RGBは赤・緑・青の光の成分を数値で表す形式で、この黒は3成分すべてが0です。HEX（ヘックス）は色を「#」と6桁の英数字で表すWeb用の書き方です。

一方、色名資料I-IROが「墨」（すみ）として掲載する見本は■#313131で、RGBは赤49・緑49・青49です。この記事では、この「墨」の見本を墨色系の比較例として使用します。黒■#000000より少し明るい、赤・緑・青の成分が等しい濃いグレーです。別資料「和色」が「墨」として掲載する■#373737は、赤・緑・青がすべて55の濃いグレーです。同じ墨に由来する呼び方でも、掲載する色は資料によって違います。

3つの色見本は背景の上に直接コードを載せています。単独ではどれも黒に近く見えますが、横に並べると明るさの違いを比べやすくなります。画面設定や周囲の明るさでも印象は変わるので、「墨色なら必ずこの数値」とは考えず、採用する資料とコードを記録しましょう。

作品紹介ページで黒と墨色を比べる

たとえば手作り雑貨の作品紹介ページを考えます。背景を温かみのある白■#F8F6F2にして、同じ文章の見出しを「黒■#000000」と「墨色■#313131」で一度ずつ表示し、写真とのなじみ方を比較します。黒はより暗い文字として、墨系の見本は黒より少し明るい濃いグレーの文字として選べますが、どちらが適切かは写真や文字の大きさによって変わります。

• 本文の説明文：背景を温かみのある白■#F8F6F2、文字を墨色■#313131にする。
• 作品名の見出し：黒■#000000と墨色■#313131を同じ背景■#F8F6F2で比較し、採用した方に統一する。
• 作品カード：白■#FFFFFFを背景に使い、周囲の白系背景との差が小さいため余白や枠でも区切る。
• ページ下部：墨色■#313131のフッターに白■#FFFFFFの文字を置く。リンクは下線や文言でも区別する。

見出しと本文の色を少し変えただけでは、情報の優先順位が十分に伝わらないことがあります。見出しの大きさ・太さ・上下の余白もそろえて確認してください。黒と墨色を同じ場所で無秩序に切り替えるより、役割を決めて使う方がまとまります。

黒に近い色同士を重ねるときはコントラストに注意

コントラスト比は、文字と背景の明るさの差を数値で示すものです。WCAG 2.2のAA基準では、通常の文字は4.5対1以上、大きな文字は3対1以上が必要です。

温かみのある白■#F8F6F2の背景に黒■#000000を載せた場合は約19.46対1、墨色■#313131を載せた場合は約12.05対1です。どちらも通常文字の基準を上回ります。また、墨色■#313131の背景と白■#FFFFFFの文字は約13.01対1です。

反対に、墨色■#313131の背景に黒■#000000の文字を重ねると約1.61対1しかありません。似た暗色の組み合わせは文字に使わず、明るい文字を選びましょう。操作に必要なアイコンや境界も、色の違いだけでは見分けにくいことがあります。実際の画面で文字と隣接色を確認し、必要な形や余白を加えてください。