Replies: 10 comments 6 replies
-
|
Hi @ayushnix Thank you very much for sharing your experiences, this is a topic of active research here.
There is growing consensus that these kinds of issues are an important aspect of user preferences, due to the very wide spectrum of human visual perception. Some people experience halation, others need high contrast for readability. As far as conformance scores, this is a work in progress, and your comments are an important part of the public beta period that we are in.
This is also a useful piece of information, and without getting into the minutiae, I'll mention that perceptions like halation are a product of many factors: eye age, impairments such as astigmatism, ambient light adaptation, screen/field adaptation, screen peak brightness, other screen calibration issues, operating system and video signal type, display technology (LCD vs OLED), size of the stimulus (i.e. the text or icons) and their color and luminance contrast, etc. Followup Questions:I don't want to get too personal in a public thread, so only if you are comfortable mentioning it, are you are over or under age 40, and do you use glasses or contacts while reading on the screen? What operating system do you use, and what are your display and color management settings? Do you have or use a hardware calibrator for the monitor? Or are you using the factory supplied color profiles? Or the generic operating system color profile? Regarding Monitor SettingsReading the manual for the monitor that you indicated, your monitor is an UHD WCG/HDR, capable of reasonably high peak brightness. In the monitor's setting, you should see a picture mode called "Reader" — can you turn that on and look at the sites where you have a known halation issue, and tell me what your experience is? Other ExamplesHere are a couple screenshots of one of my sites, showing the light mode and dark mode. With the monitor settings you normally use, do you notice any problems or issues reading either? If you want to try the full page, which has a variety of color combination examples, the link is: "Understanding Luminance Contrast". For these pages, the light/dark mode follows the operating system settings using media queries. Dark mode
Light mode
I look forward to your comments, and thank you for reading, Andy |
Beta Was this translation helpful? Give feedback.
-
under
yes, although I don't have any diagnosed eye disorders except myopia
Linux, specifically Arch Linux
I haven't configured any display or color management settings in my operating system except a gamma adjusting service similar to f.lux. The issue that I've described happens in either case - when I adjust gamma and when I don't. As I've mentioned, until recently, I was using the factory calibrated "vivid" profile on my monitor that was changed using the monitor OSD but I switched to custom preset a few weeks ago to try and resolve this issue by lowering contrast but that didn't help. All of this was done on the monitor itself, not in the operating system.
No
Enabling the "Reader" profile on my monitor (while the gamma adjustment service was switched off on my operating system) makes the blog post by oriole.systemsLc 98 much more readable than before. I still experience some level of halation but I guess it's been reduced by somewhat more than half. The blog post by SeirdyLc 90 is now almost completely readable without any significant halation issues. I guess "Reader" increases the gamma of my monitor just like an operating system tool like f.lux does? If so, it seems to do it significantly more than I usually set my gamma adjustment service.
The page on light mode is fine to read without any issues except the red colored notice at the start of the page. It doesn't cause halation but it is uncomfortable to look at. The page on dark mode is readable but it does cause a bit of halation while I read the body of text in the "Introduction (Updated for 2020)" section. The red colored notice still feels uncomfortable. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @ayushnix Thank you for for the additional information. Some side notes, some of this is anectdotal.
My understanding regarding your specific monitor, is that "reader mode" lowers the peak luminance. The monitor you have is designed to perform at brighter levels than a standard sRGB monitor. Based on your change in perception when you enabled it, this seems valid. One of the key things we've found is that complaints of "too much contrast" invariably come down to excess monitor luminance. Because of the array of devices and capabilities, this makes guidelines challenging to write.
I find this statement very interesting. Would you describe it as "too vivid" ? And particularly for the darkmode version, did the red letters have any "shimmer" or scintillation effects? AdditionalAt the moment, we are experimenting with setting "Max contrast" at Lc85 to Lc90, and at the moment applying to only larger fonts (32px and up) in part because on a standard resolution display, smaller fonts have reduced contrast due to the effects of antialiasing. Since you have a very high res-monitor, it is likely that small text does not become subsumed to the background due to AA, as it tends to with standard resolution. Some studies have indicated that those under 40 are less happy with dark mode, due to halation. I can tell you with my low vision impairments, that dark mode is the only way I can function. And certainly, #000 to #fff is way too much. Nevertheless, I do see the halation on Serdy's page, but for the large bold headings only. For the record, I am using a MacBook with a retina display, and luminance adjusted for good readability and low fatigue. Thank you again for your comments and feedback. |
Beta Was this translation helpful? Give feedback.
-
|
Jumping in here to say that a note along the lines of "Max contrast of LC85-LC90 to avoid halation, but depends on the display's brightness and the actual human's vision" would be extremely helpful. I am working on a text-heavy website and I am putting a lot of focus into making the reading experience as easy as possible. The current plan is to have two main themes: a high-contrast theme (the dark variant, It would be divine to have some guidance for "beyond X level some folks may experience Y issue" with helpful documentation and links, even if the research is not 100% definitive. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Vlaaaaaaad
Yeah, this is turning into a more complicated issue simply because ambient adaptation levels have such a huge affect, and these new monitors with HDR just throw a new wrinkle in the whole situation.
Color and contrast is not at all trivial, and it's still an open field of research.
OK, so the following site is where we are building the master guidelines. It is still a work in progress, but it is where are we intend to be presenting all the material that is helpful and normative. APCA Readability CriterionIt is a text heavy website, currently in light mode only, and using a technique that I refer to as The Paper Reading Experience. I'll be releasing more on the Paper Reading Experience as a best practice hopefully soon, but the basic concept is to establish a peak adaptation in the peripheral vision with a wide white border about ~2em from text, and the background behind the text being at about 85% of the luminance of the white (i.e. #e8e2dd), and the text being full black or very dark, i.e. least darker than #222. Aside from that, the site lists the various proposed guidelines relating to best practices for color and contrast. The fast start is "Bronze Simple Mode", what is room to go much deeper than that and listed on the site. Please let me know if you have any other questions or comments. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Myndex
Am I correct in assuming that when you say "luminance", you mean brightness of the monitor?
I don't think I experience shimmer or scintillation (assuming it's similar to scintillation grid illusion). It's hard to describe but the red color seems to require more effort to read and I end up staring at the text.
I don't know if there already is a caveat mentioned somewhere about this in APCA guidelines or if it's even appropriate to mention it but unlike light mode, extremely high contrast dark mode colors (>95 Lc), especially white on black variations, may end up hurting people's eyes more than helping them. The oriole.systems blog post certainly falls under this issue, at least for me. I could make some effort and read Seirdy's body text with some discomfort but the oriole.systems blog post is simply unreadable. |
Beta Was this translation helpful? Give feedback.
-
|
Maybe an unrelated comment but I find it interesting that this color combination has an Lc of 85 and, in contrast, this color combination has an Lc of 85.6. The difference in Lc is negligible but the latter color combination is much more likely to cause halation and/or eye strain while the former is much more comfortable to look at and read text on. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @ayushnix Thank you for the additional comment. What you are seeing there is referred to as the Helmholtz–Kohlrausch effect, where highly saturated colors appear brighter or more vivid that their actual luminance. The current public beta APCA does not correct for HK effects, and calculates luminance, as that is what is processed in the visual cortex for reading, though we have unreleased extensions that do consider HK and other hue/sat issues. These are works in progress. QUESTIONS FOR YOU:Do you find the saturated yellow causes halation in light mode, as you've linked to? I believe you mentioned previously that you only experienced halation in dark mode situations? Have you tried both color pairs you linked to in dark mode? To flip, just click the big ampersand & in the middle of the tool. For these two colors pairs, and in dark mode and light mode, can you tell me separately the degree of difference you perceive in:
Thank you! Andy |
Beta Was this translation helpful? Give feedback.
-
|
And to add: The issues with highly saturated colors is also a cognitive one, affecting at a cognitive level particularly for neurodivergent. I mention this as this is an important topic, and in discussion, though also lacking in terms of clarity for a reasonable guideline. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Myndex
It doesn't cause halation but it does induce eye strain. I don't think I'd want to read text on that saturated yellow background although I'd be fine reading text on the lesser saturated yellow background mentioned in the former link.
The saturated yellow color when used as text on the dark background color does cause halation. It's uncomfortable to read body text using this color combination Lc 85.7. The lesser saturated yellow on dark combination Lc 85 is mostly comfortable to read with some minor halation issues.
Light Mode +
Light Mode +
Dark Mode +
No, it usually takes about 15-30 seconds for all of these effects to kick in.
The above report was on the usual "vivid" mode of my monitor. On "reader" mode, all of the above issues are reduced significantly. There's non-negligible halation and discomfort left when using
No, on my phone with an OLED screen, everything seems to be fine in both dark and light mode using both colors. Happy to help! Ayush |
Beta Was this translation helpful? Give feedback.
-
|
Thank you Ayush, your feedback has been immensely helpful! Andu |
Beta Was this translation helpful? Give feedback.
-
|
@ayushnix's feedback has been helpful for me too; I incorporated the discussion around the Helmholtz–Kohlrausch effect into the "contrast is complex" section 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. (POSSE from https://seirdy.one/notes/2022/07/03/more-aspects-to-contrast/) |
Beta Was this translation helpful? Give feedback.
-
|
Hi Rohan @Seirdy
Yes.... A single scalar does not encompass all of these things. However, when it comes to what can be a "normative" guideline, there are restrictions in terms of what can be a "shall" as opposed to what can be a "should". In other words, what becomes a legal mandate vs what remains a suggested best practice. The distinction is significant. As a WCAG 3 co-author, I am restricted from adding anything that I can not show a clear set of existing research that represents consensus. On the other hand, as an independent researcher, I can add these issues to potential research projects to further that goal. Nevertheless, this is the kind of design guidance that would be useful in the supplemental guidance docs, and I believe that the COGA group have been doing so, though I have not reviewed. Base APCAThe base APCA is tasked with defining a foundation of readability. IMO this includes a maximum contrast. And I have research and accepted practices defined by NASA and the FAA as consensus science here. When we start talking about HK and some of these other issues, there is a less-clear set of circumstances for defining specific guidelines that are actionable and not contradictory, etc. As I've said repeatedly, there is no one-size-fits-all here (and the current shoe does not fit very well at all)... Thank you for reading |
Beta Was this translation helpful? Give feedback.
-
Draft Dark Mode GuidanceThis is essentially a post I made on StackExchange/GraphicDesign. Question:
Short AnswerThe WCAG 2.x contrast math is wrong in that it does not follow nor predict human perception of contrast. It can not be used to calculate dark mode. Longer AnswerIn April of 2019, I made a post on GitHub pointing out that, essentially, the wrong math was being used to predict contrast. This led to extended research and creation of new contrast methods, notably APCA.
Unfortunately, the ratios generated from WCAG 2.x math are not a great way to predict how a human will perceive contrast. Contrast is a perception, and does not follow linear maths in most contexts.
You're on a better track here, but yes, simply measuring luminance difference is not going to be perceptually uniform (which, interestingly, is how the UK standard for architectural signage is based). Light in the real world is mathematically linear, that is, if you have 100 photons of light and triple it, you then have 300 photons of light. But that change of 3x may only seem to be a slight increase, due to how our perception compresses a given range of light, or paradoxically in other cases, may seem to be much more than 3x. And the non-linear curve of perception is determined by a number of factors, including our present adaptation level, which is our vision adjusting to the current ambient illumination in our immediate environment. The spatial frequency—how large or small and thin an element is—is also important, and the contrast of surrounding elements has an effect as we "locally adapt" to the relative contrast. In other words, if you have a design that is mostly low contrast (let's say 15), then a higher contrast of a given value (let's say 60) will seem more contrasty than that same high contrast (60) which is surrounded by other contrasts of 45 to 75. Put another way, we perceive more the relative contrast difference than an absolute contrast value. Our human perception is always relative to context, and not absolute.
No. You're on the right track.
There is now.
So, I am working on an article on this very subject. What you need first is a perceptually uniform contrast prediction. APCA is one. Once you have a reasonably uniform contrast prediction across the visual range, then determine the center contrast for each polarity (light mode and dark mode) and use those centers to pivot. With the current APCA constants (0.98g-4g) the contrast center for light mode is Simple exampleIf A more typical exampleLet's start with a background color of The BG color Text color Text: Text: NotesSome of you may be saying "oh wait the center is Middle contrast is a different perception. |
Beta Was this translation helpful? Give feedback.
-
|
Another way SDR luminance can be misleading is how it handles glare: the real range is less like 0-1 but more like 0.05-1, though this changes a lot depending how your display is made. The WCAG2 contrast function has a 0.05 adjustment for that stuff. Then there's the discussion about how nobody's screen is actually 80 nits at full white. Regarding HK effect: a recent approximation is High, Green, and Nussbamm 2023. It takes CIELAB and spits out the shade of grey humans think it's as bright as. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Mingye @Artoria2e5
The 0.05 relates to CRT monitors, which have a substantially higher glare/flare factor. LCD and OLED displays are a completely different technology, and present a much lower glare/flare component in general. Also, that affects very dark elements, and is not significant otherwise. As for the "0-1" or more like "0.0045 - 1.025+" ....is it really 1.0 at the top? This is more relative to the eye's adaptation state, which is dependent on the room ambient illumination. These factors also play into the effective gamma curve. For instance with CIE LAB, which is based on Munsell value, if monitor peak white is L* 100, that's essentially ~102.5% .. or more, a bright monitor in a dark adaptation environment could be effectively higher, such as 120% or more, based on some experiments here.
Again, this is dating back to ancient CRT displays. 120 cd/m² is the more common, though this is technically not "sRGB", not that that's terribly relevant as it is a de-facto standard at this point. And certainly many have it higher than 120nits.
It's an interesting paper, I was experimenting using sin and/or cos to control hue eccentricity. It's useful to model the effect appearance to a degree, though I wonder if there is a more direct solution (because I think there is). |
Beta Was this translation helpful? Give feedback.
-
I've been using APCA to check several color palettes for the dark mode colors on my website and I noticed that I get halation if I read high contrast text on a dark background. I wrote a post about this on my microblog and @Myndex left a comment on my post on Mastodon.
I'll use two examples — a blog post by oriole.systems and another blog post by seirdy. I'm unable to read either blog posts in their dark mode colors. After reading a few lines, white flashes of text start appearing on the screen and I have to stop. The dark mode colors in the former case pass APCA guidelines for body text at 14px to 18px font size at a font weight of 400. The Lc value is 98. In the latter case, the Lc value is 90 and that qualifies for body text as well. Meanwhile, the dark colors on my microblog fail both WCAG 2.0 AAA and APCA guidelines for body text. The Lc value is at 56. I'm also pretty comfortable with GitHub's Dark Dimmed colors which also don't qualify for body text according to APCA. The Lc value is 61.
I realize that my setup, lighting conditions, hardware, and other factors may play a major role so I'd like to mention it briefly. I usually sit in a room with a TP-Link LB130 smart bulb with its color set to HSV(53, 36, 96) with no other source of light. I use a LG 27 inch UL850 4K IPS monitor. I was using its vivid color preset but I recently switched to a custom preset and lowered the contrast but that didn't help with this issue. Interestingly, this issue is not as pronounced on my Pixel 4a OLED 5.8 inch smartphone screen. I still feel a bit uncomfortable reading the blog post on oriole.systems but the halation effect is mostly absent.
I'd also like to add that I'm completely fine with light mode colors and do not suffer any sort of halation issues either on my monitor or on my smartphone, even if the color combinations have fairly high (>90) Lc values.
I'm not sure if there's something wrong with my hardware or my eyes or if this issue is known among other people. The dark mode colors on my website are taken from the OneDark colorscheme which is a fairly popular colorscheme used on terminals, editors, IDEs etc. Its popularity can be judged by the fact that there are multiple OneDark colorscheme implementations for the Neovim text editor. To be clear, I mean to say that there are certainly people out there who prefer using color combinations in dark mode which fail both WCAG 2.0 AAA and APCA body text qualifying criteria. If we keep this in mind, how should I use and interpret APCA Lc recommendations about body text while using/creating dark mode color palettes?
Beta Was this translation helpful? Give feedback.
All reactions