Button Text Contrast: Compare Light and Dark Labels

A prominent fill does not guarantee a readable button label. We will compare two Read the guide buttons with identical type, then find alternatives for the weaker pair.

Set up the two options

The examples use CSS navy, white and orange. Both labels are 16 px at weight 600, so they use the normal-text category. Extra button padding does not make the lettering large.

Compare AA and AAA results

Navy on white gives the label strong contrast. White on orange falls short even for large text. The table keeps all four results visible, though the normal-text results apply to this compact label.

Preview the real label size

.action-a {
  color: #000080;
  background: #FFFFFF;
  font: 600 16px/1.4 system-ui;
}
.action-b {
  color: #FFFFFF;
  background: #FFA500;
  font: 600 16px/1.4 system-ui;
}

Keep the same wording, padding and type in both previews. This lets you compare the label colors without changing the rest of the button. Check at the intended zoom and viewport as well as reading the ratio.

Try dark text on the orange fill

If orange must stay, try a dark label. Black on #FFA500 gives 10.63:1; navy on that fill gives 8.11:1. Both can be checked in the same workspace before you choose the final treatment.

Update the recorded pair whenever a value changes. For a compact label, try changing the color before increasing its size just to reach the large-text category.

Check the rest of the button

• Check whether the control can be recognized against the surrounding page.
• Review hover, selected, disabled and focus states using their actual colors.
• Verify a visible keyboard focus treatment and an appropriate accessible name.
• Check target size, keyboard operation and the outcome of activation.

A white button on a white page may need a visible boundary even when its navy label has excellent contrast. Icons, outlines and focus rings each need their own checks.

Record the chosen pair

Keep option A as a text-pair candidate and revise option B’s label color. Record both values, the size and weight, the criterion and the remaining component checks. Revisit the pair if a hover fill or surrounding theme changes.