UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
Post on:2023年2月21日
sponsors
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。
これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。
Darkmode
by Dan Holick
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？
それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
わたし達は明るいカラーでコントラストを高く感じてしまうことが、その原因です。
下記の2組のカラーは数値的には同じコントラストであるにもかかわらず、わたし達は左の方が右よりもコントラストが強いと感じるでしょう。
数値的には同じコントラストの比較
そのため、繊細な明るいグレーを多用するUIデザイン（コンテナやボーダーなど）では、ダークモードにする際にカラースケールを反転させればよいという単純なものではありません。
反転させただけだと、暗いグレーあたりのコントラストが低くなります。
ライトモードとライトモードを反転させたダークモード
この問題を解決するには、カラーをさらに離して同じコントラストを実現する必要があります。グレースケールがライトモード用に設定されている場合、これは注意が必要です。
私が使用するテクニックは、人の知覚をより反映したAPCAコントラストに基づいてスケールを作成することです。
APCAコントラストに基づいてスケールを作成する
これにより、スケールを反転させただけでも、モード間でコントラストがかなり一貫されたままになります。
完璧ではありませんが、近いものがあります。
ライトモードとダークモードで、コントラストがほぼ同じになる
では、なぜダークの背景をブルーにする傾向があるのでしょうか?
それは、わたし達のコントラストに対する知覚が、色相全体で直線的ではないためです。たとえば、わたし達はブルーよりもグリーンをより明るく感じます。
ブルーよりもグリーンをより明るく感じる
これは、ブルーの色合いよりもグリーンの色合いに対して、わたし達が敏感であることを意味します。
グリーンやレッドを加えると、ブルーよりもはるかにトーンが変化し、ピュアブラックが不自然に感じる人もいます。
しかし自然界（たとえば夜空）でも、ブルーがかったブラックは一般的です。
左: グリーン、中: レッド、右: ブルー、下: ニュートラル
もちろん、これはグレースケールを複雑にします。
スケールが明るいものから暗いものになるにつれて、色相コンポーネントも少しずつブルーに向かって移動する必要があります。
ブルーの色合いは、明るい色合いでは非常に奇妙に見えます。
色相コンポーネントは少しずつブルーに向かって移動する
まぁ一言で言うと、とにかく難しいということです。
以下に私が以前、カラーについて書いたスレッドをご覧ください。これは人間のコントラスト知覚をモデル化することの難しさについてです。
💡Have you ever wondered why the WCAG colour contrast ratio doesn't always seem to work?💡
Well it actually has to do with how we calculate colour contrast and is super interesting.
Hold on to your butts, this is a 🧵 pic.twitter.com/iMjDwRDCtg
— Dan Hollick 🇿🇦 (@DanHollick) July 21, 2021
APCAコントラストを詳しく知りたい場合は、このスレッドに詳細があります。APCAコントラストは、Figmaでも利用できます。
zebra- Figma Comunity
WCAG 3 will use a new color contrast method called APCA (Advanced Perceptual Contrast Algorithm).
It's a big improvement over the current system but there are a lot of changes to get your head around.
— Dan Hollick 🇿🇦 (@DanHollick) December 9, 2021
これは、知覚的に均一な色空間に関するものです。
Gradients are the best way to explain perceptually uniform color spaces pic.twitter.com/QY6oICdH5F
— Dan Hollick 🇿🇦 (@DanHollick) February 2, 2022
sRGBがダメな理由について。
Have you ever used a color in Figma and found it looked totally different on the web?
Well I have some good news:
a) you're not crazy.
b) that's changing. pic.twitter.com/F5pOYYdY1g— Dan Hollick 🇿🇦 (@DanHollick) December 15, 2021
不均等に配置されたカラーシステム。
I've been playing around with color scales with unevenly spaced tones.
Clusters of tones at the top, bottom and middle to provide more options for Bg and text.
Anyone ever played around with this before? pic.twitter.com/MGHmVEi1Z5
— Dan Hollick 🇿🇦 (@DanHollick) January 12, 2022
一部のグラデーションが濁っている理由。
I never really understood why some gradients looked muddy.
If you visualise the color model in 3D, you can see that this happens when a gradient needs to pass through grey. pic.twitter.com/DDvXD4LlQt
— Dan Hollick 🇿🇦 (@DanHollick) November 23, 2021
sponsors
