1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 21:02:09 +00:00

Compare commits

...

2 commits

Author SHA1 Message Date
Rohan Kumar
73d074122a
New note: more aspects to contrast 2022-07-03 22:16:31 -07:00
Rohan Kumar
c1854c07ff
Mention Helmholtz–Kohlrausch effect wrt APCA 2022-07-03 22:01:54 -07:00
3 changed files with 27 additions and 3 deletions

View file

@ -0,0 +1,17 @@
---
title: "More aspects to contrast"
date: 2022-07-03T22:16:09-07:00
replyURI: "https://github.com/Myndex/SAPC-APCA/discussions/74"
replyTitle: "Dark Mode Color Palettes and APCA"
replyType: "https://schema.org/DiscussionForumPosting"
replyAuthor: "Ayush Agarwal"
replyAuthorURI: "https://microblog.ayushnix.com/"
---
This feedback has been helpful for me too; I incorporated the discussion around the HelmholtzKohlrausch effect into [the "contrast is complex" section](https://seirdy.one/posts/2020/11/23/website-best-practices/#contrast-is-complex) of my web best practices article.
I think the Helmholtz-Kohlrausch effect also ties into my concerns regarding overstimulation, also described in the same section of that article. Over-saturation of perceptually "light" colors that also look like "warning" colors (e.g. yellow, which contains the perceptually-bright green along with red) can be psychologically stressful.
I'm beginning to think that _a single scalar value might not be the best way to represent all these different axes._ Designers should try to strike different balances between different _sets_ of values, depending on responses to media queries.
On the other hand, the "default" values should still try to "even-out" potential harms and conform to existing norms, because fingerprinting-averse users (and users who just need to borrow someone else's un-personalized machine) should still receive some accommodation.

View file

@ -692,7 +692,14 @@ Note that the APCA isn't fully mature as of early 2022. Until version 3.0 of the
=> https://yatil.net/blog/wcag-3-is-not-ready-yet WCAG 3 is not ready yet => https://yatil.net/blog/wcag-3-is-not-ready-yet WCAG 3 is not ready yet
Yellow may have great contrast on dark backgrounds, but yellow and red can cause problems among people who deal with overstimulation; this includes people on the autism spectrum. Even if the APCA is much better than the WCAG's current naive contrast algorithms, it still doesn't account for all aspects of the relationship between perceptual contrast and color. This discussion on the SAPC-APCA repository covers some shortcomings; for instance, the current APCA doesn't account for the HelmholtzKohlrausch effect:
=> https://github.com/Myndex/SAPC-APCA/discussions/74 Dark Mode Color Palettes and APCA
=> https://en.wikipedia.org/wiki/Helmholtz%E2%80%93Kohlrausch_effect Wikipedia: HelmholtzKohlrausch effect
The HelmholtzKohlrausch effect describes how highly-saturated colors appear "brighter" than de-saturated colors with the same brightness. Excessive perceptual brightness against dark backgrounds can trigger halation, eye-strain, and overstimulation.
Yellow may have great contrast on dark backgrounds, but yellow and red can cause problems among people who deal with overstimulation; this includes many on the autism spectrum.
=> https://www.tpgi.com/beyond-wcag-losing-spoons-online/ Beyond WCAG: Losing Spoons Online => https://www.tpgi.com/beyond-wcag-losing-spoons-online/ Beyond WCAG: Losing Spoons Online
=> https://www.experia.co.uk/blog/ultimate-guide-to-autism-friendly-colours/ The Ultimate Guide to Autism Friendly Colours => https://www.experia.co.uk/blog/ultimate-guide-to-autism-friendly-colours/ The Ultimate Guide to Autism Friendly Colours

View file

@ -752,9 +752,9 @@ The APCA takes several factors into account:
Note that [the APCA isn't fully mature](https://yatil.net/blog/wcag-3-is-not-ready-yet) as of early 2022. Until version 3.0 of the WCAG is ready, pages that are required to comply with the WCAG should also conform to the contrast ratios described in the WCAG 2.2's success criteria 1.4.3 (Contrast: Minimum, level AA) or 1.4.6 (Contrast: Enhanced, level AAA). This site's dark-mode stylesheet is an example of a palette that conforms to both the WCAG 2.2 AAA contrast requirements and APCA recommendations. Note that [the APCA isn't fully mature](https://yatil.net/blog/wcag-3-is-not-ready-yet) as of early 2022. Until version 3.0 of the WCAG is ready, pages that are required to comply with the WCAG should also conform to the contrast ratios described in the WCAG 2.2's success criteria 1.4.3 (Contrast: Minimum, level AA) or 1.4.6 (Contrast: Enhanced, level AAA). This site's dark-mode stylesheet is an example of a palette that conforms to both the WCAG 2.2 AAA contrast requirements and APCA recommendations.
Yellow may have great contrast on dark backgrounds, but yellow and red can cause problems among [people who deal with overstimulation](https://www.tpgi.com/beyond-wcag-losing-spoons-online/); this includes [people on the autism spectrum](https://www.experia.co.uk/blog/ultimate-guide-to-autism-friendly-colours/). Even if the APCA is much better than the WCAG's current naive contrast algorithms, it still doesn't account for all aspects of the relationship between perceptual contrast and color. [Discussion no. 74 on the SAPC-APCA repository](https://github.com/Myndex/SAPC-APCA/discussions/74) covers some shortcomings. For instance, the current APCA version does not account for [the HelmholtzKohlrausch effect](https://en.wikipedia.org/wiki/Helmholtz%E2%80%93Kohlrausch_effect): highly-saturated colors appear "brighter" than de-saturated colors with the same brightness. Excessive perceptual brightness against dark backgrounds can trigger halation, eye-strain, and overstimulation.
If you want to use yellow and red, de-saturate them so that their color feels muted. This site's dark theme uses pale, washed-out yellow and pink for maximum contrast with minimal harshness. Yellow may have great contrast on dark backgrounds, but vivid yellow and red can cause problems among [people who deal with overstimulation](https://www.tpgi.com/beyond-wcag-losing-spoons-online/); this includes [many on the autism spectrum](https://www.experia.co.uk/blog/ultimate-guide-to-autism-friendly-colours/). If you want to use yellow and red, de-saturate them so that their color feels muted. This site's dark theme uses pale, washed-out yellow and pink for maximum contrast with minimal harshness.
Accounting for halation, overstimulation, and high-contrast needs is hard to do if you prioritize minute aesthetics before inclusivity. Accounting for halation, overstimulation, and high-contrast needs is hard to do if you prioritize minute aesthetics before inclusivity.