Steel Blue on White: Contrast Check

Using steel blue on white

Steel Blue can look convincing as a metadata color on white. Its normal-text result shows why small labels need a darker alternative.

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: #4682B4;
  background-color: #FFFFFF;
  font-size: 16px;
}

Try the reverse pair

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