Color Contrast

A brief overview of Arizona Bootstrap’s brand colors and color contrast.

Overview

Arizona Bootstrap provides a variety of Brand colors ready for use as background and/or text colors. Although these colors are available for use, it is important to maintain sufficient color contrast between your background and foreground (text) colors. This ensures proper accessibility on University of Arizona websites.

University Standards

All University of Arizona websites should maintain a minimum of WCAG AA color contrast between text color and background color.

Below we have provided a table that includes all of the Arizona branded colors. Check the “Hide inaccessible color combinations” checkbox to only display the color combinations that meet the minimum of WCAG AA. The accessible color combinations have been determined by use of the WebAIM Accessibility Tool.

.text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-white .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-bloom .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-red .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-chili .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-sky .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-oasis .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-azurite .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-blue .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-midnight .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-leaf .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-river .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-sage .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-mesa .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-warm-gray .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-cool-gray .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-silver .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-ash .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-gray-100 .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-gray-200 .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-gray-300 .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-gray-400 .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-gray-500 .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-gray-600 .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-gray-700 .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-gray-800 .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-gray-900 .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black
.bg-black .text-white .text-bloom .text-red .text-chili .text-sky .text-oasis .text-azurite .text-blue .text-midnight .text-leaf .text-river .text-sage .text-mesa .text-warm-gray .text-cool-gray .text-silver .text-dark-silver .text-ash .text-black