Meter gauge

How to use it

Use for a measurement inside a known range, such as storage used, a quota or a password-strength score -- not for the progress of a task, which belongs in the progress bar. Set min, max, low, high and optimum for your scale and keep the sentence in step with value; the zone wording ("Nearly full") should follow the same low/high thresholds. Change the ids if you show several.

Accessibility

A native <meter> labelled by a <label for>, with min, max, low, high and optimum set so the browser exposes it as a meter (or progress-like gauge) and colours the bar by zone. The value is also written out in a sentence -- "11.6 GB of 15 GB used (77%). Nearly full." -- linked to the meter with aria-describedby, so the state never depends on the bar's colour. Label #0f172a and sentence #334155 on white are 17.9:1 and 10.4:1.

Source (copy-ready)

Copy code

<div class="dcl-meter">
  <label class="dcl-meter__label" for="dcl-meter-storage">Storage used</label>
  <meter class="dcl-meter__bar" id="dcl-meter-storage" min="0" max="15" low="10" high="13.5" optimum="2" value="11.6" aria-describedby="dcl-meter-storage-text">11.6 GB of 15 GB</meter>
  <p class="dcl-meter__text" id="dcl-meter-storage-text"><strong>11.6 GB</strong> of 15 GB used (77%). Nearly full.</p>
</div>
<style>
.dcl-meter { max-width: 28rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-meter__label { display: block; margin-bottom: 0.375rem; font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-meter__bar { display: block; width: 100%; height: 1rem; }
.dcl-meter__text { margin: 0.375rem 0 0; font-size: 0.875rem; color: #334155; background-color: #ffffff; }
</style>