Enhancing Chess.com Board Color Intensity for Easier Piece Movement

On Chess.com, when moving pieces, hints show where pieces can move - the possible squares - with light black circles on the background color.

For example, as shown in the image below:

At this time, if you look closely at the left side of the image, you can see that the coloring is very faint.

However, this coloring is really hard to see if you’re colorblind or if the room is bright.

So I wrote a program that allows you to change the color intensity.

Can you see on the right side of the image that the color is slightly darker? This is what it looks like when you run the program. The color setting ranges from 0 to 1 (maximum), with the default on the left being 0.1, and the darker right side being 0.3. So if this is still not enough, you can simply increase this value to change it to a more appropriate visibility.

Here’s the program: {/* ```js // ==UserScript== // @name Chess.com hint opacity

// @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://www.chess.com/daily-chess-puzzle/* // @match https://www.chess.com/daily-chess-puzzle // @match https://www.chess.com/*

// @require https://unpkg.com/[email protected]/dist/url-parse.js

// @run-at document-idle // @noframes // ==/UserScript==

(async () => { [hide] const sleep = m => new Promise(r => setTimeout(r, m)); await sleep(200); while (true) { await sleep(50); // mseconds document.querySelectorAll(‘div[data-test-element=“hint”]‘).forEach(a => {a.style.backgroundColor = ‘rgba(0,0,0,.3)’}) } [/hide] })();

```js
// ==UserScript==
// @name         Chess.com hint opacity

// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.chess.com/daily-chess-puzzle/*
// @match        https://www.chess.com/daily-chess-puzzle
// @match        https://www.chess.com/*

// @require      https://unpkg.com/[email protected]/dist/url-parse.js

// @run-at       document-idle
// @noframes
// ==/UserScript==

(async () => {
    const sleep = m => new Promise(r => setTimeout(r, m));
    await sleep(200);
    while (true) {
        await sleep(50); // mseconds
        document.querySelectorAll('div[data-test-element="hint"]').forEach(a => {a.style.backgroundColor = 'rgba(0,0,0,.3)'})
    }
})();

This program runs in JavaScript.

Here are the installation methods for Google Chrome and Firefox browsers:

1. For Chrome browser, Brave browser, and Kiwi browser, install the [Tampermonkey • Chrome](https://www.tampermonkey.net/) extension. For Firefox browser, install the [Greasemonkey](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/) add-on
2. Click the extension, "Create a new script" > Copy and paste the above program and save

If you want to make the intensity greater than 0.3, change the .3 part in rgba(0,0,0,.3) in the above code to .9 or whatever value you like, then refresh/reload the page and you’re done.