annotation blue colours looks too similar

[danielweck]

[danielweck]

Note that on my MacBook Retina display this is less obvious, but on my external monitors (4k and 2k) despite decent colour profile support, the colour similarity is very much a problem

[panaC]

need to double check with @mylène

[Hoppipollala]

For this component, I used GitHub's colour palette. These can be changed if needed* — or reorganized to avoid blues and green tones to be next to each other, which would be the simplest way IMO.

*That being said, I don't think a lot of users will want to higlight content with several different colours. And if they want too, there are enough colours in the palette to get a real difference when you highlight diferent portions of text with different colours.

[danielweck]

when we choose / fine-tune colours for the annotations highlights, we must make sure that they work in both "light" and "dark" modes. to be precise, we must test the colour presets / themes with each highlight colour, in Thorium using a reference publication like "accessible epub3" for example (i.e. not in isolation inside a design tool like Figma). the reason for needing to test in-situ is that the CSS mix-blend-mode used to layer highlights on top of document text produces vastly different results depending on our colour choices. in an ideal world the highlights would be placed behind the text instead of on top of it, but unfortunately zindex techniques do not work universally with some authored styles, and break nearly always with fixed layout documents. CSS mix blend mode has its limitations, but at least it delivers consistent results and decent contrast compared with opacity.

[llemeurfr]

For information, Acrobat colors:

[danielweck]

https://react-spectrum.adobe.com/react-aria/ColorSwatchPicker.html ( https://react-spectrum.adobe.com/react-aria/ColorSwatch.html )

Accessible – Includes a localized color description for screen reader users (e.g. "dark vibrant blue")

[danielweck]

Books.app on MacOS ... note how different the colours look between the popup context menu and the resulting highlights!

[Hoppipollala]

I can't remember why it was decided to use the same colours for Dark and Light modes in the end, but :

• the idea of using less saturated colours for dark mode comes from colour contrast compliance (needs to work in combination with the text + the background colour) + having colours that don't trigger eye strain (the whole point of this dark mode)
• the more saturated colours are available in the colour palette, since they're used for borders in the Light Mode
• it's easier to tell the difference between the Apple Books app because… they have less colours. We can simply remove some colours to avoid having different shades of blues and greens.

Light mode palette :

Dark mode palette :

If there is a need to change the colours, we can.

[danielweck]

Perhaps a "cheap-to-implement" solution to reduce the discrepancy between the colour palette presented to the user and the actual presentation inside HTML documents, is to render a preview of the text background/foreground where the user can pick the colour. The CSS mix-blend-mode can be applied directly in the preview area, using the current (user-configured) colour theme. I will take a stab at it to demo what I have in mind.

[danielweck]

I wrote a quick-n-dirty POC of a "preview" feature to demonstrate the problem of CSS mix-blend-mode and the lack of consistency / broken expectations especially with text colour (background colour affected too, not because of transparency but because of blend mode during superposition of highlights)