0

I am showing a fixed horizontal progress line at the very top of may Web page that is as long as the viewport width. It is displayed when an HTTP request is pending.

It is similar to the Indeterminate linear progress indicator of the Material Design

My accent / theme color is blue. And the progress line is also blue as you see in the picture. A few buttons, and the header in one of the page, and the footer have also blue background.

enter image description here

What color should I use for the horizontal progress line?

Does it matter that it should not have the theme color as its background?

Update

This is a web page that displays articles (texts). All of the pages has white background and black foreground (text color).

I have only two buttons. One of them is blue and the other one is green. And a header in one of the pages, and the footer have also blue background.

These are the colors that I have used or may use.

enter image description here

2
  • The accent color is blue, what are the others? It is not possible to give an answer to a color scheme without knowing it and without knowing the percentage each color occupies in the total. A solution for an orange page with blue accents is very different than for a gray one with blue accents.
    – Danielillo
    Mar 19 at 16:06
  • @Danielillo I updated my question.
    – mahan
    Mar 21 at 6:38

1 Answer 1

0

Does it matter that it should not have the theme color as its background?

It all depends on the notoriety degree you want to give to the HTTP request: the higher the contrast, the more relevance, and vice versa.

Using the color scheme and distributions described in the question, with a simple graph you can visualize a basic contrast to help you decide which is the right combination: more subtle using colors with a higher percentage in the design and more prominent with less used colors.

graphic 01

In case of greater visual relevance, and leaving the basic color scheme, knowing the web uses pure inks with a preponderance of cool colors, it's clear that any opposite on the color wheel will provide the best contrast:

enter image description here

From here, there are different methods to achieve even greater relevance, always taking the most preponderant colors as a reference. A couple of examples:

Contrast Hue, Brightness, and Saturation

HSB

Texture contrast

Texture contrast

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.