HEX vs RGBA Color Defintion

How does definition affect contrast ratio?

by marniea

HTML

<div class="flex-grid white-bg">
  <div class="col">
    <div class="heading">
    Example 1
    </div>
    <div class="color-hex">
      Hello, World with Opaque
    </div>
    <div class="color-rgba">
      Hello, World with 54% Transparent
    </div>
  </div>
  <div class="col big-box-hex">
    Opaque
  </div>
  <div class="col big-box-rgba">
    54% Transparent
  </div>
</div>

<div class="flex-grid grey-bg">
  <div class="col">
    <div class="heading">
      Example 2
    </div>
    <div class="color-hex">
      Hello, World with Opaque
    </div>
    <div class="color-rgba">
      Hello, World with 54% Transparent
    </div>
  </div>
  <div class="col big-box-hex">
    Opaque
  </div>
  <div class="col big-box-rgba">
    54% Transparent
  </div>
</div>

<div class="flex-grid black-bg">
  <div class="col">
    <div class="heading-grey">
      Example 3
    </div>
    <div class="color-hex">
      Hello, World with Opaque
    </div>
    <div class="color-rgba">
      Hello, World with 54% Transparent
    </div>
  </div>
  <div class="col big-box-hex">
    Opaque
  </div>
  <div class="col big-box-rgba">
    54% Transparent
  </div>
</div>

CSS

.flex-grid {
  display: flex;
  padding: 20px;
}

.white-bg {
  background-color: white;
}

.grey-bg {
  background-color: grey;
}

.black-bg {
  background-color: black;
}

.col {
  flex: 1;
}

.heading {
  color: #000000;
  font-weight: bold;
}

.heading-grey {
  color: rgb(128, 128, 128);
  font-weight: bold;
}

.color-hex { color: rgb(128, 128, 128); }

.color-rgba { color: rgba(0, 0, 0, 0.54); }

.big-box-hex {
  width: 100px;
  height: 100px;
  background-color: rgb(128, 128, 128);
  color: white;

  /* border: 1px solid white; */
}

.big-box-rgba {
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.54);
  color: white;

  /* border: 1px solid white; */
}