Color Contrast
A brief overview of Arizona Bootstrap’s brand colors and color contrast.
On this page
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-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| .bg-white | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-bougainvillea | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-red | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-sonoran-red | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-rain | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-arroyo-blue | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-azurite | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-blue | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-tinta | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-saguaro | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-shade | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-sage | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-brick | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-caliche | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-cloud | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-silver | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-ash | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-gray-100 | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-gray-200 | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-gray-300 | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-gray-400 | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-gray-500 | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-gray-600 | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-gray-700 | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-gray-800 | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-gray-900 | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |
| .bg-black | .text-white | .text-bougainvillea | .text-red | .text-sonoran-red | .text-rain | .text-arroyo-blue | .text-azurite | .text-blue | .text-tinta | .text-saguaro | .text-shade | .text-sage | .text-brick | .text-caliche | .text-cloud | .text-silver | .text-dark-silver | .text-ash | .text-black |