#APCA

Inautiloinautilo
2025-05-15


Browser-applied contrast · How to make CSS choose black or white for contrast ilo.im/163v80

_____

Tata Bayramova, CPACCtbayramova
2025-05-02

My husband and I made a color contrast checker with WCAG and APCA support.

It has Live Preview with APCA-specific details, assisting messages, helpful explanations, and permalink support.

We'll be happy to know what you think :)

a-plus.tech/tools/contrast-che

Frontend Dogmafrontenddogma@mas.to
2025-04-06
Tommi 🤯tommi@pan.rent
2025-01-09

Woooow @marcedwards, thanks for sharing!

I always felt that some WCAG 2 color #a11y results were weird, but I never dove deeper. This shines a completely different perspective, super insightful!

The problem now is that benchmarking and testing services do still use #WCAG2 as their reference, so, absurdly enough, if we switched to #APCA we would get worse acccessibility scores… 🤨

2024-09-03

#APCA is designed to more accurately measure perceived contrast by assessing contrast in terms of lightness contrast, taking into account aspects such as polarity and contextual information like font size and weight.

APCA's more human-centred assessment of contrast gives companies like Stack Overflow more confidence that they are designing interfaces that are both aesthetically pleasing and readable by as many people as possible.

More on APCA: git.apcacontrast.com

2024-09-03

Is orange the forbidden colour in accessibility? 🔶🙅

Stack Overflow made an exception during its accessibility-focused redesign and chose to measure #colour #contrast using the Accessible Perceptual Contrast Algorithm (#APCA). Although they initially considered the #WCAG colour contrast algorithm, they decided against it because it struggles to accurately assess colour contrast when using orange, which is a significant issue when orange is a brands primary colour.

stackoverflow.blog/2024/08/07/

Antoinevillepreux
2024-07-09

Big accessibility cleanup on my website (villapirorum.netlify.app/dev) !

✅ Passed WCAG2 AAA color contrast AND
✅ Passed WCAG3/APCA color contrast

(checked with Wave & Visbug)

🥳

Also added support for text type in my color contrast checker / suggest tool (villapirorum.netlify.app/web/c)

2024-05-07

@agvbergin @cwilcox808 @dkieffer

Yes halation in dark mode can be an issue. But in order to set a max contrast, the contrast calculation has to be perceptually uniform. WCAG2 contrast is not accurate to use this way, and WCAG2 is also not useful for dark mode.

APCA can calculate for dark mode, and we are testing the following maximums (negative Lc value means light text/dark BG).

DARK MODE MAX

Small text (under 24px): Lc -90 max

Medium bold text (24-36px): Lc -85max

Large text (>36px) and thick solid icons or buttons: Lc -80
And Lc -75 max if the BG is darker than `#333333 `

We have a discussion thread on the subject at the APCA forum: github.com/Myndex/SAPC-APCA/di

#color #APCA #WCAG #contrast #darkmode

2024-04-05

È il momento di Agnese Ragucci con il talk "APCA. È tutto #FFD700 quel che luccica?"

🖥️ Agnese è UI & DS Designer @ Buildo
#cssday24 #cssday #css #APCA

Antoinevillepreux
2024-02-18

I recently switched from WCAG2 to APCA on my personnal projects, so I needed a simple tool to check color contrasts against that new guideline.
Did not find the existing ones efficient enough so quickly developped one that suited my needs.

More: villapirorum.netlify.app/web/

The tool: villapirorum.netlify.app/web/c

WCAG 2.0: w3.org/TR/WCAG20
APCA : git.apcacontrast.com
A more sophisticated APCA tool : contrast.tools

Amalgamamalgam_
2024-01-08

The other day I was trying to understand how much different colors contrast with each other so I’ve built a toy that you can play around with and see it!

You can change the background and foreground color and see how much they contrast with both and

Let me know what you think

rosenqvist.design/contrast-toy/

Amalgamamalgam_
2023-12-29

Did the same with . Interesting to see the differences.

Took much longer to implement btw. I'm also using absolute values, which you are not supposed to do, for comparison purposes.

lil5 :golang: 🚲 🇳🇱lil5@fosstodon.org
2023-12-19

How APCA Changes Accessible Contrast with Andrew Somers - YouTube
youtube.com/watch?v=E-CZial5Vk

After listening to this interview give this website a try: color-contrast.dev
It shows the Lc rating plus useful checks on what type of content it is approved for (e.g. body text, headers).

#apca #wcag #wcag3

2023-12-19

I was recently interviewed by Colleen Gratzer at @creativeboostco regarding APCA, Inclusive Reading Technologies, and guideline development.

We covered the important basics of perceptual uniformity, with ample visual examples.

#Webdesign #accessibility #A11y #WCAG #APCA #inclusive

creative-boost.com/apca-contra

Inclusive Reading Technologiesreadtech
2023-12-18

Do standards and guidelines lag emerging technology?
Yes.
Can this be helped?
Also yes.

A brief article posted on Linkedin:

linkedin.com/posts/andrew-m-so?

2023-12-18

Do standards and guidelines lag emerging technology?
Yes.
Can this be helped?
Also yes.

A brief article posted on Linkedin:
#a11y #Webdesign #WCAG #APCA #accessibility #Standards
linkedin.com/posts/andrew-m-so?

2023-12-18

Do standards and guidelines lag emerging technology?
Yes.
Can this be helped?
Also yes.

A brief article posted on Linkedin:
#a11y #Webdesign #WCAG #APCA #accessibility #Standards
linkedin.com/posts/andrew-m-so?

2023-12-14

@piper @eli_oat @blog

Hi Piper, please feel free to direct any questions or issues you may have to me, also let me know if you are interested in being a beta site.

One thing I'll mention: the important consideration for contrast is spatial, not color. Font weight/line thickness does more for contrast perception than color distance.

One way to think of this is, luminance distance needs to be increased to support thinner strokes.

Examples:

#APCA #contrast #WCAG

An infographic showing text samples which are all at the exact same CSS color, but differing in weight or stroke width.  What we see is a change in contrast due to the stroke width or font weight. A blue curve represents the human contrast sensitivity curve at threshold, showing how sensitivity decreases as spatial frequency increases. An increase in spatial frequency means the element is thinner and smaller.An infographic showing text samples at WCAG2 3:1 and 7:1, with four rows of samples at 1px 2px 3px and 4px in terms of line thickness. What we see is that the bigger change in contrast is due to the stroke width, font weight, or line thickness, as opposed to the difference in Color Contrast.
2023-12-11

Color contrast tools to check against APCA

EL introduced me to contrast.tools recently, it uses the Advanced Perception of Color Algorithm (APCA) to check the accessibility of your text based on the desired colors and the font weight + size. But importantly, it also provides a lookup table to verify how you should (possibly, probably) interpret things.
I think that APCA is being floated as the new contrast…

https://piperhaywood.com/color-contrast-tools-to-check-against-apca/

#accessibility #APCA #color

Client Info

Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst