Typefully

WCAG 3 and APCA

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 multiple cases where WCAG 2 produces unintuitive contrast results compared against results from the new APCA standard

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 WCAG 2 contrast ratios roughly equate to the new APCA levels.

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 APCA levels. 15 is the minimum level for non-text elements - below this is practically invisible for a lot of people. 30 is the minimum level for comprehendible non-text elements such as icons.

Continuation of the table describing APCA levels.
45 is the minimum level for very large text or for smaller spot readable text.
60 is the minimum for fluently readable text.
75 is the preferred level for fluently readable text.
90 is the minimum for very thin font weights.

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 acceptable font sizes for each font weight (200- 700). The reference color pair is #6D6D6D on a white background. The minimum font size increases as the font weight gets thinner.

A table describing the acceptable font sizes for each font weight (200- 700). The reference color pair is #AA59A2 on a white background. The minimum font size increases as the font weight gets thinner.

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 effect on contrast when swapping orange and white from text to background. The table shows that the WCAG 2 result does not change but the APCA result indicates a lower contrast when the text is orange.

A table demonstrating the effect on contrast when swapping turquoise and white from text to background. The table shows that the WCAG 2 result does not change but the APCA result indicates a lower contrast when the text is turquoise.

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 demonstrating how we perceive grey blocks as darker when the background behind them is lighter.

The Koffka Ring Illusion, which demonstrates that we perceive part of the ring as darker when it is on a lighter background.

This takes care of those weird issues WCAG 2 would struggle with, like orange buttons.

A table demonstrating a case where WCAG 2 would predict the same contrast between two sets of colors that obviously different perceived contrast. The table demonstrates how APCA better predicts the perceives contrast.

A table demonstrating three cases where WCAG 2 would fail color pairings that have obviously good perceived contrast. The table also demonstrates how APCA more accurately scores the contrast.

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: https://www.myndex.com/APCA/simple

Also their piece explaining the benefits of APCA is great reading: https://github.com/Myndex/SAPC-APCA/blob/master/WhyAPCA.md

Other tools are starting to use APCA, including huetone by @ardovalexey https://t.co/GS157Iu7aL

If you want to read a bit more about the problems with WCAG 2, I made a tweet thread about that here: https://twitter.com/DanHollick/status/1417895151003865090

You can read the unrolled version of this thread here: https://typefully.app/u/DanHollick/t/sle13GMW2Brp

Made with

Typefully

Start writing

Write and schedule threads, and grow your Twitter audience.

Curated writing prompts to never run out of ideas

The best writing experience, with powerful scheduling

Cross-post to LinkedIn

Discover what works with powerful analytics

Collaborate on drafts and leave comments

Improve your content with AI suggestions and rewrites

Schedule with one click

Pick the perfect time

Boost your content

Tweet with daily inspiration

Break through writer's block with great ideas and suggestions.

Start with a fresh idea

Check examples out

Flick through topics

Check the analytics that matter

Build your audience with insights that make sense.

Share your drafts

Add comments

Control user access

Build an automated tweet machine

Our Zapier integration enables countless no-code workflows.

Typefully

Typefully

WCAG 3 and APCA

Made with

Typefully

Typefully

Write better tweets.Grow your audience.

Now with AI and LinkedIn cross-posting.

Curated writing prompts to never run out of ideas

The best writing experience, with powerful scheduling

Cross-post to LinkedIn

Discover what works with powerful analytics

Collaborate on drafts and leave comments

Improve your content with AI suggestions and rewrites

Top tweeters love Typefully

100,000+ creators and teams chose Typefully to curate their Twitter presence. Join them.

Queue your content in seconds

Write, schedule and boost your tweets - with no need for extra apps.

Schedule with one click

Pick the perfect time

Boost your content

Start creating a content queue.

Tweet with daily inspiration

Break through writer's block with great ideas and suggestions.

Start with a fresh idea

Check examples out

Flick through topics

Check the analytics that matter

Build your audience with insights that make sense.

Write, edit, and track tweets together

Write and publish with your teammates and friends.

Share your drafts

Add comments

Control user access

Build an automated tweet machine

Our Zapier integration enables countless no-code workflows.

Ready to write better tweets and grow your audience?

Typefully

Typefully

WCAG 3 and APCA

Made with

Typefully

Write better tweets.
Grow your audience.