Tag Info

Hot answers tagged

46

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 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 ...


32

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 ...


30

A good example to consider would be the ibooks app in iOS which allows users to enable the dark theme automatically depending on the light sensor detection. However as PS86 rightly pointed out, dont build this automatically into the system but enable the user to set as a desired parameter. To quote this article, the ibook app enables this by an option ...


22

No, it would seem not, as W3C states 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an ...


20

I would say it has to do with the following reasons : Contrast : Studies have shown that black or dark backgrounds provide the easiest contrast and can allow users to read discrete information quickly without having to make an effort to discern details when in a dark environment (which is often the environment in cars) Darkness adaptive : Another reason ...


16

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 ...


15

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 ...


12

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 ...


12

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 ...


11

Some of the most important things are going to be high contrast, large text and dark on light design. Some good examples of high contrast designs are here on Web Design Guru Blog. They have some nice color examples but remember to keep it minimalist. Keep your text large to keep it readable and force yourself to cut out as much text as possible. Keep the ...


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.


10

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 research when the company happened to be implementing a new software product. The product was all soft greys with a few accent colours. It looked very nice. During the course of the day, I had ...


8

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 ...


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

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 ...


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

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 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

This peculiar effect that appears with direct-sunlight is solarisation. It's also what happens to "old" plasma TVs if you see them from an angle. Solarized, a sixteen color palette, has been scientifically designed and tested "in a variety of lighting conditions" to achieve, among other properties, selective contrast: Solarized reduces brightness ...


7

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 ...


7

As others have mentioned, this is very much a safety issue and very much worth asking! Fortunately, user experience in vehicles has a long history of study and standardization. SAE International, formerly the Society of Automotive Engineers, has published a number of standards and papers related to this issue. Here are some that may be relevant: ...


6

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 ...


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 * ...


6

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 ...


6

Yes, it's a good idea to dynamically change the theming of the application based on lighting. Also remember to add: the ability for the user to turn off dynamically changing the theme based on lighting The ability to change theme regardless of the current lighting ambience Sometimes users prefer having dark theme during the day and vice versa


5

These are valid for any website, especially on mobile devices and even more so outdoors: high contrast dark text on light background sufficiently BIG font size for the actual content don't be afraid of negative space. give your content some room. prefer readability over pretty looks make it fast or at least not unnecessarily slow think about position of ...


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 ...


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

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!



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