Red on White: Contrast Check

Using red on white

A red warning label on white needs enough contrast at the size people will read it. Use a clear message or icon alongside the color to explain the warning.

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

Try the reverse pair

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