商品レビューの高評価・低評価を色で分けるときの注意点

ECサイト（インターネットで商品を販売するサイト）のレビュー欄で、高評価を緑、低評価を赤に分ければ、商品の違いがすぐ伝わりそうです。しかし、色だけで評価を示すと、色覚の違いやモノクロ表示によって意味を読み取れない場合があります。また、低い点数を強い赤で強調すると、実際のレビュー内容より悪い印象を与えることもあります。評価点・レビュー件数・文字ラベルを先に整え、色を補助として使う方法を紹介します。

高評価・低評価は色より先に点数と文字で伝える

5点満点のレビューなら「平均4.7 / 5」「平均2.3 / 5」のように、評価の数値と満点を明記します。そこに「高評価」「低評価」という文字を添えれば、緑や橙の違いを見分けられなくても状態が伝わります。星の絵だけを並べたり、緑・赤の丸だけで分類したりしないことが基本です。

WCAG 2.2（WEBコンテンツを利用しやすくするためのガイドライン）の「Use of Color」は、情報を伝える唯一の視覚的手段として色を使わないよう求めています。レビューの意味を決めるのはラベルと数字で、色は素早く見つけるための補助と考えましょう。

「何点以上を高評価と呼ぶか」はサイト内で統一して決める必要があります。すべてのECサイトに共通する境界値があるわけではありません。また「4.8点・5件」と「4.6点・200件」では評価件数が違うため、平均点だけを見せると受け取り方が偏る可能性があります。色分けの有無にかかわらず、件数と元のレビューを確認できる設計が大切です。

商品カードに評価点を並べる配色とHTML・CSS例

架空の雑貨店の商品一覧で、携帯マグAを「高評価・平均4.7 / 5・124件」、携帯マグBを「低評価・平均2.3 / 5・96件」と表示する例を考えます。この数値は画面設計用の仮データであり、実在商品の評価ではありません。

一覧の外側は薄い青灰色 ■#F8FAFC、商品カードは白 ■#FFFFFF、商品名や点数は濃い青灰色 ■#1F2937、件数はグレー ■#475569とします。白いカードと周囲の淡色は約1.05:1と差が小さいため、境界が必要なカードには青灰色 ■#64748Bの線を加えます。この線は白いカードと約4.76:1、外側の薄い青灰色と約4.55:1です。

高評価ラベルには淡い緑 ■#ECFDF5の背景、濃い緑 ■#166534の文字、緑 ■#15803Dの実線枠を使います。低評価ラベルは淡い橙 ■#FFF7EDの背景、濃い橙茶 ■#9A3412の文字、橙 ■#C2410Cの破線枠にします。濃い赤を必須にせず、背景を淡く、文字を濃くすることで、レビュー欄全体が警告表示のように見えるのを避ける例です。

文字とラベル背景のコントラスト比は、高評価で約6.77:1、低評価で約6.88:1です。両方ともWCAG 2.2が通常の文字に原則求める4.5:1を上回ります。枠線とラベル背景の比率も、それぞれ約4.76:1と約4.88:1です。数値は指定した色の組み合わせに対する計算結果であり、画面全体の使いやすさを保証するものではありません。

HTML（ページの内容と構造を記述する方法）では、色とは別に評価の意味を書きます。

<div class="review-grid">
  <article class="review-card">
    <h3>携帯マグ A</h3>
    <p>
      <span class="review-badge review-badge--high">高評価</span>
      <strong>平均 4.7 / 5</strong>
      <span class="review-count">（レビュー124件）</span>
    </p>
  </article>
  <article class="review-card">
    <h3>携帯マグ B</h3>
    <p>
      <span class="review-badge review-badge--low">低評価</span>
      <strong>平均 2.3 / 5</strong>
      <span class="review-count">（レビュー96件）</span>
    </p>
  </article>
</div>

CSS（ページの色やレイアウトを指定する記述）では、ラベルの色と枠線の形を分けます。

.review-grid {
  display: grid;
  gap: 16px;
  padding: 16px;
  background-color: ■#F8FAFC;
}
.review-card {
  padding: 16px;
  background-color: ■#FFFFFF;
  border: 1px solid ■#64748B;
  border-radius: 12px;
  color: ■#1F2937;
}
.review-card h3 { margin: 0 0 12px; }
.review-card p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.review-count { color: ■#475569; }
.review-badge {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid;
  border-radius: 6px;
  font-weight: 700;
}
.review-badge--high {
  background-color: ■#ECFDF5;
  color: ■#166534;
  border-color: ■#15803D;
  border-style: solid;
}
.review-badge--low {
  background-color: ■#FFF7ED;
  color: ■#9A3412;
  border-color: ■#C2410C;
  border-style: dashed;
}

この例では実線・破線の違いもありますが、状態を理解するために必要なのは「高評価」「低評価」という文字と点数です。配色や枠線が見えなくても情報が欠けないようにします。

低評価を過度に強調せず、件数・表示条件も点検する

低い評価は、必ずしも「購入してはいけない」という警告ではありません。評価理由には商品の好みや使い方の違いもあるため、赤い全面背景などで一律に危険を表すことは避けます。高評価だけを目立たせたり、低評価のレビューを薄い文字で読みにくくしたりせず、元のコメントへ公平にたどれる構成にしましょう。

また、平均点の集計対象、レビュー件数、表示順が利用者の理解と一致しているかを確かめます。例えば、まだレビューがない商品に「低評価」の色を付けず、「レビューなし」と別の文字で示します。スコアの境界を変更したら、画面に表示するラベルも同じ条件で更新してください。

公開前にはグレースケール、スマートフォン、拡大文字で評価点・件数・ラベルが読めるか確認します。文字色と背景は実際の組み合わせで、意味のある枠線は隣接色との非テキストコントラストも確認します。HueRollは色候補と、選択色に対する白・黒のコントラストを確認できますが、任意の2色の比較やWCAGの自動合否判定はできません。完成したレビュー表示の配色は別途チェックしましょう。