Webデザインやバナーで黄色を使うと、思ったより目がチカチカしてしまうことがありますよね。
元気で明るい印象を出したいのに、画面上では「安っぽい」「広告感が強すぎる」と感じられてしまうことも多いはずです。
実は、RGBでの黄色は少し数値を動かすだけで印象が大きく変わる色なんです。
この記事では、RGB値の目安から、Webサイトとバナーでの使い分け、文字色とのコントラストやアクセシビリティまで、実務のデザインでそのまま使える形で整理していきます。
黄色に苦手意識がある人でも、この記事を読み進めると「このくらいの黄色にしておけば大きく失敗しない」という感覚がつかみやすくなります。
【この結論まとめ】
- 自然な黄色は純色より「少し暗く・少し灰色寄り」に振ると落ち着いて見えます。
- 背景用は明度高めで彩度控えめ、ボタン用は少し彩度を上げるとメリハリが出ます。
- 黄色背景の文字には黒か濃いグレーを基本にし、コントラスト比の目安を守ると安心です。
- 端末ごとの見え方は完全には揃わないため、実機チェック前提で「許容できる範囲」を決めておくとスムーズです。
RGBの黄色を自然に見せるには？まず押さえたい基本の考え方
一言でいうと、自然な黄色に見せたいときは「純色から少しだけ彩度と明度を落とす」ことが出発点になります。
ここではまず、sRGBでの黄色の範囲と、なぜ真っ黄色がきつく感じられるのかを整理しておきます。
そのうえで、背景やアクセントなど用途によって黄色の明度と彩度の考え方を分けていきましょう。
sRGBでの黄色の範囲と「真っ黄色」がきつく見える理由
sRGBでは一般的に、RとGが高く、Bが低めのときに黄色らしく見えます。
ただし、R=255 G=255 B=0 のような純色に近い黄色は、モニター上では非常に強く、ハイライトのように目立ちすぎることが多いです。
そのため、実務ではRとGを少し落とし、Bをわずかに足すことで、目に刺さらない黄色を作ることがよくあります。
【代表的な黄色のRGB値と見え方の目安】
| 用途イメージ | 例のRGB値 | 見え方の目安 |
|---|---|---|
| かなり強い黄色 | 255, 255, 0 | 蛍光に近く、注意喚起や警告向き |
| 自然で明るい黄色 | 250, 224, 80 | 明るいが少し落ち着きがあり、UIにも使いやすい |
| やわらかいクリーム系 | 255, 247, 214 | 背景に使っても目が疲れにくい淡い黄色 |
| くすみイエロー | 222, 198, 120 | 大人っぽく上品な印象で、ブランドサイトにも向く |
（出典：MDN Web Docs）
※本内容は執筆時点。最新情報は公式サイト確認。
純色に近い黄色は、隣り合うピクセルとのコントラストが強く、境界がギラついて見えがちです。
少しだけ明度や彩度を下げると、同じ「黄色」でも一気に馴染みやすくなると覚えておくと扱いやすくなります。
ここがポイント：
真っ黄色は「ここを見て」と叫ぶ色なので、ベースではなくアクセント専用にしておき、自然に見せたい場面では少し暗く・少し灰色寄りに振るのが基本です。
背景色とアクセント色で変わる黄色の明度・彩度の考え方
背景として広い面積で使う黄色と、小さなボタンやアイコンの黄色は、求められる強さがまったく違います。
背景は読む人の視界のほとんどを占めるので、明度は高めでも彩度はかなり抑えた方が目にやさしくなります。
一方で、アクセント用の黄色は周辺の背景や文字からしっかり浮き上がってほしいため、背景よりほんの少しだけ彩度を上げるとメリハリが出ます。
【背景・ボタン・文字用の黄色の明度・彩度イメージ】
| 用途 | 明度の目安 | 彩度の目安 |
|---|---|---|
| 背景 | 高め | 中〜低 |
| ボタン・アイコン | 中〜高 | 中〜やや高め |
| テキスト強調 | 中 | 中〜低（周囲とのコントラスト次第） |
（出典：W3C）
※本内容は執筆時点。最新情報は公式サイト確認。
同じ黄色でも、背景用には「白に寄せたクリーム色」、ボタン用には「ややオレンジ寄りで厚みのある黄色」と使い分けると、画面全体が落ち着いて見えやすくなります。
要点まとめ：
「背景は薄め」「ボタンは一段だけ濃く」という感覚を持っておくと、RGB値を動かすときに迷いにくくなります。
モニター環境やカラープロファイルで黄色が変わるポイント
同じRGB値でも、端末やブラウザ、カラープロファイルの違いによって黄色の見え方は少しずつ変わってしまいます。
特にノートPCとスマホでは、輝度の初期設定や色温度が違うため、スマホの方が黄色が鮮やかに、あるいは赤寄りに見えることがあります。
最近は広色域ディスプレイも増えており、sRGBより強めに発色する環境では黄色のギラつきが増幅されることもあります。
実務では、sRGB前提でデザインしつつ、「少し薄めに作っておいて端末で確認しながら微調整する」という進め方が現実的です。
注意点：
RGB値だけで完璧な見え方を固定しようとせず、「何台かの端末で見ても許容できる黄色」を目標にしておくと、無理のない落としどころが見つかりやすくなります。
Webデザインで気持ちよく見える黄色のRGB値とカラーパレット
ここでは、Webサイト全体の配色の中で黄色をどの位置づけにするかを考えていきます。
背景ベース、アクセント、リンクやボタンなどの役割ごとに、使いやすい黄色のパレットを決めておくと、とても楽になります。
背景ベースに使いやすい「やわらかい黄色」のRGB目安
背景として黄色を使うときは、「第一印象は黄色だけれど、白背景と並べても違和感がないくらいの薄さ」を目指すと視認性が高くなります。
このとき、彩度を上げすぎると一気に子ども向けサイトのような印象になりがちなので、白にクリームを混ぜたようなイメージで設定していくと安心です。
【背景用のおすすめ黄色パレット一覧】
| 役割 | 例のRGB値 | コメント |
|---|---|---|
| メイン背景 | 255, 247, 214 | ほぼ白に近く、記事系サイトでも使いやすい |
| セクション背景 | 252, 237, 190 | コンテンツブロックの区切りにちょうどよい濃さ |
| サイドバー背景 | 248, 229, 170 | 少しだけ情報密度を上げたいエリア向き |
（出典：ベイジ）
※本内容は執筆時点。最新情報は公式サイト確認。
これらの黄色は、白背景と並べたときに「ほんのり色がついている」程度なので、長文コンテンツでも目が疲れにくいバランスになります。
ここがポイント：
背景用の黄色は、単体で見ると物足りないくらい薄く感じても、テキストや他の要素と組み合わせるとちょうどよくなることが多いので、あえて控えめからスタートするのがおすすめです。
CTAボタンやアイコンに効く「アクセント黄色」の作り方
アクセントとしての黄色は、ユーザーの視線を引き寄せる役割があるので、背景よりも明るさと彩度を一段だけ上げます。
ただし、赤寄りにしすぎるとオレンジに、緑寄りにしすぎると黄緑になってしまうため、「少しだけ赤寄り」のバランスを意識すると、扱いやすいボタン色になります。
背景を淡い黄色にした場合、アクセント黄色は同系色で濃くするか、思い切って無彩色にするかを事前に決めておくと、デザインがぶれにくくなります。
【アクセント用黄色と周辺色の組み合わせ例】
| 組み合わせ | 黄色の例RGB値 | 周辺色の例 |
|---|---|---|
| 王道ボタン | 250, 190, 60 | 背景：白、文字：#222222 |
| 落ち着いたCTA | 232, 176, 80 | 背景：#F7F3E9、文字：#1F2933 |
| ポップなアイコン | 255, 210, 70 | 背景：白、補助色：明るい水色 |
（出典：MDN Web Docs）
※本内容は執筆時点。最新情報は公式サイト確認。
判断の基準：
背景とボタンの黄色の差が小さすぎると押せる場所がわかりにくくなり、大きすぎると画面がうるさくなるので、「背景より明度を少し下げて彩度を少し上げる」というバランスを意識すると整えやすくなります。
サイト全体のトーンに合わせた黄色の選び分け
同じ黄色でも、サイト全体のトーンによって「似合う黄色」の幅が変わります。
ポップでカジュアルなトーンなら、明度も彩度も高めの黄色がマッチしやすく、落ち着いたブランドサイトならくすみ系の黄色がしっくりきます。
最初に「このサイトはどのトーンに寄せたいか」を決め、そのトーンに合わせて黄色の候補を数個に絞っておくと、配色決定がスムーズになります。
【トーン別：黄色を含む基本カラーパレット例】
| トーン | 黄色の例RGB値 | あわせる色の例 |
|---|---|---|
| ポップ | 255, 210, 70 | ライトブルー、白、黒 |
| ナチュラル | 232, 192, 120 | ベージュ、ブラウン、オフホワイト |
| モダン | 235, 200, 60 | ダークネイビー、ライトグレー、白 |
（出典：ベイジ）
※本内容は執筆時点。最新情報は公式サイト確認。
一言まとめ：
まずはサイト全体のトーンを決め、そのトーンに合う黄色を「背景用」「アクセント用」で2〜3色だけ用意しておくと、デザイン中の迷いがぐっと減ります。
バナーで黄色をメインに使うときの配色パターンと印象のつくり方
バナーは画面の一部に単独で表示されることが多く、Webサイト本体よりも「瞬間的なインパクト」が重視されます。
そのぶん黄色の強さを少し上げても成立しやすい一方で、やりすぎるとチープに見えたり、文字が読みにくくなったりしやすいのが難しいところです。
ここからは、バナーならではの黄色の使い方をパターン別に整理していきます。
クリックを誘う強めの黄色バナーと、支える周辺色の選び方
キャンペーンやセールのバナーでは、「今だけ」「お得」といった印象を強く伝えるために、黄色をやや派手目に設定することがあります。
このとき重要なのは、黄色そのものよりも「周りの色をどれだけ抑えるか」です。
文字色や枠線、背景のサブカラーを落ち着いた色にしておくと、黄色が強くても全体の印象は整いやすくなります。
【目的別：黄色メインのバナーパターンと印象】
| 目的 | 黄色の例RGB値 | 周辺色のイメージ |
|---|---|---|
| セール告知 | 255, 215, 70 | 文字：黒、縁：濃い赤、背景：白 |
| 新商品紹介 | 245, 205, 80 | 文字：ダークグレー、背景：淡いグレー |
| 期間限定イベント | 240, 190, 60 | 文字：ネイビー、背景：白または淡いベージュ |
（出典：ベイジ）
※本内容は執筆時点。最新情報は公式サイト確認。
失敗しないコツ：
黄色バナーでは、文字色と周辺色を「黒・濃いグレー・ネイビー」などの落ち着いた色にまとめ、派手な色を黄色以外に増やさないようにすると、うるささを抑えつつクリックを誘いやすくなります。
優しい・上品に見せたいときのくすみイエロー配色
高価格帯の商品や、落ち着いたブランドイメージを打ち出したいときは、くすみ系の黄色が頼りになります。
彩度を抑え、少しだけブラウンやグレーを混ぜたような黄色にすると、背景色や商品写真と馴染みやすく、大人っぽい雰囲気を出せます。
この場合、白やライトグレーよりも、少しだけ暖かみのあるベージュやグレージュと組み合わせると、全体にまとまりが出やすくなります。
【トーンダウンした黄色バナーの配色例】
| シーン | 黄色の例RGB値 | 組み合わせる色 |
|---|---|---|
| コスメ・ライフスタイル | 222, 198, 120 | 背景：グレージュ、文字：ダークブラウン |
| インテリア | 216, 184, 110 | 背景：オフホワイト、文字：チャコールグレー |
| 食品ギフト | 228, 196, 120 | 背景：ベージュ、差し色：深いグリーン |
（出典：Adobe）
※本内容は執筆時点。最新情報は公式サイト確認。
補足：
くすみイエローは写真と組み合わせたときに柔らかく馴染みやすいので、商品の世界観を壊さずにキャンペーン感を出したいときに特に向いています。
チープさやハレーションを避けるためのNGパターン
黄色バナーがチープに見えてしまう典型的なパターンは「黄色＋原色の赤＋原色の青」のように、強い色をたくさん並べてしまうケースです。
また、黄色の上に白や淡い色の文字を乗せると、コントラスト不足で「どこを見ればいいかわからない」バナーになりがちです。
さらに、黄色と背景の明度差が小さいのに、境界線を引かないまま配置すると、輪郭がボヤけてハレーションのように見えることもあります。
【やりがちな黄色バナーの失敗例と改善案】
| 失敗パターン | 問題点 | 改善の方向性 |
|---|---|---|
| 黄色＋赤＋青を同時使用 | 情報量が多く幼い印象 | 黄色以外は無彩色か1色に絞る |
| 黄色背景に白文字 | コントラスト不足で読みにくい | 文字を黒か濃いグレーに変更 |
| 背景と明度差が小さい | 境界が曖昧でぼやけて見える | 枠線や影を追加して境界を強調 |
（出典：WAIC）
※本内容は執筆時点。最新情報は公式サイト確認。
意外な落とし穴：
「目立たせたいから色を増やす」という発想は、黄色バナーでは逆効果になりやすく、むしろ黄色以外を減らした方が伝えたい情報がはっきり見えるようになります。
黄色と文字色のコントラスト｜読みやすさとアクセシビリティを両立する
黄色は明るい色なので、「背景に使うと文字が読みにくくなりやすい」という弱点があります。
ここでは、黄色背景と文字色の組み合わせでどのくらいコントラストを取るべきか、目安となる考え方を整理します。
あわせて、黄色文字を使うときの注意点や、WCAGの基準との付き合い方も見ていきましょう。
黄色背景×文字色の組み合わせとコントラスト比の目安
黄色背景の上に黒い文字を置くと、多くの場合視認性は確保できますが、黄色の明度が高すぎるとコントラストが足りなくなることもあります。
逆に、黄色背景に薄いグレーや白文字を乗せると、見た目は柔らかくても可読性が一気に下がってしまいます。
文字サイズにもよりますが、一般的な本文テキストでは、WCAGの推奨するコントラスト比を目安にしつつ、「少し余裕を持たせた組み合わせ」を選んでおくと安心です。
【黄色背景に対する文字色と読みやすさの比較表】
| 背景の例RGB値 | 文字色の例 | 読みやすさの目安 |
|---|---|---|
| 255, 247, 214 | #222222 | 本文でも十分読みやすい |
| 252, 237, 190 | #333333 | 小さめの文字でも対応しやすい |
| 248, 229, 170 | #FFFFFF | 強調見出しなどに限定して使用推奨 |
（出典：WAIC）
※本内容は執筆時点。最新情報は公式サイト確認。
ここがポイント：
黄色背景では「黒に近い濃いグレー」を基本形にしておき、白文字は太字の見出しや大きな数字など、限られた場面だけに使うと、読みやすさを保ちやすくなります。
黄色文字を使うときの注意点と避けたいシチュエーション
黄色文字は、暗い背景に乗せたときに強いアクセントになりますが、常に使いやすいわけではありません。
背景が中明度の色（例えば中くらいのグレーやくすみカラー）の場合、黄色文字はコントラスト不足とチラつきの両方を引き起こしやすいです。
また、長い文章を黄色文字にするのはほぼNGで、「短いラベル」「ボタン内の一部」「グラフの数値」など、限定的な用途にとどめるのが安全です。
注意点：
黄色文字を使う場合は「暗い背景＋短いテキスト」に絞り、本文やリンクのような常に読んでほしい情報には使わないと決めておくと、アクセシビリティ上のリスクを避けやすくなります。
WCAGのコントラスト基準と実務での落としどころ
WCAGでは、本文レベルのテキストに対してコントラスト比4.5:1以上、やや大きめの文字では3:1以上などの基準が示されています。
黄色はもともと明度が高いため、背景や文字に使うとこの比率を確保しにくく、基準に忠実に従うと「思ったより濃い色になってしまう」と感じることもあります。
実務では、重要なテキストや頻繁に読む部分は基準を満たす組み合わせで作りつつ、「短い補足」「グラフィカルな要素」に限って少し緩めの組み合わせを検討する、というバランスの取り方も現実的です。
【テキストサイズ別の推奨コントラスト比の早見表】
| テキストの種類 | 推奨コントラスト比の目安 | 黄色使用時の考え方 |
|---|---|---|
| 本文テキスト | 4.5:1 以上 | 黄色は背景よりアクセント側に回す |
| 見出し・大きなボタン | 3:1 以上 | 黄色背景に黒文字なら達成しやすい |
| 補足的なラベル | 3:1 を目安にしつつケースバイケース | 読み飛ばしても問題ない情報に限定 |
（出典：W3C）
※本内容は執筆時点。最新情報は公式サイト確認。
結論：
黄色を背景や文字に使う場合は、コントラスト比を確認しつつ「どの情報まで厳密に基準を守るか」を決めておき、重要な情報ほどコントラストをしっかり確保するという優先順位で考えるのが現実的です。
実務で使える黄色のWebデザイン・バナー制作の手順
ここからは、実際の制作フローの中で黄色を決めていく手順を整理していきます。
RGB値だけを先に決めるのではなく、「黄色にどんな役割を持たせるか」からスタートすると、配色全体がまとめやすくなります。
ヒアリングから「黄色の役割」を決めるまでの流れ
まず最初に、クライアントや自分自身の中で「なぜ黄色を使いたいのか」を言語化しておくと、後の調整がスムーズになります。
たとえば「明るく元気なブランドイメージを出したい」「注意喚起をわかりやすくしたい」「ナチュラルで温かみのある印象にしたい」など、黄色に期待する役割を整理しておきます。
役割が決まれば、「背景に使う黄色なのか」「ボタンだけに使うのか」「バナーで主役にするのか」といった使いどころも自然に決まっていきます。
【用途別：黄色に期待する役割の整理】
| 用途 | 黄色に期待する役割 | 優先したいポイント |
|---|---|---|
| Webサイト背景 | 温かみ・親しみやすさ | 長時間見ても疲れにくい淡さ |
| CTAボタン | 行動を促す視認性 | 周囲からの視覚的な浮き上がり |
| キャンペーンバナー | 一目でわかるお得感 | 情報の読みやすさとのバランス |
（出典：ベイジ）
※本内容は執筆時点。最新情報は公式サイト確認。
実践ポイント：
ヒアリングシートや要件定義の段階で「黄色はどこにどれくらい使う予定か」を軽くメモしておくだけでも、その後のRGB調整が一貫したものになりやすくなります。
デザインツールで黄色を決めるときのチェックリスト
FigmaやPhotoshopなどのデザインツールで黄色を決めるときは、「1つの画面だけ」で判断してしまうと危険です。
複数のコンポーネントやページを並べた状態で、黄色がどこまで広がっているのか、他の色とのバランスはどうかを確認しながら調整していきます。
また、グローバルなカラースタイルやカラートークンを使う場合は、「背景用」「アクセント用」「警告用」など役割ベースで黄色を分けて定義しておくと、後から管理しやすくなります。
【ツール操作時に確認したい黄色設定チェック項目】
- 黄色を使っているコンポーネントを一覧で見て、役割が混ざっていないか。
- 背景用とアクセント用で、明度・彩度に段差がついているか。
- グレースケールに切り替えても、要素の重要度がだいたい判別できるか。
- 同じ黄色を使い回しすぎて「べた塗り感」が出ていないか。
ここがポイント：
デザインツール内では、カラーを「感覚」ではなく「役割」で管理するイメージを持つと、黄色の使いすぎや不足に早めに気づけます。
コーディング時に確認したいCSS指定と実機テストのポイント
コーディング段階では、デザインカンプで決めた黄色の値が正しく反映されているか、CSSの指定とブラウザの表示でズレがないかを確認します。
背景色やボタン色は background-color、テキストは color などで指定することが多いですが、ホバー時やフォーカス時の状態も含めて黄色の変化をチェックしておくと安心です。
最後に、PC・スマホ・タブレットなど複数の端末で表示を確認し、「どこか1台でだけ極端に黄色がきつく見えないか」をざっと見ておきます。
【CSSでの黄色指定と表示確認のポイント一覧】
| 確認項目 | 内容 | 備考 |
|---|---|---|
| ベースカラー | デザインカンプと同じRGB/HEXか | CSS変数を使うと管理しやすい |
| 状態変化 | ホバーやアクティブ時の黄色の変化 | コントラストが落ちすぎていないか確認 |
| 実機表示 | 複数端末で黄色の見え方をチェック | まぶしすぎる端末がないか確認 |
（出典：MDN Web Docs）
※本内容は執筆時点。最新情報は公式サイト確認。
アドバイス：
コーディング後の実機テストで「少しまぶしいかも」と感じたら、RGBのRとGをほんの数ポイント下げるだけでも印象が和らぐので、デザインに戻りすぎずCSS側で微調整するのも現実的な方法です。
黄色を使うときに迷いやすいポイントとトラブル事例
最後に、黄色を使うときに起こりがちなトラブルと、その考え方をまとめておきます。
ここで挙げるポイントを事前に意識しておくと、後から「想像と違った」という修正がぐっと減ります。
ディスプレイごとに黄色の見え方が変わってしまう問題
端末ごとに黄色の見え方が違うのは、完全には避けられない現象です。
色温度が高いディスプレイでは黄色がやや白っぽく、色温度が低いものではオレンジ寄りに見えることがあります。
この差をゼロにすることは難しいので、「複数の端末で見たときにどれも許容できる範囲」を目標にするのが現実的です。
見逃せないのが：
社内やクライアントの確認用端末をあらかじめ揃えておき、「この3台で問題なければOK」という基準を共有しておくと、色の議論が感覚論だけで長引きにくくなります。
ブランドカラーの黄色とのズレを最小限にする考え方
ブランドガイドラインで決められている黄色が、Web上では強すぎたり、コントラスト的に厳しかったりするケースもあります。
その場合は、ブランドカラーを「純粋な基準色」として残しつつ、Web用に少しだけトーンを落とした「実装用の黄色」を別途定義する方法が有効です。
ロゴやキービジュアルにはブランド黄色を、その周辺のUIや背景にはWeb用黄色を使うといった使い分けをすれば、一貫性と実用性の両方を保ちやすくなります。
覚えておきたい：
ブランドカラーは「触ってはいけない絶対値」ではなく、「軸として参照しながら媒体ごとに最適化していく色」と捉えると、Webに落とし込むときの調整がしやすくなります。
アクセシビリティとデザイン性のバランスで悩んだときの整理の仕方
黄色はアクセシビリティの観点から見ると、「慎重に付き合いたい色」です。
一方で、ブランドやコンバージョンの観点からは、印象に残る色として使いたい場面も多くあります。
迷ったときは、「どの情報は絶対に読みやすくすべきか」「どの情報は多少装飾的でもよいか」を整理し、前者は基準をしっかり守り、後者はデザイナーの裁量で調整するという線引きをすると考えやすくなります。
判断の基準：
メニューや本文、重要なボタンなど「操作や理解に直結する要素」はコントラスト基準を優先し、飾り的なラベルや背景の装飾はデザイン性側を優先するなど、要素ごとの優先順位を明確にしておくと迷いが減ります。
まとめ
ここまで、RGBで黄色を自然に見せる考え方から、Webデザインとバナーでの具体的な使い分け、文字色とのコントラストや実務フローまで一気に見てきました。
自然な黄色は、純色から少しだけ明度と彩度を落とし、場合によっては灰色やブラウン寄りに寄せることで、画面になじみやすくなります。
Webサイトの背景用には淡いクリーム系、ボタンやバナーには少し強めの黄色と、用途ごとに役割を分けておくと調整がしやすくなります。
黄色背景の文字には濃いグレーや黒を基本とし、WCAGのコントラスト比を目安にしながら、重要な情報ほど読みやすさを優先して組み合わせを決めていくのが安心です。
実務では、ヒアリングで黄色の役割を決め、デザインツールで役割ベースのカラーパレットを作り、コーディング後に複数端末で確認するという流れをひとつの型として持っておくと心強くなります。
まずは本記事で紹介したRGB値の例やチェックリストをたたき台に、自分のプロジェクトにあった黄色のパターンを少しずつストックしていってみてください。
よくある質問（FAQ）
Q. RGBで「自然な黄色」にしたいとき、具体的な値の目安はありますか？
A. 背景用なら255,247,214前後、アクセント用なら250,190,60前後のように、純色より少し暗く彩度を抑えた値が目安になります。あとはサイトのトーンに合わせて、明度と彩度を少しずつ上下させながら調整していくイメージです。
Q. 黄色背景に乗せる文字色は何色が一番読みやすいですか？
A. 基本は黒に近い濃いグレーが一番読みやすく、安全です。背景がごく淡い黄色であれば#222222〜#333333あたりのダークグレーを使うと、本文テキストでも視認性を確保しやすくなります。
Q. 黄色のボタンがスマホでだけきつく見えるのはなぜですか？
A. スマホは輝度が高く、色域も広いことが多いため、同じRGB値でもPCより黄色が派手に見えやすいのが理由です。そのため、PCでちょうどよくてもスマホでは少し彩度を落とした方がよいケースがあり、実機チェックが欠かせません。
Q. 黄色文字はWebデザインで使ってはいけないのでしょうか？
A. 基本的には慎重に使うべきですが、暗い背景に短いテキストとして使う分には有効なこともあります。本文やリンクなど常に読んでほしい情報には避け、ラベルや数字などポイントで使う程度にとどめるのがおすすめです。
Q. バナーで黄色をメインにすると安っぽく見えがちなとき、どこを調整すればよいですか？
A. 黄色そのものをくすみ寄りにするか、周辺の色を落ち着いたトーンに変えると印象が整いやすくなります。特に文字色や背景のサブカラーを黒・ネイビー・ブラウンなどに絞るだけでも、ぐっと品のある雰囲気に近づきます。
Q. ブランドカラーの黄色と、Webで安全に使える黄色がずれた場合はどちらを優先すべきですか？
A. ロゴやキービジュアルにはブランドカラーを使い、UIや背景にはWeb用に最適化した黄色を使う「二段構え」にするのが現実的です。この方法ならブランドの一貫性を保ちつつ、アクセシビリティや可読性も両立しやすくなります。
参考文献・出典
- WAIC「達成基準1.4.3 コントラスト（最低限レベルAA）」
- W3C「Web Content Accessibility Guidelines (WCAG) 2.1」
- MDN Web Docs「色空間（Color space）」
- Chrome for Developers「High definition CSS color guide」
- ベイジ「Webデザインの配色で失敗しないための基本ルール」
- Adobe「RGBとCMYKの違い」
