accessibility issues with ::selection [buzzkill scutoid returns to spoil more bhl fun]

[scutoid-bkr]

Is your feature request related to a problem? Please describe.
hi unfortunately i've returned to raise another issue that will probably mean hampering the theme's aesthetics in some ways to achieve a better level of accessibility, and in this case, general usability.

so the problem is with a transparent color being used for the background of ::selection and there being no text color change on ::selection in addition to that.

---

MDN web docs says:

Don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs. For people experiencing cognitive concerns or who are less technologically literate, unexpected changes to selection styles may hurt their understanding of the functionality.

If overridden, it is important to ensure that the contrast ratio between the text and background colors of the selection is high enough that people experiencing low vision conditions can read it.

I don't think leaving the selection as blue and white is that bad but I do think changing it to be some other color is for the better.

That being said, the background color should not be transparent. It means that the background color impacts the potential contrast ratio of the selection with the selected text.

Although this is probably not good contrast with the background, this selection is relatively visible:

But this selection is really not very visible on darker backgrounds:

On accent color backgrounds it's invisible:

It doesn't really work. And themes based on BHL that change accent colours can have bigger issues with this, especially themes that add their own cool div blocks to put text in -- this is something I frequently encounter on Backrooms Wiki where all the pages use BHL so it's super prevalent, but I bet it happens loads on SCP as well.

---

Describe the solution you'd like:

One solution is to not to anything to ::selection at all. Just leave it blue and white like in sigma-9.

Another solution is to change the styling. Bedrock does this:

:selection {
  background-color: rgb(var(--selection-background-color),.875);
  color: rgb(var(--selection-text-color));
}

It's only slightly transparent, so it makes it a slightly subdued color without being invisible. I think that's a good compromise. Even on a background of the same color as --selection-background-color, the selection would be visible due to the text-color changing too.

These are some examples of how it could look (this doesn't use the .875 alpha value, it's not transparent at all):

I think these should definitely have variables like in Bedrock. I'd suggest --swatch-selection-bg-color and --swatch-selection-color but you're the boss lol

---

Describe alternatives you've considered:
I was considering just changing this on the Backrooms Wiki theme or just fixing specific issues. If you want, you could also go through and find whatever parts of the theme break the current selection and change their ::selections to be different, but that won't fix all the issues on particular pages.

Link to the relevant page(s)
Any BHL page will demonstrate the issue in some places e.g. the footer.

[scutoid-bkr]

Additional thing! i was looking at the kcon hub again and i saw this:

Even on the accent colour background, and even though there's white text, we can still see the text is being changed a little which is probably the best that can be done even though it's still not super duper apparent -- I think you could just make the text colour be the light text colour but have an alpha value

[Woedenaz]

This is a very good point! I'm not married to the way BHL does selections so I'm happy to alter this to be more inline with best practices. I think I did this when I was trying to add more visual "flair" to BHL and got a little carried away. It shouldn't be difficult to fix.