Programmatically choose high-contrast colors

color picker
visual studio code syntax highlighting colors
system.color c#
c color from rgb
c# color example
visual studio code background color
vscode terminal color theme
color contrast comparison

This should be a simple question, but I haven't been able to find a way to make it work.

Essentially, I have a silly localhost page that I use in my webdevelopment. When I am surfing between our development server and my local version of the C# code (redirected from the dev url via host file) I have been known to sometimes forget what 'dev.foo.com' points at - local or server.

So I created a page which will run locally as my default web page's default page, so I can easily identify my localhost from the server.

This page does a lot of things randomly (including generating a character's starting stats for D&D), including setting a random background color. I do this by generating 3 random numbers between 0 and 255, and setting them as the RGB value for the body background color in CSS.

Given the 3 ints R, G, and B, how do I determine R2, G2, and B2 such that the second color will have high contrast with the first? I like having the page have random background colors (it keeps me from getting used to the look of the landing page) but I also like to be able to read the text.

Theme Color, Theme Color reference that lists all themable colors in Visual Studio Code. Guide · Programmatic Language Features · Language Server Extension Guide · Embedded Languages The contrast colors are typically only set for high contrast themes. Selection colors are visible when selecting one or more characters. Some of the most popular high contrast color combinations and color schemes I see within video magnifiers and high contrast displays include: White text on black background. Black text on yellow background. Yellow text on black background. Green text on black background. Yellow text on blue background.

"Contrast" is a loaded word. If you just care about being able to read the text, then one easy way is to work in a luminance-based color space like HSL, and pick foreground and background colors with big differences in luminance.

The conversion between HSL and RGB is well-known--see Wikipedia for the details.

If you're talking about actual color contrast, it's not nearly as cut-and-dried (there are a lot of perceptual factors that, as far as I know, haven't been reduced to a single colors space), but I suspect you don't need that level of sophistication.

Color contrast - Android Accessibility Help, The colors you choose for your app interface affect how easily users can read and to define foreground and background colors with a high contrast ratio. High contrast colors On the Settings > Ease of access > High contrast page, there are 4 high contrast themes by default. After the user selects an option, the page shows a preview. Every color swatch on the preview can be clicked to change its value.

Check out this PHP solution: Calculating Color Contrast with PHP by Andreas Gohr. It can be ported to any language of course.

He also has a very nice demonstration of his contrast analyzer where you can find some minimal contrast levels to work with.

Color.FromRgb(Byte, Byte, Byte) Method (System.Windows.Media , Creates a new structure by using the specified sRGB color channel values. C# Copy. public static System.Windows.Media.Color FromRgb (byte r, byte g, byte  Programmatically choose high-contrast colors . This should be a simple question, but I haven't been able to find a way to make it work. Essentially, I have a silly localhost page that I use in my webdevelopment. When I am surfing between our dev…

You can use method GetBrightness() on Color class. It returns a float value from 0.0 (brightness of black) to 1.0 (white). A simple solution would be:

var color1 = new Color.FromArgb(r1, g1, b1);
var brightness = color1.GetBrightness();

var color2 = brightness > 0.5 ? Color.Black : Color.White;

Understanding Success Criterion 1.4.3, Color deficiencies can affect luminance contrast somewhat. using text wherever possible, and when not, consider supplying an image of higher resolution. The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the sequence of characters that can be programmatically determined, where the  Select the Start button, and then select Settings > Ease of Access > High contrast. To turn on high contrast mode, select the toggle button under Turn on high contrast . Windows may display a “Please wait” screen for a few seconds after which the colors on the screen change.

These answers are more or less suggesting to use one of the two or three color choices based on whether the color is bright or dark.

I use a bit different approach and it worked elegantly in my case. Here is the implementation.

 int color = your_color;
 contrastColor = Color.rgb(255-(color >> 16)&0xFF, 255-(color >> 8)&0xFF, 255- color&0xFF);

It's simple and wonderful.

G17: Ensuring that a contrast ratio of at least 7:1 exists between text , This technique goes beyond the 4.5:1 contrast technique to provide a higher level of If the background is a solid color (or all black or all white) then the contrast the letters can be chosen or shaded so that the letters maintain a 7:1 contrast  The color wheel presents the primary colors: blue, red and yellow; the secondary colors: green, orange and violet; and the tertiary colors that exist between them in an arrangement that highlights their relationships with one another. Choose colors opposite one another, such as yellow and violet to create dramatic contrast. Colors immediately adjacent to one another, on the other hand, result in a softer, more understated feel.

Selecting Colors with the Palette API, The palette library is a support library that extracts prominent colors from images to install or update the Android Support Library to version 24.0.0 or higher and Use palettes to design your app's style and to dynamically change your app's  Unfortunately, since we have limited us to less colors now, the difference between the randomly generated colors is even less than in the first approach. Golden Ratio Using just rand() to choose different values for hue does not lead to a good use of the whole color spectrum, it simply is too random.

Where can I find a large palette / set of contrasting colors for coloring , Robert C. Carter, Ellen C. Carter (1982): High-contrast sets of colors. Zeileis, Hornik and Murrell (2009): Escaping RGBland: Selecting Colors for If you're setting these up to be generated programatically, just take  • Complementary: opposites on the color wheel, such as red/green or blue/orange; complementary colors are high-contrast and high­-intensity. This badge uses a simple, complementary color scheme that’s both visually striking and practical, in that it separates and organizes various parts of the design into sections.

Colors, Gradients, Patterns – amCharts 4 Documentation, You can choose the colors for yourself, or you get one from a new Color object that is guaranteed to contrast and be  The -ms-high-contrast CSS media feature is a Microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation. High Contrast Mode is a specialized display mode that prioritizes making content as legible as possible by dynamically replacing foreground and background colors with a

Comments
  • This is a fairly simple solution, and one that (now) is working fairly well. I'm going to try this for a while, as it IS always readable, if a bit plain.
  • there is a class that deals with HSL conversions that can be found here richnewman.wordpress.com/2007/05/07/…
  • Actually, only 3rd function deals with color contrast, 1st and 2nd are computing some random metric
  • Hi Mayank just sent an email regarding a potential consulting job if you're interested!
  • I think this is the same approach: Color.rgb(255 - Color.red(color), 255 - Color.green(color), 255 - Color.blue(color)
  • That doesn't work well for colors near the "middle" of the color histogram, like #808080.
  • That's true... but opposite color's have the added benefit of looking pleasing to the eye when put next to each other.
  • Tim, you can go ahead and phrase it a bit stronger - it doesn't work at all. :-)
  • You could add some "if" statement for those "middle" cases where it doesn't work correctly. You could also have something like "if(light) return Black; else return White;" but that'd obviously reduce the ammount of output colors.
  • Maybe I should have pointed out that this is an ASP site, but your comment was still helpful. My only problem with it would be those 'edge' cases in the center, and the question that ensues of 'how close to the center before switching to black & white?'
  • This isn't quite what StarBlue had said - he suggested averaging the R,G, and B values. You are setting minimum thresholds. Your code will use white even at #FF7FFF, #7FFFFF, and #FFFF7F
  • Maybe a short comment on your solution would help OP a bit more.
  • This is not working for mid range colors with values around 128, better do this