Questions tagged [contrast]

Questions about the variation of colour and shape in visual elements, text and illustrations, to define difference/sameness.

Filter by
Sorted by
Tagged with
94
votes
6answers
88k views

Where can I find a large palette / set of contrasting colors for coloring many datasets on a plot?

I need large set (20 and more) of contrasted and easily visually-distinguishable colors for coloring different datasets on a scientific plot (the set of colors should not include white or black, and ...
26
votes
2answers
7k views

Clearly distinguishable colours for scientific figures

I am looking for pointers on how to pick a set of colours (or a colour gradient) that are clearly distinguishable, for use in scientific figures. Was there any systematic research on this? If yes, I'...
11
votes
5answers
11k views

Light text on a dark background vs. dark text on a light background: which allows the reader to keep focusing for longer?

I did not want to get to the endless war of dark-on-light vs light-on-dark, but recently I discovered something interesting: while light-on-dark text is still less tiring for my eyes (and I also ...
10
votes
1answer
2k views

What should a designer consider when laying out print materials for elderly audiences?

I'm in the process of doing layout for a trifold aimed at the elderly population in my town, and I'm looking for some recommendations from folks who have experience laying similar materials out for a ...
9
votes
3answers
4k views

How to find four equally contrasting colours that are appealing to the eye?

I have a plot for a scientific argument I'm trying to make. There are four colours that should be (roughly) equally contrasting with two others. ie, if the colours are A-D, then A and B should be ...
8
votes
3answers
5k views

How to calculate the best type colour for a random background colour?

I might need to present content at multiple levels depending on the distance of the observer to a display. Let's say from far away the user perceives a flat colour, but from a close distance the user ...
7
votes
1answer
1k views

Contrast ratio between foreground and background

What is an acceptable contrast ratio between a foreground and its background?
7
votes
4answers
743 views

How do I find a range of colors (ex. different blues) that will contrast well with another range of colors (ex. reds, yellows etc)?

I've searched online; I've used numerous color web apps; I've even spoken with my graphic designer - but I still don't have a solution for this. What I want to do is come up with a color guide or ...
7
votes
1answer
321 views

Is there a metric for “apparent” chroma?

I'm not sure this is the right place to ask, but is anyone aware of a metric for apparent chroma? Now I understand that "chroma" and "chrominance" are very overloaded terms, so to clarify, I ...
6
votes
3answers
2k views

How can I increase the contrast in a color image converted to grayscale?

The original image is: And the black white version becomes: As you can see, the cyan colored cells disappear in the black & white version. How can I modify the original image so that the ...
6
votes
1answer
603 views

White and black design style

Recently I noticed a trend in graphic and industrial design that focuses on (usually predominant) white or very light gray and high contrast black or dark gray shapes — which fascinates me because of ...
5
votes
2answers
793 views

Quotable reference to support my assertion that black text on a grey background is not a “highlight”

I need some graphic design advice on finding a quotable piece of information regarding the use of "highlighting" text on signage, which I hope you can help me with. I'm in a dispute with my local ...
5
votes
1answer
6k views

How to select a font color to go on a very busy background? [duplicate]

I'm a developer and don't have much design experience. I'm creating a landing page for a project I'm working on. I want to use the below image as the background for my landing page. As you can see ...
5
votes
1answer
5k views

How do I make objects and text stand out over a busy photo background?

I frequently have to place objects and text on photo backgrounds and some backgrounds make it hard to see the objects. To get good contrast I will try to pick a background image that has large flat ...
5
votes
2answers
3k views

Best Grayscale method for checking contrast?

While designing art assets in Photoshop, I've always tried to use the Grayscale method for checking the contrast levels. Unfortunately, different articles/sources recommend different methods of ...
5
votes
3answers
493 views

Does using shades of off-grey for text improve legibility compared to pure grey?

Most sites use some shade of grey for the color of their text. I was reading an article which suggested using a grey (#373d3f) with the rgb values of (55, 61, 63). My question is whether doing ...
5
votes
1answer
4k views

How to determine exact contrast ratio

Because of the recent Web accessibility Law in my region, I need to ensure I'm designing with an appropriate contrast ratio. WCAG says the value of this ratio is 4.5:1 http://www.w3.org/TR/...
4
votes
2answers
236 views

Spending too much time on “design rules”

I'm a web developer however I've recently discovered my passion for design. I'm currently working on a landing page for a client of mine (model/actor). I have all the content on the page and created ...
4
votes
2answers
1k views

What is the best way to label an image?

I have an image which I would like to label certain areas with some sort of a text label. I'm trying to figure out what the best way is to make the text clear. The image is color, and objects may have ...
4
votes
2answers
211 views

How to create an 16× error/difference image using GIMP or Photoshop

I need to create a quality comparison between two rendering methods by showing the difference of the results akin to figure 6 in [Walter et al. 2005] (p. 5): (Image copyright by Walter et al. 2005). ...
4
votes
1answer
245 views

How to visually represent a color contrast issue to a person with normal color vision?

I have two colors — #FFFFFF and #009688. I want to simulate graphically how it will appear to a person with color blindness issues so that I can present it to a person with normal vision and explain ...
3
votes
3answers
477 views

How to make red icon on gray background less jarring?

My app has a button to record or play videos. When there are problems with this feature, we notify the user by overlaying an exclamation point. This "red !" UI works OK elsewhere in the app but on ...
3
votes
2answers
4k views

Choosing a good highlight color for dark background

I'm working on a dark design which is composed on a list with alternated row colors ( #252425 and #121314 ) and I use different colors for the text on it ( #85bb23, #6F6A6F, #FFFFFF, #C50005, #2AAADB )...
3
votes
1answer
2k views

Dark images print with low contrast

I am a web developer and want to make a physical portfolio. I have tried various settings in photoshop and for my printer (HP officejet pro 8600) and my lighter theme web sites come out fine but my ...
3
votes
2answers
256 views

What's the best software/service for classifying fonts by height, ascender/descender, aperture, etc?

Is there any font classification service (web page, app, book) that classifies fonts by x-height, ascender and descender lengths, stroke contrast, apertures and counters, besides the basic serif and ...
3
votes
2answers
393 views

How can I make this sidebar menu clearer?

I have created a sidebar for a client as requested: The top bar - where on other pages menu items are shown - is left empty as requested and instead 3 menu items are show in the sidebar. These lead ...
3
votes
1answer
337 views

Why is the W3C contrast score recommending hard-to-read text?

Here are two buttons. When I measure them with the W3C contrast score, the black text has a much better score, meaning it should be easier to read. But, to my eyes, the button with white text is ...
3
votes
1answer
184 views

How to compensate for perceived color differences do to simultaneous contrast?

Is there a formulaic system to adjust the color of the text on the black background below to compensate for simultaneous contrast and make it be perceived as the same color a the text on the white ...
2
votes
5answers
4k views

What is the lightest shade of grey you can use for a background colour that is still discernible from plain white?

I am advocating for the use of a grey background instead of the traditional white background colour for a couple of reasons (mainly to do with reducing the glare from reading on certain devices and ...
2
votes
2answers
565 views

How would one create a high contrast, grainy look in Photoshop?

I was wondering if any kind souls out there might help me with recreating something similar to the effects on the images below: I've already noted the interlace-like overlay. But I wonder how one ...
2
votes
3answers
537 views

Critique: Can you provide constructive feedback for my monochrome website design?

I am a programmer, design is not my forte. I attempted to create a design and am stuck on where to continue to with colors, location of pieces, text choice etc. Here is the website so far: Design (...
2
votes
2answers
442 views

Which fonts profit from double line spacing?

When writing academic papers, whether the paper is to be read on screen or in print, a font size of 10 to 12 pt at double line spacing is a common request. When printed, white copy paper (A4 or US ...
2
votes
1answer
2k views

How to simulate low contrast LCD screens

School and cooperate environments usually uses very cheap LCD screens with abysmal contrast and color reproduction. I'm currently required to design for these types of screens, and often find that ...
2
votes
1answer
31 views

Selectively changing brightness and contrast in GIMP

Thank you very much for answering my previous question. That taught me a number of new techniques, and did a very good job of removing the orange stain and preserving the sepia tone. Now I have ...
2
votes
2answers
190 views

Having trouble with contrast ratios

I’ve been doing some work on trying to figure out some color themes for light and dark modes for a UI (aren't we all these days?). Basically, given a particular light theme how might we determine the “...
2
votes
1answer
106 views

How To Estimate Brightness-Contrast Value of Gray Figure?

Situation: I have gray figures, figure A and figure B, where figure B is wider than figure A; Figure B is very light although from the same situation but with little more perspective/view/data in it; ...
2
votes
3answers
22 views

How can i add contrasted lines from a layer to another?

Hi i have this layer : And this layer : And what i want to do is add those black lines to the red layer but i dont want the white parts , how can i do this ?
2
votes
2answers
2k views

Quickly correct mismatched tone or color between stitched and merged layers in PS?

Imagine you have a panorama photo, stitched together from multiple pics, and it's already been merged into one JPEG. Each pic had a slightly different brightness/color/tone. So you can see obvious ...
2
votes
1answer
170 views

How to calculate how much contrast you need in a header if the focus is on content?

I am redesigning a dental blog. So the focus is obviously content, they can read related news, download technical documents, watch videos, etc. So I wanted the design to be subtle. But the header I ...
2
votes
1answer
4k views

Select difference between layers in Photoshop CC [duplicate]

I am working with Photoshop CC 2017. I'm trying to create an Action Sequence picture. So the photos I'll use as example are of a biker performing a jump: But since one of the "bikers" is fully in ...
1
vote
2answers
151 views

Text colours on dark and light

I'm trying to create a set of 6 text colours that are to be used on both white and dark purple (42185D) backgrounds (on a web page), and still meet accessibility standards (AA). Are there any tools or ...
1
vote
3answers
7k views

Any problems with light text on dark background?

My high school journalism teacher always said putting light text on a dark background is hard on readers' eyes and is a bad thing to do. But in my experience making spreads, there are many instances ...
1
vote
2answers
773 views

Color combination suggestions for medium contrast background

I am developing UI for iPhone App, and in the navigation bar I used this grey color. My requriment is to use font colors which catch the eye. I tried blue but on iPhone the theme is transparent, so ...
1
vote
2answers
57 views

Name of the contrasting text effect

I'm looking for a name for the effect when there's a layer over another layer so that one of them always adjusts so that it has always the opposite shade of spectrum. So I want a title to look black ...
1
vote
2answers
442 views

How to change ( invert ) color on a high quality photo of a product?

There is a black leather with a yellow thread and my client wants me to change it to a medium gray leather with black thread ? I ve tried many ways but the naturals shadows on the leather where is it ...
1
vote
1answer
281 views

Styling/Layout advice on an Isotope/Masonry website

I am experimenting with a masonry layout web site bringing niche news and cultural information on East Asia to a Western audience. I have chosen a masonry layout for the homepage because the site will ...
1
vote
4answers
13k views

Where can I find examples of high contrast combinations for websites?

I like the idea behind http://contrastrebellion.com/, and plan to implement that on my websites. However, I'm a developer, not designer. I read a lot about the subject -where I must build the ...
1
vote
1answer
297 views

Inkscape for cartography : automatic fore color of texts for maximum contrast over background

I have again a series of cities names on a map. I have a solution to fill a background rectangle that can be semi transparent to make the text always visible, great. What I want to do now is ...
1
vote
1answer
925 views

Given a white background, and black or grey text, is there a formula to find a link color with good contrast?

The WCAG guidelines set the following requirements for text/link/background contrast: A 4.5:1 contrast between the non-link text color and the background. A 4.5:1 contrast between the link text color ...
1
vote
3answers
833 views

Is there a way of making text that is unreadable at high brightness but becomes readable as brightness is reduced?

I am looking for a way of displaying text that is unreadable at high brightness but becomes readable as brightness is reduced on a screen/monitor. Any clues? Thanks