Orange on White: Contrast Check

Using orange on white

Orange text on white has weak contrast. Reversing it into a white-on-orange button does not improve the ratio; try a darker label if you need to keep the orange fill.

WCAG text contrast results

This pair fails AA for both normal and large 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. This pair needs different colors for either AA category. If a small label fails, try a different color before making the label larger.

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

Try the reverse pair

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