Color utility classes - Simplex Component Library

Color

Primary and secondary colors can be used for special headings and feature fonts. The red and green colors can be used for warning and success. The gray color utility classes allow authors to soften colors slightly, while still maintaining acceptable color contrast levels.

Overall usage

Used to apply pre-determined colors to any element or component.

Accessibility

Color combinations should only be used as presented to maintain color contrast ratios. Grays should not be used below c-gray-55.

c-primary

c-primary-90

c-primary-85

c-primary-80

c-primary-75

c-primary-70

c-primary-65

c-primary-60

c-primary-55

c-primary-50

c-primary-45

c-primary-40

<div class="c-primary">c-primary</div>
<div class="c-primary-90">c-primary-90</div>
<div class="c-primary-85">c-primary-85</div>
<div class="c-primary-80">c-primary-80</div>
<div class="c-primary-75">c-primary-75</div>
<div class="c-primary-70">c-primary-70</div>
<div class="c-primary-65">c-primary-65</div>
<div class="c-primary-60">c-primary-60</div>
<div class="c-primary-55">c-primary-55</div>
<div class="c-primary-50">c-primary-50</div>
<div class="c-primary-45">c-primary-45</div>
<div class="c-primary-40">c-primary-40</div>

Secondary

c-secondary
5.62:1 - PASS

c-secondary-90

c-secondary-85

c-secondary-80

c-secondary-75

c-secondary-70

c-secondary-65

c-secondary-60

c-secondary-55

c-secondary-50

c-secondary-45

c-secondary-40

<div class="c-secondary">c-secondary</div>
<div class="c-secondary-95">c-secondary-95</div>
<div class="c-secondary-90">c-secondary-90</div>
<div class="c-secondary-85">c-secondary-85</div>
<div class="c-secondary-80">c-secondary-80</div>
<div class="c-secondary-75">c-secondary-75</div>
<div class="c-secondary-70">c-secondary-70</div>
<div class="c-secondary-65">c-secondary-65</div>
<div class="c-secondary-60">c-secondary-60</div>
<div class="c-secondary-55">c-secondary-55</div>
<div class="c-secondary-50">c-secondary-50</div>
<div class="c-secondary-45">c-secondary-45</div>
<div class="c-secondary-40">c-secondary-40</div>

General

c-black
21.00:1 - PASS

c-white
21.00:1 - PASS

c-red
6.08:1 - PASS

c-green
5.14:1 - PASS

<div class="c-black">c-black</div>
<div class="c-white">c-white</div>
<div class="c-red">c-red</div>
<div class="c-green">c-green</div>

Grays

c-gray-90
17.40:1 - PASS

c-gray-85
15.13:1 - PASS

c-gray-80
12.63:1 - PASS

c-gray-75
10.37:1 - PASS

c-gray-70
8.45:1 - PASS

c-gray-65
7.00:1 - PASS

c-gray-60
5.74:1 - PASS

c-gray-55
4.74:1 - PASS

c-gray-50
3.94:1 - FAIL

c-gray-45
3.36:1 - FAIL

c-gray-40
2.84:1 - FAIL