Accessibility concerns in overriding the browser's native text-selector with CSS-CodePudding

In some designs for web projects, I've seen that the designer wants the browser's native text-selector to be customized following the Design System. For example, by changing the background and color of a text when it is selected. I'm not sure about the accessibility issues this can cause. My first take is that if the custom CSS matches the requirements of WCAG 1.4.3 Contrast (Minimum) it would be OK, as it happens with custom outlines for focus. However, I'm not sure about the secondary issues that this could cause to users with special contrast configurations in their system and browser.

1. Would overriding the browser's native text-selector with CSS be compliant with WCAG?

2. Can it cause other accessibility issues beyond what WCAG covers?

In my SASS code, it looks like this: (from this CSS trick)

body *::selection {
    color: $white;
    background: $primary-color-main; /* WebKit/Blink Browsers */
}
  
body *::-moz-selection {
    color: $white;
    background: $primary-color-main; /* Gecko Browsers */
}

A minimal reproducible example (without variables): This code changes the text-selector for all elements that are recurrent descendants of the body in any HTML code.

body *::selection {
    color: white;
    background: black; /* WebKit/Blink Browsers */
}
  
body *::-moz-selection {
    color: white;
    background: black; /* Gecko Browsers */
}

CodePudding user response：

Custom selection styles are compatible with WCAG criteria, as long as you fulfill the general requirements for color contrast and so on.

That said, custom selection styles could still be an accessibility issue. Users sometimes specify their own selection styles to fit their own needs. Additionally, users may be confused by changes to the expected appearance of selected text.

MDN has a little more info about selection accessibility.

CodePudding user response：

Customizing the text selection color is perfectly fine as long as you follow 1.4.3 Contrast (Minimum), as you noted. I've seen custom selection colors done for branding purposes and it can look really good.

There aren't any other WCAG issues with having a custom selection style but one thing you might want to check is if you turn on the OS's high contrast mode, whether PC or Mac, can you still see/read your text when it's selected? If you can't, it's not a strict WCAG failure but would certainly be a usability issue.

Also, having a custom selection style does not preclude the user from having their own customizations. I do this myself. I have a style sheet associated with my various browsers so that my customizations show up on any website I visit. I have !important in my CSS so that it will override whatever the site tries to do so I could still have my own selection style no matter how you tried to set it.