Google Docs Readability – Change Background Color of Selected Text in Google Docs

cssgoogle-drive

How can I override or change the background color of text selected in Google Docs? It is difficult for me to see the difference and I would like to increase the contrast or difference.

After Google restyled Google Docs last year (or earlier this year), I've been unable to see selected text. It's possible this is a visual deficiency with my eyes. In Google Docs, under both Google Chrome (17.0.963.83 (Official Build 127885) m) and Firefox (11.0), when I select text inside a Google Doc, the selected text has a background of color #d6e0f5.

Compare this to the default browser background color of #2f65c0. (I determined the color of the selected text background by taking a screenshot and using the color picker tool in Photoshop). I've tested this using a brand new Firefox profile as well as google chrome profile.

Here's a section of a screenshot showing the selected text :

some words highlighted to see difference

I've tried using a userscript to override the CSS to go back to the default text selection color using the "Stylish" plugin with this css :

::selection {
 background:#2f65c0;
 color:#ffffff;
}

::-moz-selection {
 background:#2f65c0;
 color:#ffffff;
}

::-webkit-selection {
 background:#2f65c0;
 color:#ffffff;
}

This code works on other sites, but I'm unable to get it to work on Google Docs. (I tested on other sites but applying the userscript to a different domain and using bright yellow instead of the default dark blue #2f65c0.)

When you use Google Docs, do you have the same color background for selected text or something different? (To test this, browse to docs.google.com , create a document, type text into the document, select the text with the mouse by dragging over it, take a screenshot, load the screenshot up in an image editor and determine the background color of the selected text.)

This color differential (between light blue #d6e0f5 and white #fffff) may be easy to see for others and the problem lies with my eyes.

Best Answer

Instead of to ::selection, apply the new background color to the class .kix-selection-overlay, like such:

.kix-selection-overlay {
    background:#2f65c0;
    color:#ffffff;
}

PS: the background color is fairly subtle, but it wasn't difficult to see at all for me. You might want to adjust the color contrast of your screen to see if it helps.