Set font color based upon background color

Posted on 2012-08-30
Last Modified: 2012-08-30
I have a table that allows users to set the background of cell to a certain color of their choosing. The problem I have is if they choose a dark color then it is hard to see the text in the cell. Is there a function or css style that I can use to display the text dynamically based upon the background color?
Question by:dssisupport
    LVL 42

    Expert Comment

    by:Chris Stanyon
    Not with just CSS.

    How are you offering the user the option of changing the background? Can you not use the same process for setting the foreground colour?

    Author Comment

    Yes, I could do that. I have a color picker where they select the color and then their color choice is saved into a sql table so I would have to add a field for the font color. I was just thinking there might be a way to do it dynamically.
    LVL 42

    Assisted Solution

    by:Chris Stanyon
    You could kind of hack it to do it with CSS along with your database. Instead of storing a background colour in the database, store a class name, and then define your background colour and colour in the CSS. Apply the data-stored class to your elements and the CSS will apply

    .black { background-color:black; color:white; }
    .white { background-color:white; color:black; }

    Just an idea :)
    LVL 52

    Accepted Solution

    I think your easiest is going to be where you have pre set color schemes as already suggested.  If you want to get a bit geekier, then perhaps using Kuler and their api to create on the fly schemes.   And even geekier would be implementing a js like

    I would go for the easy route and make your own color schemes unless you just like good puzzles and have a few days to kill.

    Author Closing Comment

    Thanks for the suggestions.

    Featured Post

    Maximize Your Threat Intelligence Reporting

    Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

    Join & Write a Comment

    This demonstration started out as a follow up to some recently posted questions on the subject of logging in: and…
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now