Tag Info

Hot answers tagged

34

Darker color scheme are often used effectively in software that focuses heavily on visual content. For example Adobe Lightroom, Adobe After Effects, Microsoft Expression Blend, and Kaxaml are are interfaces that have a dark color theme. This allows the interface to fade into the background and let the content come alive Why is it not widely used? I guess it ...


24

Dark on light vs light on dark themes can have multiple affects, such as: Bringing attention to an application vs bringing attention to the application's contents People focus on brighter areas - darker background brings attention to the content, while lighter background bring attention to the window itself vs the desktop. Imagine if the box around ...


14

why this color scheme is not widely used? Good question without an obvious answer. You could claim all sorts of trends are involved, but I think it would be a brave move to accept any one reason for why we tend to go with dark on light. I think your best bet is to develop the scheme that best suits your site's purpose and its users. For a quick ...


13

At minimum you should choose colour combinations that pass the WCAG 2.0's requirements for colour contrast (Criteria 1.4.3 - and Id recommend at the AA level). The example colours you have shown above won't pass by a long measure. It doesn't mean all your colours have to be solid dark tones, but your text should be a somewhat darker than #e7e7e7 and ...


11

If you make your background colors light enough then the text can all be black... Also, I made the numbering a darker version of the background color. The light gray numbering doesn't really work contrast-wise on anything but white. But dark red looks good on light red, for example.


11

There is of course an awful lot of research on color and color perception. Most relevant to your purpose is perhaps the work Cynthia Brewer did on ColorBrewer. You can find the resulting tool at http://colorbrewer2.org/ It was originally designed to help choose color for maps but it can also be used for statistical graphs (it's built in Hadley Wickham's ...


10

For text legibility, gray-scale contrast is more important than color contrast. Use either white or black text to achieve maximum gray-scale contrast for whatever the background color happens to be. Using black or white text will also avoid confusion on whether the foreground or the background color is the color code the user should be attending to. To ...


9

Please consider what you may be doing to visually impaired users when you design a subtle UI, so that you can do it well. I was on a customer site doing ethnographic reserch when the company happened to be implementing a new software product. The produc was all soft greys with a few accent colours. It looked very nice. During the course of the day, I had a ...


8

If you convert the color to another colorspace, e.g. YIQ, YUV or better yet CIE-L*ab, CIE-L*CH, then instead of RGB's Red Green and Blue channels you end up with three different channels, where one is the intensity. In YIQ, YUV the Y channel approximates the intensity and in Lab and LCH the L channel does this. You can then easily reduce the intensity ...


8

CheckMyColours.com uses the Web Content Accessibility Guidelines (WCAG 2.0) contrast tests. The validity of the tests is something to bring up with WCAG rather than checkmycolours.com. I am unaware of the WCAG providing the research supporting their contrast ratio standards. However, my experience with those standards is that they are fairly lax. I've ...


7

The W3C has explicit guidelines for web content accessability, including contrast. You can compare color values to their ratio and tell the user if their color choices are likely inaccessible/unreadable. The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 Note there are exceptions and some good guidance in the full ...


7

Folllow the W3C standards See the earlier answer I gave discussing this There are a variety of tools available that can help you test the colour combinations you are using. You could use white (or the predominant background colour of your interface) as the background, and then choose (foreground) colours to represent shading, then choose text colours that ...


7

The main reason a light-on-dark user interface can break down is when the text becomes glaringly bright compared to the dark background. This is one fundamental reason white text on a black background can be hard to read for long periods of time. Applications like Adobe Lightroom use a light gray on dark gray colour scheme and this seems to greatly reduce ...


6

In the 74 times cited study Readability Of Websites With Various Foreground/Background Color Combinations, Font Types And Word Styles there is limited to no evidence that black text on White background is have higher redability than white text on black background: On can see that Times New Roman is equal, Courier New slightly faster and Arial slightly ...


6

Matching Brightness of Two Different Colors You can calculate the perceived gray-scale brightness of a color on a “typical” monitor with the following formula: Y = 0.2126 * (R/255)^2.2 + 0.7151 * (G/255)^2.2 + 0.0721 * (B/255)^2.2 So, for example, high saturation pure green (0, 255, 0) has a brightness of: Y = 0.2126 * (0/255)^2.2 + 0.7151 * ...


5

Maureen Stone of StoneSoup Consulting has created an "optimal color palette" for charts. It has 8 different colors, and they've been tuned for contrast, differentiation, perceptibility, and color blindness. She provides them in two different sets: one for large blocks of color (like area and bar charts) and one for small points or lines of color (scatter or ...


5

The rationale on high contrast is just that - high contrast. People with weak eyesight can more easily distinguish between elements and read the text if there is a well-designed black and white theme. Usually this also comes with the option to enlarge text and elements. Sites with low contrast can be difficult to read for people with low vision. Some ...


5

Encouraged to post this as an answer instead of a comment, I'd suggest looking at: https://github.com/SlexAxton/css-colorguard It is a tool that uses the CIEDE200 algorithm to detect color collisions and seems to incorporate a number of variables and not just contrast to detect collisions. They most likely did not design this algorithm to take care of the ...


4

I wouldn't discount the possibility that both Windows and MacOS default to a "light" scheme and people tend to want their applications to all be consistent. I use a dark theme on Windows and too often run into applications that can't handle it (they hard-wire colors or, worse, hard-wire some of them), so if this were just a casual preference and not a real ...


4

With HSB, you generally reduce B to get a darker version of a given color, and possibly increase S as you go if the color looks too dull. This works for most colors except yellow (it ends up as an ugly muddy color), but only because there's no such thing as "dark yellow." I don't know why you'd get silverish unless your starting color is white, but it's ...


4

Make the colours paler, keep the text black and don't have a dividing line between the two colours. + Make the table size bigger on Chrome - the text is TINY!


4

The simple solution is to simply look at the numerical value of the colour and decide on some threshold above which it will be black and below which it will be white. For example (with all number given in hexadecimal): If the button colour is #4E5523, add each colour component to get an overall value. In this case it would be #4E + #55 + #23 = #C6. If ...


4

Yes, bright ambient light reduces contrast, so going with a black and white display will be the best you can do. Increasing font size and weight may also help. Hue differences also tend to wash out in bright light so your color codes are probably performing poorly anyway. Tinted sunglasses probably don’t help either. If the color codes are very important, ...


4

Short answer: Yes Long answer... There are many different kinds of visual disability. Some, for example cataracts and diabetic retinopathy, are greatly aided by increasing contrast. It doesn't help you because - well - you presumably have good vision. Imagine that you're staring at the screen through translucent plastic. Increasing contrast makes the edge ...


4

Yes, the high contrast works very well, the problem is that many interfaces are poorly designed and the high contrast is just too little help to overcome the design flaws and sometimes works against the user. A typical problem is the font used for menus and texts, is very common that the font used is not really good for screen and that it was designed for ...


3

If said tablet is an iPad, there is an accessibility setting that toggles the display into a high contrast mode. It's not black and white, but it might let you test out a high contrast solution without having to make any changes right away. If you do decide to go with a high contrast solution, looking for screenshots of older monochrome applications can ...


3

According to the Web Style Guide, black on white is best: http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html Black text on a white background has the highest level of contrast.


3

Take a look at this from W3 Than I use always this simple tool to find quickly a good combination between foreground and background color. Hope it help.


3

The definition is very clear: Level AA: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided. Level AAA: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is ...


3

To answer your comment above. The background and foreground colours pass or fail on a specific algorithm, which is different for AA and AAA. An overview is given below: AA = Contrast ratio of at least 4.5:1 between background and foreground. 3:1 for large text (over 18 point or 14 point bold) AAA = Contrast ratio of at least 7:1 between background and ...



Only top voted, non community-wiki answers of a minimum length are eligible