Colors
Report an Issue
Join the Slack Discussion
UCLA official colors communicate our brand identity and are the building blocks of accessibility. Use of these colors are a required brand element. Learn more about UCLA brand colors on the UCLA Brand Guidelines page.
We define the following variables in a Sass stylesheet located at ./src/scss/utilities/_colors.scss. Use Sass to compile it back to CSS.
NOTE: ADA compliance requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
- Layout Colors
- Text Colors
- Interactive Colors - Light Background
- Interactive Colors - Dark Background
- Denotive Colors
For more information about contributing to Colors, see README file at ./src/components/98-colors/README.md