<div class="example bg-1">
  <h1>
    Gray on White
  </h1>
</div>
<div class="example bg-2">
  <h1>
    Gray on Lighter Gray
  </h1>
</div>
<div class="example bg-1 color-2">
  <h1>
    Opaque Black on White
  </h1>
</div>
<div class="example bg-2 color-2">
  <h1>
    Opaque Black on Light Gray
  </h1>
</div>

h1 {
  color: #888;
  font-size: 1.5em;
}

.color-2 h1 {
  color: rgba(0, 0, 0, 0.465);
}

/**
 * The styles below are unrelated to this demo and are just for scaffolding purposes.
 */

* {
  box-sizing: border-box;
  font-family: sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

html {
  height:100%;
  display: flex;
}

body {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
}

.example {
  display: flex;
  flex: 100% 0 0;
  padding: 1em;
  place-items: center;
  border: 3px #ccc solid;
}

@media(min-width:30em) {
  .example {
    flex: 50% 0 0;
  }
}

.example > * {
  flex-grow: 1;
  text-align: center;
}

.bg-2 {
  background: #ddd;
}