紅葉の色を、にぎやかにしすぎない配色

主役の色は、ひとつだけ

Tohoku Autumn には、紅葉のオレンジ #D56B2D と、イチョウのような黄色 #E8A23B という、鮮やかな色が2つ入っています。どちらもきれいな色ですが、両方を広く使うと、色どうしが目立とうとして、画面がにぎやかになりすぎます。

秋らしさを出したいときほど、主役の色はひとつに決めます。ここではオレンジを主役にして、黄色は小さな点にとどめます。

広い面は淡いクリーム色、文字は濃い茶色、オレンジは1割だけ。黄色は、この1割の中のさらに小さな点に使います。

Tohoku Autumn の役割分担

いちばん明るい #F8F1E6 を背景にしたときの、6色の役割です。

本文には、いちばん濃い #5C2A1F を使います。背景との差は10.4対1あり、小さな文字でも読みやすい色です。ボタンは #A1422A を背景にして、文字を #F8F1E6 にします。こちらも5.6対1で、Webの基準（WCAG）の4.5対1を満たします。

主役のオレンジ #D56B2D は3.1対1です。大きな見出しなら使えますが、本文には足りません。黄色の #E8A23B と、くすんだ金色の #C6A15E は3対1に届かないので、文字には使わず、面や線だけに使います。

よくある失敗と直し方

1. 鮮やかな色を、2つとも大きく使う。オレンジと黄色の両方を広い面に使うと、どちらが主役か分からなくなります。片方を主役にして、もう片方は小さな点にします。
2. 明るい色の上に、白っぽい文字を載せる。#E8A23B の上の #F8F1E6 は1.9対1しかなく、ほとんど読めません。黄色の面に文字を載せるなら、#5C2A1F を使います（5.4対1）。

秋の色に、もう1枚

紅葉の色に、ほかのパレットの色を少しだけ足すと、雰囲気を変えられます。苔の緑を添えれば落ち着いた印象に、深い紫を添えれば夜の紅葉のような印象になります。

まとめ

紅葉の色を上品に使うコツは、鮮やかな色をひとつだけ主役にして、残りは淡い背景と濃い文字に任せることです。色の数を減らすのではなく、目立たせる色の数を減らすと考えると、うまくまとまります。

参考：Understanding Success Criterion 1.4.3: Contrast (Minimum)（W3C）。コントラスト比は WCAG 2.2 の計算式で算出しています。