You can obtain a light grey colour on an off-white background by using black at 3% opacity. We just needed to ensure that all instances of the background pattern were displayed at low opacities. Of course, once we identified the problem, coming up with a solution was fairly easy. In most cases, this resulted in very poor text legibility and breaking every accessibility rule around colour contrasts. We were embedding it directly inside an tag so as to be able to easily change the colour fill - it’s a branding thing! In all cases, this colour fill would be just a few shades lighter or darker than the actual background colour, resulting in a subtle watermark effect that did not impact text legibility.īut with Samsung internet darkening the brightness of the page background colour while lightening the background pattern itself, alternating areas of high/low contrast were created.
In the case of the Australian Museum website, we were using a geometric weave pattern in SVG format as a background image on the page. Why this was a problem in our case and the solution Note: I reached out to the Samsung Internet Dev Team asking about the reasoning behind how they implemented Night Mode, but at the time of publication had not received a response. But of course we at the IC like to do things differently, which is where things started to fall apart. So in this context yes, they should be treated like text when applying a dark/night mode. In today's world of high-resolution screens coupled with broad browser support, it only makes sense to use them as opposed to other image formats: being vector-based they can scale to any size without loss of quality. Why treat SVGs like text as opposed to images? Well, I’m assuming that it’s because a lot of UI elements, such as icons and symbols, are built using SVGs. Which leads us to the fifth and final point which was the issue that provoked the angry tweet. Essentially, once you start inverting the contrast of some elements while leaving others the same you open up a Pandora’s box leading to all sorts of pitfalls. This wasn’t the problem in our case, however the potential is there. Any light background images with dark text overlaid on top will fail in Dark/Night Mode on Samsung Internet browser: the text will have its contrast inverted but the background image will stay the same resulting in light text on a light background. The fourth point is where things get problematic, namely when dealing with background images with text overlaid on top. For most people, there is little value in having images turned into negatives, and it probably isn’t what they had in mind when thinking about a dark mode. This way, any design that already follows the expected light on dark convention remains relatively the same.
The first two points are fairly logical: if I am looking to achieve what most people would consider a dark mode/theme in all instances, then I need to lighten all text while at the same time darken all other colours which could potentially contrast with it.
0 kommentar(er)
