HTTP request linear progress indicator color



  • 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 https://material.io/components/progress-indicators#linear-progress-indicators

    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



  • 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




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2