Fixing Google Docs Broken Text Selection Highlight (High Contrast/Dark Themes)

Google Docs is a pretty swish web app, but unfortunately its styling follows Google’s preference for flat, low contrast design. As a visually impaired user, this renders Google Docs inaccessible for me, unless I switch my browser (Firefox) to use the high contrast Windows color scheme, or use a “dark reader” type of add-on. Using either makes Google Docs usable with nice, dark, high contrast colors. BUT, and this is a HUGE BUT, it completely breaks the text selection highlight color when you click and drag your mouse or use cursor keys to select letters, words or blocks of text. The highlight is invisible, and selecting text is reduced to a stressful guessing game. It’s crap and makes me saaaad.

Googling about the issue shows nothing, and looking for info on Google Docs CSS editing/hacking shows 10 year old results, for a product that doesn’t resemble today’s Google Docs at all. Sigh!

So what’s a tired eyed engineer to do? Hack the document and figure out what CSS actually controls the selection and highlight colors, obviously! Using Stylish (or your choice of CSS injector), add the following CSS rule to work on the docs.google.com domain..

.kix-selection-overlay {
background-color:#777!important;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
opacity:1;
}

Simple! No idea if this is common knowledge. I certainly couldn’t find anything useful online, and this works nicely for me. The colors can obviously be anything you fancy. I can now use Google Docs with abandon and see exactly what I’m selecting and copying!

Enjoy!

Category: Personal Blog, Stuff and Nonsense, VI / Blind, Web Dev