Web Accessible BioSci Color Combos

These are available helper classes, demonstrating the header levels and backgrounds that pass AA accessibility requirements.

Refer to the campus web color combinations for reference, but note that some of the combinations may not be web accessible for certain heading styles.

Text

BioSci

.text-bio-blue

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is paragraph text.

.text-bio-green

Heading 1

Heading 2

Heading 3

Campus

.text-ucsd-primary-color

.text-ucsd-primary-gray

.text-ucsd-secondary-navy

.text-ucsd-neutral-black

Background

Use default white text unless there are specific instances where a variation of color is necessary.

BioSci

.bg-bio-blue

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is paragraph text

.bg-bio-blue with text-bio-green

Heading 1

Heading 2

Heading 3

.bg-bio-blue with text-bio-cyan

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is paragraph text.

.bg-bio-green

Heading 1

Heading 2

Heading 3

.bg-bio-green with text-bio-blue

Heading 1

Heading 2

Heading 3

.bg-bio-cyan with text-bio-blue

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is paragraph text.

Campus

.bg-ucsd-primary-color

.bg-ucsd-primary-gray

.bg-ucsd-secondary-navy

.bg-ucsd-neutral-black