[wp-trac] [WordPress Trac] #48342: Twenty Twenty ::selection color invisible with dark backgrounds

[WordPress Trac]

#48342: Twenty Twenty ::selection color invisible with dark backgrounds
---------------------------+-----------------------------------------
 Reporter:  afercia        |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  5.3
Component:  Bundled Theme  |    Version:  trunk
 Severity:  normal         |   Keywords:  has-screenshots needs-patch
  Focuses:  accessibility  |
---------------------------+-----------------------------------------
 Twenty Twenty uses a custom color for selected text: black background and
 white text.

 While this works with light background colors (e.g. the default one):

 [[Image(http://cldup.com/cOIr7pgVhn.png)]]

 it doesn't work with dark background: here's the same selected text with a
 dark background set via the Customizer:

 [[Image(http://cldup.com/iCSNJRts4z.png)]]

 Twenty Twenty is smart and when the background is dark it switches the
 body text to white. However, the `::selection` color is hardcoded in the
 main stylesheet and doesn't change:

 https://core.trac.wordpress.org/browser/trunk/src/wp-
 content/themes/twentytwenty/style.css?rev=46551&marks=144-147#L143


 {{{
 ::selection {
         background: #000;
         color: #fff;
 }
 }}}

 This way, operating a text selection is basically impossible as users
 won't be able to see the selection. Not to mention that even if the
 background is not a full black and it's some other color, for example a
 dark blue, the selection would be barely visible as well.

 For usability and accessibility it's recommended to not alter the
 selection color and leave that to the operating systems / browsers
 defaults.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/48342>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform