Background-color utility classes - Simplex Component Library

Background-color

Background-color utility classes allow authors to apply colors to any element, including extending components.

Overall usage

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

Accessibility

Color combinations should only be used in the foreground/background combinations as presented to maintain accessible color contrast ratios.

Primary

bg-primary
5.54:1 = PASS

bg-primary-90:
6.19:1 - PASS

bg-primary-85:
7.69:1 - PASS

bg-primary-80
9.39:1 - PASS

bg-primary-75
10.03:1 - PASS

bg-primary-70
10.76:1 - PASS

bg-primary-65
11.60:1 - PASS

bg-primary-60
12.55:1 - PASS

bg-primary-55
13.63:1 - PASS

bg-primary-50
14.83:1 - PASS

bg-primary-45
16.18:1 - PASS

bg-primary-40
17.65:1 - PASS

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

Secondary

bg-secondary
5.62:1 - PASS

bg-secondary-90
5.53:1 - PASS

bg-secondary-85
5.78:1 - PASS

bg-secondary-80
6.17:1 - PASS

bg-secondary-75
6.84:1 - PASS

bg-secondary-70
7.76:1 - PASS

bg-secondary-65
9.08:1 - PASS

bg-secondary-60
10.62:1 - PASS

bg-secondary-55
12.62:1 - PASS

bg-secondary-50
14.93:1 - PASS

bg-secondary-45
17.74:1 - PASS

bg-secondary-40
20.87:1 - PASS

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

General

bg-black
21.00:1 - PASS

bg-white
21.00:1 - PASS

bg-red
6.08:1 - PASS

bg-green
5.14:1 - PASS

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

Grays

bg-gray-90
17.40:1 - PASS

bg-gray-85
15.13:1 - PASS

bg-gray-80
12.63:1 - PASS

bg-gray-75
10.37:1 - PASS

bg-gray-70
8.45:1 - PASS

bg-gray-65
7.00:1 - PASS

bg-gray-60
5.74:1 - PASS

bg-gray-55
4.74:1 - PASS

bg-gray-50
5.32:1 - PASS

bg-gray-45
6.25:1 - PASS

bg-gray-40
7.37:1 - PASS

bg-gray-35
8.63:1 - PASS

bg-gray-30
9.90:1 - PASS

bg-gray-25
11.42:1 - PASS

bg-gray-20
13.08:1 - PASS

bg-gray-15
14.88:1 - PASS

bg-gray-10
16.67:1 - PASS

bg-gray-5
18.76:1 - PASS

<div class="bg-gray95">bg-gray95</div>
<div class="bg-gray-90">bg-gray-90</div>
<div class="bg-gray-85">bg-gray-85</div>
<div class="bg-gray-80">bg-gray-80</div>
<div class="bg-gray-75">bg-gray-75</div>
<div class="bg-gray-70">bg-gray-70</div>
<div class="bg-gray-65">bg-gray-65</div>
<div class="bg-gray-60">bg-gray-60</div>
<div class="bg-gray-55">bg-gray-55</div>
<div class="bg-gray-50">bg-gray-50</div>
<div class="bg-gray-45">bg-gray-45</div>
<div class="bg-gray-40">bg-gray-40</div>
<div class="bg-gray-35">bg-gray-35</div>
<div class="bg-gray-30">bg-gray-30</div>
<div class="bg-gray-25">bg-gray-25</div>
<div class="bg-gray-20">bg-gray-20</div>
<div class="bg-gray-15">bg-gray-15</div>
<div class="bg-gray-10">bg-gray-10</div>
<div class="bg-gray-5">bg-gray-5</div>

Utility classes