JavaScript/Stroop effect

A stroop effect can be generated in JavaScript by appending random words with random colors, which are picked from an array. The length of the array is detected automatically. Some colors have to be omitted due to poor readability.

Before each word is inserted, the color and the word is compared to prevent the addition of the word with the same color. In case of a match, the word and color are shuffled again.

The function that generates the effect lets the user specify how many words should be added, and a button can regenerate the words.

Since it is not possible to generate a stroop effect on the client side without JavaScript, a message in the stroop container instructs the user to activate JavaScript. If necessary, a stroop effect can initially be generated on the server side using similar code as below.

Dark background
To make the words appear readable on dark backgrounds, alternative colors with a higher contrast need to be picked.