Try it Yourself: Colors Theory

Colors Theory

<!DOCTYPE html>
<html>
<head>
<style>
/* Passes WCAG AA for normal text: roughly a 17:1 ratio */
p {
  color: #1a1a1a;
  background-color: #ffffff;
}

/* Fails WCAG AA for normal text: roughly a 2.8:1 ratio */
.low-contrast-warning {
  color: #999999;
  background-color: #ffffff;
}
</style>
</head>
<body>

<p>This text passes WCAG AA contrast.</p>
<p class="low-contrast-warning">This text fails WCAG AA contrast.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
/* Passes WCAG AA for normal text: roughly a 17:1 ratio */
p {
  color: #1a1a1a;
  background-color: #ffffff;
}

/* Fails WCAG AA for normal text: roughly a 2.8:1 ratio */
.low-contrast-warning {
  color: #999999;
  background-color: #ffffff;
}
</style>
</head>
<body>

<p>This text passes WCAG AA contrast.</p>
<p class="low-contrast-warning">This text fails WCAG AA contrast.</p>

</body>
</html>