Gray on White: Contrast Check

Using gray on white

Gray can look like a natural choice for a quiet caption, but this CSS value is too light for normal AA text on white. Darken the caption rather than relying on its muted appearance.

WCAG text contrast results

This pair passes AA for large text, but fails for normal text. The displayed ratio is rounded to two decimal places; every decision uses the full calculation.

Choose the result for your text size

A 16 px regular label uses the normal-text result. A 24 px regular heading qualifies as large text. Here that distinction changes the AA result: the heading passes, while the label fails. If a small label fails, try a different color before making the label larger.

.pair-example {
  color: #808080;
  background-color: #FFFFFF;
  font-size: 16px;
}

Try the reverse pair

Use Swap colors to put white text on gray. The ratio remains 3.95:1, but the page can feel very different when most of it becomes gray. Check the new arrangement with real text and the surrounding layout.