Restrict Text Colors to Black

Question

I need a way in order to restrict users from using certain colors (for accessibility purposes). I have an array of colors:

var bannedColors = ['aqua', 'mediumseagreen', 'deepskyblue', 'mediumorchid', 'darkslategray', 'teal', 'mediumaquamarine', 'steelblue', 'indigo', 'slategrey', 'gold', 'darkorange', 'mediumvioletred', 'lightslategrey', 'orange', 'orangered', 'crimson', 'silver', 'black', 'yellowgreen', 'firebrick', 'mediumpurple', 'darkcyan', 'dodgerblue', 'greenyellow', 'brown', 'darkslateblue', 'lightseagreen', 'midnightblue'];

I tried doing something like:

if($.inArray($('.content').children().css('color'), bannedColors)) {
    $('.content').children().css('color', '');
}

But it doesn't seem to work. I want/need it to see the color of a div and all of it's children. For example:

<div class="content">
    <p style="color: aqua">Here is some text with color...</p>
    <div class="inner-content">
        <p style="color: mediumseagreen">Another set of text with another color...</p>
    </div>
</div>

The two colors, which are in my list of banned colors, should be stripped and replaced with black. Any suggestions would be greatly appreciated.

1. How do people *set* the colours? Restrict the choices there. 2. `css()` will return colours in RGB format, so comparing to a string name won't work (see http://jsfiddle.net/ytsj830p/) 3. This seems to be a massively flawed idea; what's to stop me setting a banned colour using Hex, or RGB, or RGBA? — Rory McCrossan, Oct 22 '18 at 15:26
`.children()` only looks at direct descendants. So it works fine for the `.content>*` items. However, your code won't work if you have multiple ` — freedomn-m, Oct 22 '18 at 15:26
People are using a text editor within a CMS to set colors. We don't have access to make changes to the editor, but we (administrators) are able to add some scripts to the header text. As for adding code in hex, rgb or rgba, most of the users are fairly web illiterate and don't know how to manually add color this way, so we really are not that worried about that. — ctelle1, Oct 22 '18 at 15:38
I think you'll be on a losing battle here - html colours aren't a predefined list, it will make up new colours based on the characters provided, have a read of this question: https://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color — freedomn-m, Oct 23 '18 at 08:04

Poul Bak · Accepted Answer · 2018-10-22T15:33:45.033

0

Your current code only Works on the first child of '.content', you can use the 'each' method to iterate over all children, like this:

$('.content').find('*').each( function ()
{
    if ($.inArray($(this).css('color'), bannedColors)) {
        $(this).css('color', '');
    }
}

That will got through all children and checking and setting their CSS color.

edited Oct 22 '18 at 15:33

answered Oct 22 '18 at 15:28

Poul Bak

10,450
5
32
57

2

Have another look - OPs code does work on all direct-children already with each, *but* OPs fix affects all of them (which yours does fix). But OPs issue (as I understand it) is that it's not hitting children-of-children (etc) – freedomn-m Oct 22 '18 at 15:30
Thanks, Fixed that. – Poul Bak Oct 22 '18 at 15:39
I did a combination of Poul Bak's code as well as what freedomn-m stated about how the colors in `css()` are RGB no matter what. So I converted all the colornames to RGB. Also in the if statement I made sure that it was true/flase by adding `>= 0` at the end... Thank you all for your help! – ctelle1 Oct 23 '18 at 15:42

Restrict Text Colors to Black

1 Answers1