UCLA Web Components

Colors

bitbucket Report an Issue Slack 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.

For more information about contributing to Colors, see README file at ./src/components/98-colors/README.md