Button guidelines

  • Keep text short
  • Align left
  • Use colors from the design system color palette
    • Avoid red and orange – they suggest emergency. 
    • If you change button background color, make sure there’s sufficient color contrast between background and text. (see Web accessible combinations on the color palette page). The color contrast ratio should be 4.5:1 or higher.
    • Note: Hyperlink blue can be made accessible if it’s used with pure white (#ffffff)

Accessible button color combinations

These color combos are not accessible

(use black or base blue text rather than white)