Questions tagged [contrast]

is the difference in luminance and/or color that makes an object (or its representation in an image or display) distinguishable.

Filter by
Sorted by
Tagged with
140
votes
14answers
65k views

What are the negative and positive aspects of dark color scheme?

I am using Light-on-dark color scheme (dark background with light text) in my application. My question is, what are the negative and positive aspects of this color scheme and why this color scheme ...
43
votes
3answers
22k views

Do disabled buttons still need to be contrast compliant for accessibility?

Very related to this question: Accessible Disabled State but that is about how to style disabled buttons to make them accessibility compliant, but my question is slightly different. Is it actually an ...
31
votes
3answers
19k views

How many visually distinct colors can accurately be associated with a separated legend in a figure?

For charts and graphs it's a relatively common question by programmers to want to procedurally generate an arbitrary number of colors that are visually distinct. Various research (or educated guesses)...
27
votes
14answers
50k views

Is high contrast mode really useful?

In most operating systems and on some websites there is a high contrast mode, intended for use by visually impaired people. I have doubts, however, whether using such mode makes any sense - from what ...
26
votes
2answers
13k views

Formula for color contrast between text and background

In my Android app a user can choose the color of an item. This color is then shown in background with a text on it. I want to display the text either in black or white - depending on the background ...
24
votes
2answers
3k views

Do Samsung's Marshmallow skin Quick toggles have enough contrast?

I recently updated to Marshmallow, and I'm not happy with the blue over white scheme in daylight conditions. My question is if it's just me, or if this is documented and studied somewhere? If so, how ...
24
votes
3answers
4k views

Should I switch to a dark theme UI if the app is used at night?

Should I dynamically change the theming of my application based on ambient lighting? My app will be used in bright daylight, as well as in a dark movie theatre, or may be opened at night. I ...
24
votes
4answers
6k views

How does use in bright sunlight affect how a web site should be designed?

We're building a mobile web site that will mainly be used outdoors in bright sunlight. What design factors should I consider?
19
votes
4answers
2k views

Dark screens in cars

I am a designer just preparing an app for the "in car" area. Normally we have a bunch of colors to use and we usually use dark colors on a light background. Now our client came up with some question ...
14
votes
4answers
7k views

Choosing high contrast text color (in relation to background color) dynamically

My application has an area with some number of controls. Each control's background color expresses a state of some sort. The controls are also numbered via some text in their foreground. For ...
12
votes
3answers
1k views

Choosing colors for a subtle UI

I'm currently agonizing over how light I can make various colors in my UI before I adversely affect usability. The reason for the agonizing is that different monitors have different responses. Those ...
11
votes
4answers
5k views

What should a well-designed high contrast function do?

I want to make my website accessible for nearly everyone. I already have a function to increase font-size. Now I am doing the high contrast function. However, how should such an interface for ...
11
votes
3answers
218 views

What screen contrast should a design be optimised for?

I'm in the process of working with our designers to come up with a graphical treatment for a comparison results table. We will produce a design, and then receive feedback from the business that they ...
10
votes
3answers
1k views

Maximum contrast ratio for good accessibility

So we are remaking an enterprise app from scratch. This time we want to base our design decisions on proper research. Our users use the app 24/7 with high requirements for UX. So our main goal is to ...
10
votes
2answers
452 views

Mostly white screen (8 hours per day)

I am using an application which has a white background color. I am using this application 8 hours per day. I think a GUI with less contrast would be better for my eyes. I guess this would save some ...
10
votes
2answers
2k views

Material Design - text colors don't maximize contrast

Description The color palette for Material Design specifies hues as well as suitable colored (white/black) text to be used for each backing-hue. So for example in the Red palette there are 10 '...
9
votes
5answers
852 views

automatically calculate contrast

A user can change the default design of his site by selecting a color. This color is applied to the menu background color. The problem is that I have to change the menu text color depending on the ...
9
votes
3answers
1k views

Is there any way to simulate an off-angle LCD monitor for testing?

I notice that some LCD monitors, especially on laptop computers, have extraordinarily low contrast between light blue and white when viewed from "above" the screen. Even on my home desktop computer I ...
8
votes
5answers
2k views

link color contrast with non-link text

I have read a lot about color contrast with regard to the text and background color (snook's tool), however is there a similar tool for validating the contrast of linked and non-linked text? There is ...
7
votes
2answers
11k views

What is the difference between WCAG 2 AAA Compliant and WCAG 2 AA Compliant

I use a web app to check my site color contrast. Most of my color (Back/fore ground colors) are OK and I see YES inside textboxes except the one which refers to WCAG 2 AAA. What is it? What is the ...
7
votes
2answers
4k views

Tablet interface design when used outdoors - handling bright light

I have a line-of-business tablet application that is used outdoors day and night in a vehicle. One of the users recently provided feedback that they find it difficult to read the screen when wearing ...
7
votes
2answers
1k views

How to interpret wcag2.0 guidelines on contrast for buttons and icons

The accessibility guidelines from the W3C offer neat and usable guidelines for creating text that is readable for everyone. There are a number of very useful tools for checking contrast levels, so it'...
6
votes
1answer
2k views

How much darker should yellow be get the same contrast as other colors?

By how much should the color yellow be darkened to get the same contrast values as other colors displayed on a computer screen? This is something that i would do by sight, but i was wondering if ...
6
votes
2answers
316 views

What is the validity of contrast and colours tests?

I just ran a contrast and colour test (using checkmycolours.com in this case) on our corporate site (www.dotblue.net; if you care) and it reports quite some failures. However, I explicitly optimized ...
6
votes
2answers
6k views

What is the best way to display disabled field and text for accessibility color contrast support

I am working on a project which needs to support color contrast accessibility. Currently on our system disabled data is presented as grayed-out, but now we need to support color contrast for ...
6
votes
2answers
204 views

Is it good practice to have a change contrast or higher contrast buttons for users?

Is it good practice to have a change contrast or higher contrast buttons for users? As depending on the vision problem users may need different contrast conditions for comfortable reading. Some sites ...
6
votes
2answers
1k views

Stressless user experience for data entry forms

We're currently discussing a redesign of the applications we develop for internal use. Now, to change things for the better, we'd like to make as many UX considerations as possible before we go ahead. ...
5
votes
4answers
210 views

Is there a standard color list to keep adding new colors to a plot while retaining old colors?

My users pick one or more data sets to graph on a single canvas. The sets are color coded to distinguish between sets (all screenshots are for demonstrative purposes from demo utility): BLUE=...
5
votes
1answer
998 views

Contrast ratio for button background color?

I am working with making a website WCAG II compliant. The designers are asking to use yellow buttons (specifically, #fcdb31) with blue text on top of them on white backgrounds. While the blue type on ...
5
votes
2answers
823 views

Standards for and measuring contrast of solid color fills

There are several questions on UX (e.g. here, here, here) already about contrast. However, all of those are about text, and the contrast between text and background, most off them referencing this W3 ...
4
votes
4answers
295 views

WCAG 2.0 color contrast - How strict do you need to follow?

I have some buttons with a purple background and I am trying to set the text color so it is in compliance of the WCAG 2.0 color contrast rules. My issue is that I just don't understand how based on ...
4
votes
4answers
2k views

Best Way to Darken a Color Until it is Readable?

What's the best way to darken a color until it is readable? I have a series of titles which have an associated color, but some of these colors are very light and any text drawn in them is unreadable. ...
4
votes
2answers
1k views

High contrast/visible colors for google maps

I am creating some custom markers for an application that uses google maps They stand for a tow truck and a broken car. An important constraint is that they must contrast with the map bellow, in ...
4
votes
3answers
116 views

Dynamic mobile styling based on the lighting of the users environment

Would it be useful to come up with a dynamic mobile styling feature based on the lighting of the users environment. Similar to how the imac reduces its brightness if you cover the cam on top of the ...
4
votes
1answer
94 views

How much does vision change as we age?

I'd like to share with my web design team some specific, quantitative data on just how much visual ability changes, even as young as 40 years old. This is to help drive home the need for adequate ...
3
votes
2answers
734 views

Studies about negative readability

I've been requested to design a dark interface which spreads a little light as possible. I'm interested in academic studies / researches about white text on black background. Is it really tough to ...
3
votes
2answers
59 views

What is the number 0.05 in the calculation of contrast ratio between colors?

To calculate contrast ratio the following formula is used (source): (L1 + 0.05) / (L2 + 0.05) where: L1 is the relative luminance of the lighter of the colors, and L2 is the relative luminance of ...
3
votes
1answer
145 views

UX principles for maximizing web page visibility at a distance?

This post is about maximizing visual clarity of a page, not SEO. Some info about my project: The page will be displayed on a 1080p 42" television. Users will be standing 3 - 6 feet from the TV. ...
3
votes
0answers
62 views

Statistics (or tools) on screen calibration & readability

Fairly straight forward question, but I could not find any answers to it. Are there any known statistics regarding screen calibration & readability? Are there any colors to avoid where screen ...
2
votes
3answers
4k views

Color Contrast Tools as part of Website [closed]

Recently, I went to a website that had some color contrast changing tools on it and tried to find them so I could add them to sites we have in development. Obviously, I failed because I am here now ...
2
votes
2answers
241 views

Text contrast for highly saturated call to action buttons

It's become a part of my way of working that I check areas of my design are adhering to accessibility guidelines, WCAG2.0 colour contrast in particular. At the moment I'm working on creating a new ...
2
votes
4answers
594 views

Looking for research regarding pure black vs dark gray for readability

I've heard people say that websites with pure black text on a white background can cause exhaustion when reading, and that it's better to use a very dark gray text or a light gray background color to ...
2
votes
2answers
1k views

Button passes contrast test however button's background and div's background are low contrast

I have been going back and forth with design about this. I think there should be a contrast with the button and the div that holds the button, however, design says there is no rule about that. I try ...
1
vote
4answers
331 views

Is this contrast readable?

On this oh-so-slowly-developing page, there is the column headed "Bid x Ask", which reflects the numbers of bids and offers on the stock option in the row: Are the numbers here readable? How can I ...
1
vote
2answers
82 views

Contrast of a message box

I'm in the middle of updating the colours of our app and making them as consistent as possible, but also trying to bring them in line with the WCAG AA rating for contrast. One area I'm unsure if I ...
1
vote
1answer
100 views

Color contrast too low, but element good visible

I am checking a software against the software ergonomic requirements of WCAG 2.1 Level AA. On part is the colour contrast, which must be for graphics 3.0:1. In the following graphic the orange part is ...
1
vote
2answers
186 views

Is there a standard for indicating a high contrast style? [closed]

I am working on a web app and have developed both a normal stylesheet and a secondary high contrast stylesheet. I am coming unstuck when it comes to allowing a user to switch between styles. Is ...
1
vote
2answers
145 views

Is there any science way to find out the suitable contrast for text and background colour?

Here is the four text with different level of grey: As you can see, the first line is very difficult to read, and the last one is the best to read. So, is there any science number behind this ...
1
vote
1answer
101 views

Practical 'lightest' shade of grey for contrast with white

I often use a light shade of grey such as rgb(242,242,242) in my designs to provide a subtle contrast to white, e.g. for the background of alternating rows in a table. I can easily distinguish ...
1
vote
1answer
83 views

What is the procedure for measuring color contrast around anti-aliasing?

What is the proper method for measuring the color contrast of on-screen elements that are anti-aliased (particularly, but not limited to, text)? Does a standard method even exist? Here's my specific ...