Given a background color, black or white text?

white text on black background readability
astigmatism white text black background
best font color for black and white background
color picker
how to dynamically change text color based on a background color css
css white text on dark background
determine font color based on background color
best background color for black text

I'm trying to find a method for determining whether to use black or white text, given a background color (as a hex value). Has anyone dealt with this before? Is there an effective way to do this?

In my case, I would be using PHP to implement the logic (though any experience with this in other languages is welcome).

Take a look at this page: Calculating Color Contrast with PHP

Keep in mind that if black and white are your only choices you're bound to have cases where neither of them works particularly great.

Given a background color, black or white text?, Take a look at this page: Calculating Color Contrast with PHP. Keep in mind that if black and white are your only choices you're bound to have� The background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Use a background color and a text color that makes the text easy to read.

I think the best way is the Luminosity Contrast algorithm:

function getContrastColor($hexColor) 
{

        // hexColor RGB
        $R1 = hexdec(substr($hexColor, 1, 2));
        $G1 = hexdec(substr($hexColor, 3, 2));
        $B1 = hexdec(substr($hexColor, 5, 2));

        // Black RGB
        $blackColor = "#000000";
        $R2BlackColor = hexdec(substr($blackColor, 1, 2));
        $G2BlackColor = hexdec(substr($blackColor, 3, 2));
        $B2BlackColor = hexdec(substr($blackColor, 5, 2));

         // Calc contrast ratio
         $L1 = 0.2126 * pow($R1 / 255, 2.2) +
               0.7152 * pow($G1 / 255, 2.2) +
               0.0722 * pow($B1 / 255, 2.2);

        $L2 = 0.2126 * pow($R2BlackColor / 255, 2.2) +
              0.7152 * pow($G2BlackColor / 255, 2.2) +
              0.0722 * pow($B2BlackColor / 255, 2.2);

        $contrastRatio = 0;
        if ($L1 > $L2) {
            $contrastRatio = (int)(($L1 + 0.05) / ($L2 + 0.05));
        } else {
            $contrastRatio = (int)(($L2 + 0.05) / ($L1 + 0.05));
        }

        // If contrast is more than 5, return black color
        if ($contrastRatio > 5) {
            return '#000000';
        } else { 
            // if not, return white color.
            return '#FFFFFF';
        }
}

// Will return '#FFFFFF'
echo getContrastColor('#FF0000');

Some results:

NOTE: The font color is determined by the previous function. The number in brackets is the contrast ratio.


Another simpliest and less precise way called YIQ (because it converts the RGB color space into YIQ):

public function getContrastColor($hexcolor) 
{               
    $r = hexdec(substr($hexcolor, 1, 2));
    $g = hexdec(substr($hexcolor, 3, 2));
    $b = hexdec(substr($hexcolor, 5, 2));
    $yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
    return ($yiq >= 128) ? 'black' : 'white';
}                   

Background colour suitable for both black and white text, Foreground light blue, white, gray, yellow color texts are present. Colors that don't go with black color background are not visible. I'll withold judgement until I� a background color that goes with both black and white foreground text color. The right orange (and many other hues) can pull that off. See this paletton, and imagine it with a heavier font: The white and black text are acceptably readable (to me, at least).

  function getTextColour($hex){
    list($red, $green, $blue) = sscanf($hex, "#%02x%02x%02x");
    $luma = ($red + $green + $blue)/3;

    if ($luma < 128){
      $textcolour = "white";
    }else{
      $textcolour = "black";
    }
    return $textcolour;
  }

When to Use White Text on a Dark Background, This makes reading white paragraph text on dark backgrounds stressful The black text works better because black is also a color that doesn't reflect do it on the Sky 1 site and it feels like its vibrating, it gives me headache. 10% males are color blind and there are more man who code than women, so try to use font with sub-pixel rendering. Sans-serif family may the good one. Another good trick is try to adding more contrast. Eye can be exhausted, so try to use cooler color as background and sharp color for details such as text and button.

Here is an algorithm that can be used to calculate a luminosity contrast ratio of your text:

http://juicystudio.com/services/aertcolourcontrast.php

You could use this formula with white and black values to calculate which gives you the higher ratio, and thus more readable text.

Why You Should Never Use Pure Black for Text or Backgrounds, Pure black text on white backgrounds can cause eye strain when users read A balance of contrast between the text and the background color is an That is why I find the given examples of grey #444 (you call it dark grey,� Pure Black Text on White Backgrounds. Pure black text on white backgrounds can cause eye strain when users read the text over an extended period. White has 100% color brightness, and black has 0% color brightness. Such a disparity in color brightness creates intense light levels that overstimulate the eyes when reading text.

You should take a look at the CSS Color library. It's implemented in PHP and does all the hard work for you.

Orange You Accessible? A Mini Case Study on Color Ratio , two examples or orange background with black text and white text showing Table 1: Color Contrast Ratio of Our Orange with Black and White Text and given certain types of color blindness that the black text button wins. Step 2: The formula for contrast ratio given in the WCAG 2.0 definition can be rearranged if we know that the text will be black (luminance = 0) or white (luminance = 1). So, let the input color's lightness be L, then: If L ≥ 0.175, then black text is okay. If L ≤ 0.1833, then white text is okay.

Signs and color contrast, It is considered to be the color of perfection. White background surface gives the most workable combinations, but beware of that white can absorb its environment. Black lettering tends to be squeezed into the background making it hard to read. Lower contrast lettering gives better results like blue, orange and red. Background Colors The classes for background colors are: .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark and .bg-light . Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

Applying color to HTML elements using CSS, See Text drop shadows in Fundamental text and font styling to learn more. or orange ), shades of gray (from black to white , including colors like intensity possible for a given color, such as the most intense blue that can� We spent three hours trying different methods to determine whether or not the text in a HTML element should be black or white. Finally, we found a W3C compliant formula for weighting the lightness of a given color. Once we found that, the rest was fairly easy.

Best foreground color for a given background color — lobo_tuerto's , White or black? And this is usually for text. Reasons may vary, but it usually comes down to having some UI elements with background colors� Change the font color to either black or white depending on the background color Apply the same sort of logic to borders, using a darker variation of the base color of the background to improve button visibility, only if background is really light Automatically generate a secondary, 60° hue-rotated color Working with HSL colors and CSS variables

Comments
  • +1 Calculating the luminance or brightness of the color is far superior to averaging the RGB values. #FF0000 is bright red, not a dark color that the average of 85 would lead you to believe. In the HSB system (0-100% scale for B), you get B=100 for bright red. In the Lab system, you only get 54, probably more useful, since it's above the 50% point, indicating that you should use black against it, not white.
  • Here's a compressed version, if you can supply the R/G/B values (out of 255) : function textColor($r,$g,$b) { return ((0.2126*$r/255)+(0.7152*$g/255)+(0.0722*$b/255)>=0.5?'#000':'#FFF'); }
  • I've adapted the first function to Python if anyone is looking for it : gist.github.com/Benbb96/e7b1ce654f616da08e61fa888e666354
  • @Benbb96 Good job