レビュー評価の色はどう決める？星や点数を見やすくする配色

レビュー評価では、星の数や「4.3 / 5」のような点数を短時間で理解できることが大切です。黄色い星はよく使われますが、色だけで「選択済み」「未選択」や評価の高さを伝えると、見分けにくい利用者もいます。星の形、塗りつぶし、数値表示を組み合わせ、文字とアイコンをそれぞれの背景色に対して確認すると、評価を読み取りやすくできます。この記事では、白背景にアンバー系の星を使う例で配色を考えます。

星の色だけで評価を伝えず、数値と形を組み合わせる

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2では、色を情報伝達の唯一の手段にしないことが求められます。W3Cの非テキストコントラスト解説でも、1〜5個の星を黄色と白の色だけで区別する表示は、色だけに状態を依存する例として注意されています。

表示用のレビュー評価なら、塗りつぶした星と輪郭だけの星を使い分け、その横に「4.3 / 5」「128件のレビュー」のような文字を添えます。これなら星の色を正確に見分けられなくても、評価値を確認できます。評価を入力する操作にする場合は、星を単なる画像にせず、選択肢としての名前やキーボード操作、フォーカス表示も用意します。W3CのARIA Authoring Practicesには、星を使ったRating Radio Groupの例があります。

アンバー・グレー・濃い文字で星と点数の役割を分ける

ページ背景を白 ■#FFFFFF、評価の数値をダークグレー ■#27313A にすると、コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約13.24:1です。「4.3 / 5」のような重要な点数は、星よりも確実に読める文字として表示します。

塗りつぶした星にはダークアンバー ■#9A5B00 を使うと、白 ■#FFFFFF との比率は約5.43:1です。未選択の星は塗りつぶさず、輪郭をグレー ■#6B7280 にすると、白 ■#FFFFFF に対して約4.83:1です。満点に近いほど色を濃くするのではなく、塗りつぶしの有無と星の数で評価を示します。

レビュー件数などの補足情報にはミディアムグレー ■#5B6470 を使うと、白 ■#FFFFFF との比率は約6.00:1です。評価を小さなラベルとしてまとめる場合は、背景をペールアンバー ■#FFF4D6、文字をダークブラウン ■#7A4B00 にすると約6.76:1です。

入力できる星はアイコン・フォーカス・状態を実際の背景で確認する

星がクリックできる評価入力なら、単に色が変わるだけではなく、選択済みは塗りつぶし、未選択は輪郭、キーボードフォーカス時は明確なフォーカスリングを表示します。WCAG 2.2では、操作や状態の理解に必要な非テキスト情報には隣接色との3:1以上が基準です。通常サイズの文字は4.5:1以上、大きな文字は3:1以上が基準になります。

星が黄色であること自体に意味を固定せず、ブランドカラーを使う場合も同じ考え方で、塗りつぶし・輪郭・数値を組み合わせます。HueRollでは候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やAA・AAAの自動判定には対応していないため、星の塗り色・輪郭・文字と実際の背景色の組み合わせは別途確認します。