Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
Dan Hollick Profile picture
@DanHollick
Dec 9, 2021 • 12 tweets • 5 min read • Read on X
Scrolly
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.

🧵 A table demonstrating multi...
1. The most obvious change is the new scoring system.

The ratios are replaced by a level out of 100(ish).

The higher the number, the higher the contrast. A table describing how the ...
Here's what they mean:

15 - 🚫 Minimum for non-text elements
30 - ⚠️ Absolute min for any text
45 - ‼️ Min for large text (the old 3:1)
60 - ❗Min for body text (the old 4.5:1)
75 - ✅ Preferred level for body text A table describing the the ...Continuation of the table d...
2. The new standard takes text size and weight into account.

The score changes depending on the size and weight - meaning much less guess work for you.

The thinner the font, the worse the score. A table describing the acce...A table describing the acce...
3. Unlike WCAG 2, swapping text and background color affects the result.

This makes sense when you think about it - text has a lower visual area and thus lower contrast. A table demonstrating the e...A table demonstrating the e...
4. The APCA contrast calculation is perceptually uniform.

Humans don't perceive contrast linearly across hue and lightness and APCA takes this into account.

WCAG 2 modelled contrast mathematically. A visual illusion demonstra...The Koffka Ring Illusion, w...
This takes care of those weird issues WCAG 2 would struggle with, like orange buttons. A table demonstrating a cas...A table demonstrating three...
tl:dr

WCAG 3 will make your life easier as a designer. It isn't out yet but you can (and should) use APCA now.

@MyndexResearch has a great tool here:
myndex.com/APCA/simple
Also their piece explaining the benefits of APCA is great reading:
github.com/Myndex/SAPC-AP…
Other tools are starting to use APCA, including huetone by @ardovalexey

huetone.ardov.me
If you want to read a bit more about the problems with WCAG 2, I made a tweet thread about that here:
You can read the unrolled version of this thread here:
typefully.app/u/DanHollick/t…

• • •

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!

PDF

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

Dan Hollick Profile picture
Jun 8, 2023
Excited to finally share what I've been working on.

Introducing Detax, a comprehensive suite of automated tax avoidance and money laundering tools. Our goal is to revolutionise the financial fraud industry by bringing it into the 21st century.

detax.framer.website
Historically, avoiding tax has been a manual, labor intensive task which has put it out of the reach of most small businesses.

We're here to change that and open up a world of financial fraud to businesses of any size.
This is, of course, not real.

This is actually the site we're going to build in my advanced @framer course.

You can join the waitlist at advancedframer.com . Beta access in July.
Read 4 tweets
Dan Hollick Profile picture
Apr 13, 2023
How does a Large Language Model like ChatGPT actually work?

Well, they are both amazingly simple and exceedingly complex at the same time.

Hold on to your butts, this is a deep dive ↓
You can think of a model as calculating the probabilities of an output based on some input.

In language models, this means that given a sequences of words they calculate the probabilities for the next word in the sequence.

Like a fancy autocomplete. Image
To understand where these probabilities come from, we need to talk about something called a neural network.

This is a network like structure where numbers are fed into one side and probabilities are spat out the other.

They are simpler than you might think.
Read 26 tweets
Dan Hollick Profile picture
Mar 16, 2023
Why are some typefaces harder to read than others at the same font-size?

Well, it has a lot to do with x-height but of course it's a bit more complicated than that: ↓
You probably know this already but the x-height of a typeface is the difference between the baseline and the height of the lowercase letters.

We can also think of x-height as a ratio of the total cap height or body height.
Typically we use the letter x to determine this, hence the name.

Interestingly, curved lowercase letters like a, c, and e are often slightly taller than the x-height. They purposefully overshoot so that they appear the same visual height as x, v, w, and z.

Anyway...
Read 13 tweets
Dan Hollick Profile picture
Feb 1, 2023
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.
Read 16 tweets
Dan Hollick Profile picture
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
Dan Hollick Profile picture
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

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!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(