Black on White: Contrast Check

Using black on white

A straightforward choice for body copy on a plain white page. Keep secondary text and tinted panels in the review when you build out the rest of the layout.

WCAG text contrast results

This pair passes AA for normal text. It also passes AAA 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. Match the result to the size and weight used in your design. If a small label fails, try a different color before making the label larger.

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

Try the reverse pair

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