setting background color using javascript works in every browser but Chrome

Question

I use the following function to allow a website user to click on a gray oval and see an indigo oval with a white check mark when they 'select' it, and back to a gray oval when they 'deselect' it.
It works exactly the way I want it to on every browser except Chrome 42.0.2311.90. On Chrome it works fine when 'selecting' it, but the background color doesn't change from indigo to dark gray when clicking it a second time to 'deselect' it.

<script type=\"text/javascript\">

function clickeditem(checkaccount) {
    if (document.getElementById(checkaccount).style.backgroundColor==\"indigo\"){
        document.getElementById(checkaccount).style.backgroundColor=\"darkgray\";
    } else {
        document.getElementById(checkaccount).style.backgroundColor=\"indigo\";
    }
    if (document.getElementById(checkaccount).style.color==\"white\"){
        document.getElementById(checkaccount).style.color=\"darkgray\";
    } else {
        document.getElementById(checkaccount).style.color=\"white\";
    }
}

</script>

Answer 1

Chrome 42.0.2311.90 seems to mess with the casing of named colors since adding a .toLowerCase() solves the problem for the asker.
The asker commented that my fiddle works for him: http://jsfiddle.net/99550tLc/

Here is a stack-snippet of that (which also simplifies the code and makes it a lot easier on the DOM):

function clickeditem(checkaccount){
    checkaccount=document.getElementById(checkaccount);
    if(checkaccount.style.color.toLowerCase() === 'white'){
       checkaccount.style.color = checkaccount.style.backgroundColor = 'darkgray';
    } else {
       checkaccount.style.backgroundColor = 'indigo';
       checkaccount.style.color = 'white';
    }
}

#tst{
    display: inline;
    width: 1em;
    border-radius:0.4em;
    background-color: darkgray;
    color: darkgray;
}

Select click to select option: 
<div id="tst" onclick="clickeditem('tst');">&#x2714;</div>