mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02:09 +00:00
Compare commits
2 commits
91117258bf
...
73d074122a
Author | SHA1 | Date | |
---|---|---|---|
|
73d074122a | ||
|
c1854c07ff |
3 changed files with 27 additions and 3 deletions
17
content/notes/more-aspects-to-contrast.md
Normal file
17
content/notes/more-aspects-to-contrast.md
Normal 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 Helmholtz–Kohlrausch 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.
|
||||||
|
|
|
@ -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 Helmholtz–Kohlrausch 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: Helmholtz–Kohlrausch effect
|
||||||
|
|
||||||
|
The Helmholtz–Kohlrausch 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
|
||||||
|
|
|
@ -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 Helmholtz–Kohlrausch 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.
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue