Questions tagged [contrast]
is the difference in luminance and/or color that makes an object (or its representation in an image or display) distinguishable.
84
questions
146
votes
14
answers
70k
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 ...
- 1,593
48
votes
5
answers
39k
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 ...
JonW♦
- 37.2k
36
votes
3
answers
21k
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)...
- 916
30
votes
13
answers
63k
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 ...
- 479
30
votes
2
answers
20k
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 ...
- 459
26
votes
8
answers
7k
views
Color picker - what to do if the user selects the same color as the background?
I am working on a app that has an area dedicated to color choosing, like so:
Now, ordinarily, this works fine, but what if the user chooses the same color as the background color? It would look like ...
- 483
25
votes
4
answers
7k
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?
- 7,294
24
votes
2
answers
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 ...
- 1,759
24
votes
3
answers
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 ...
- 1,028
19
votes
4
answers
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 ...
- 191
17
votes
4
answers
3k
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 ...
- 2,278
16
votes
4
answers
8k
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 ...
- 321
13
votes
4
answers
3k
views
Change link color based in background color?
Our white-background webpages use the blue hyperlinks as shown in the image below.
Occasionally we have dash-bordered yellow information sections on a white webpage as shown. In that case someone said ...
- 263
12
votes
3
answers
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 ...
- 862
11
votes
4
answers
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 ...
- 441
11
votes
3
answers
445
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 ...
riapia
10
votes
5
answers
965
views
How to automatically calculate contrast
Scenario: a user can change the default design of a 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 ...
- 318
10
votes
2
answers
472
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 ...
- 403
10
votes
2
answers
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 '...
- 201
9
votes
3
answers
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 ...
- 1,119
8
votes
2
answers
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 ...
- 1,042
8
votes
2
answers
8k
views
What is the best way to display disabled field and text for accessibility color contrast support [duplicate]
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 ...
- 83
8
votes
5
answers
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 ...
- 12.2k
7
votes
2
answers
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,327
6
votes
1
answer
3k
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 ...
- 163
6
votes
2
answers
349
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 ...
user12741
6
votes
2
answers
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 ...
- 163
6
votes
2
answers
278
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 ...
- 61
6
votes
2
answers
840
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 ...
- 1,182
6
votes
2
answers
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
4
answers
243
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=...
- 294
5
votes
2
answers
2k
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
1
answer
208
views
Why do many prominent web apps use blue primary button with white text, when it fails the WCAG 2.1 contrast threshold
WCAG 2.1 says to have a minimum contrast ratio of 4.5:1, but blue primary buttons of Twitter, Figma and Outlook have white text which fails to cross the threshold ratio. Is there another scientific ...
- 81
4
votes
5
answers
610
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 ...
- 207
4
votes
4
answers
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. ...
- 143
4
votes
3
answers
502
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 ...
- 43
4
votes
2
answers
2k
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 ...
- 155
4
votes
3
answers
127
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 ...
- 10.6k
4
votes
1
answer
95
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 ...
- 113
4
votes
2
answers
146
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 ...
- 1,060
3
votes
2
answers
246
views
Are contrast checkers really accurate?
Is WCAG AA level truly necessary? I'm having difficulty making optimal contrast choices, and honestly, bold text, even at 16px, appears much more readable than regular text. Additionally, I often ...
- 95
3
votes
2
answers
853
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 ...
- 31
3
votes
4
answers
2k
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 ...
- 166
3
votes
1
answer
155
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.
...
- 45
2
votes
3
answers
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 ...
- 123
2
votes
2
answers
748
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 ...
- 123
2
votes
2
answers
472
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 ...
- 544
2
votes
1
answer
944
views
Using text-shadow for accessibility
I'm interested in understanding whether there has been any research or confirmed values for using the text-shadow property with the goal of meeting WCAG minimum colour contrast values.
In my ...
- 2,064
2
votes
2
answers
3k
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 ...
- 23
2
votes
1
answer
369
views
Image comparison sliders and visual accessibility
I am creating an image slider for a site, and I am confused on how to successfully meet wcag requirements. Below is an example that conveys the idea of what I am creating.
I have read a couple ...
- 133