Dan Hollick πŸ‡ΏπŸ‡¦ Profile picture
Feb 1 β€’ 16 tweets β€’ 5 min read
Why is making a dark mode greyscale so hard to get right?

Well, of course it has to do with the weird way humans perceive colour and contrast. πŸ‘‡
The main issue is we we perceive contrast as higher between lighter colours.

Even though these two sets of colours have the same mathematical contrast we perceive the left as having more contrast than the right. Image
So in designs that use a lot of subtle light greys (containers, borders etc) it isn't as simple as just inverting the colour scale.

The contrast between darker greys will be lower as you can see below.
To fix this, you need to space the colours further apart to achieve the same contrast. This is tricky if your grey scale was set up for light mode.

One tactic I use is to create the scale based on the APCA contrast, which is much more reflective of human perception. Image
This ensure that contrast remains pretty consistent across modes even when you just flip the scale.

Not perfect but close.
So why do we tend to tint dark backgrounds blue?

Well, our perception of contrast isn't linear across hues. For instance, we perceive green as much brighter than blue. Image
This means we are much more sensitive to a green tint than we are to a blue tint.

Adding green or red just alters the tone much more than blue does, and pure black feels unnatural to some.

Blueish-blacks are more common in nature too (night sky). Image
But, of course this complicates your grey scale.

As the scale moves from light to dark the hue component will also need to move gradually towards blue.

The blue tinting looks very weird in the lighter shades (just look at my profile picture) Image
In summary, this shit is hard.

Below you'll find a bunch of threads I've done about some of this colour stuff before.

This one is about the difficulties of modelling human perception of contrast.

If you want to learn more about APCA, there is more detail in this thread.

You can use APCA in figma right now:
This one is about perceptually uniform colour spaces.

Congrats to anyone who made it here.

Your reward is that you get to retweet the first tweet and sound clever to all of your friends and colleagues.
You can read the unrolled version of this thread here: typefully.com/DanHollick/Uce…

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Dan Hollick πŸ‡ΏπŸ‡¦

Dan Hollick πŸ‡ΏπŸ‡¦ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @DanHollick

Dec 15, 2022
Ever heard of a shader but too afraid to ask what it even means at this point?

Lets fuck around and find out πŸ‘‡
First, we need to understand the difference between a CPU and GPU and why we need a separate unit just to draw graphics anyway.

(Don't worry, it's not going to be too technical.)
The thing that makes a CPU great is that it can perform a wide variety of tasks relatively quickly.

But the limitation is that each CPU core is optimised to do one thing at a time and so tasks are largely performed sequentially.
Read 19 tweets
Nov 2, 2022
Did you know these are called Boolean Operations?

That's because they use booleans to determine which part of the shapes should be visible.

Let me explain πŸ‘‡ Image
To keep it simple lets use two overlapping circles.

Imagine a boolean for each circle called "inside" - for the area inside each circle the boolean is true, for the area outside it is false.

Any point within the bounding box can be represented in terms of these booleans. Image
Boolean operations are just a way of combining these booleans together to make a new shape.

Take Union for example- the new shape will consist of any area that is inside the red circle OR the blue circle. Image
Read 12 tweets
Oct 20, 2022
Do you just click different blending modes until it sort of looks right?

Well, that probably won't change after you read this but at least you probably won't use Lighten or Darken again.

(you should bookmark this thread and use it as a reference)
Put simply, blending modes are a way of creating a new colour based on two input colours.

Hierarchy matters to the way we work out the new colour so the input colours are split into background and foreground.
Let's start with Darken and Lighten

These are the simplest blending modes and the produce a fairly predictable darkening or lightening.
Read 26 tweets
Oct 18, 2022

- Copilot was trained on open-source repos many of which have licenses that require attribution.
- There is no attribution.
- Github claims it falls under fair use.

Do they have a point or not? A text describing fair use ...
Say I prompt Copilot with "a React shopping cart component".

This feels analogous to a human going to read some code, understand the intent and re-implement it and I think we largely feel fine with that idea.

But it gets a bit more interesting than that.
I can prompt Copilot with "a React shopping cart component, in the style of @wesbos " and it might return a verbatim implementation of the one from his Advanced React course.

Now, I don't think Wes has an attribution license there but you start to see the issue.
Read 5 tweets
Sep 14, 2022
Ever wondered how a QR code works?
No, me neither but it's low-key fascinating.

(Warning, there is some extremely nerdy shit here.πŸ‘‡ ) Image
The Quick Response code was invented by a subsidiary of Toyota to track parts across the manufacturing process.

Barcodes were proving inadequate - they can only be read at certain angles and didn't store much data relative to their size

The QR code solves those issues and more Image
The most distinctive thing about a QR code are these cube shapes, called Finder Patterns, that help your reader detect the code.

The smaller fourth cube, the Alignment Pattern, orientates the code so it can be at any angle and the reader will still know which way is up. Image
Read 17 tweets
Sep 7, 2022
.@brian_lovin Been thinking about this tweet for a while, so I wrote a thread about how React works here:

but as for memoization, lets dig inπŸ‘‡
Put simply memoization is a performance technique that avoids doing duplicate work.

Imagine a simple function that calculates the square of a number Image
When you memoize a function, all you're doing is storing previous results so that the function isn't run twice with the same inputs/results.

(This only really makes sense for expensive calculations) Image
Read 7 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!


0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy


3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!