Colour accessibility for web graphics and special solutions
Colour blindness affects 1 in 12 men and 1 in 200 women. Therefore, it is important to consider colour contrast ratios when creating graphics – especially if containing text. ETH websites should adhere to the minimum requirements for AA accessibility. The following provides a guide when using ETH corporate colours for graphics. If you are using different colours for your graphics, then be sure to check your colour contrast ratios. This can be done with the external pageWebAIM: Contrast Checkercall_made.
Text size legend:
Normal text refers to text that is 12pt (16px) in size.
Large text refers to text that is 14pt (18.67px) or larger.
ETH Blue
The following seven colour options for ETH Blue are provided:
100%
80%
60%
40%
20%
10%
120%
100%
RGB: 33,92,175 | Hex: #215CAF
80%
RGB: 77, 125, 191 | Hex: #4D7DBF
60%
RGB: 122, 122, 207 | Hex: #7A9DCF
40%
RGB: 166, 190, 223 | Hex: #A6BEDF
20%
RGB: 211, 222, 239 | Hex: #D3DEEF
10%
RGB: 233, 239, 247 | Hex: #E9EFF7
120%
RGB: 8, 64, 126 | Hex: #08407E
ETH Petrol
The following seven colour options for ETH Petrol are provided:
100%
80%
60%
40%
20%
10%
120%
100%
RGB: 0, 120, 148 | Hex: #007894
80%
RGB: 51, 149, 171 | Hex: #3395AB
60%
RGB: 102, 175, 192 | Hex: #66AFC0
40%
RGB: 153, 202, 213 | Hex: #99CAD5
20%
RGB: 204, 228, 234 | Hex: #CCE4EA
10%
RGB: 231, 244, 247 | Hex: #E7F4F7
120%
RGB: 0, 89, 109 | Hex: #00596D
ETH Green
The following seven colour options for ETH Green are provided:
100%
80%
60%
40%
20%
10%
120%
100%
RGB: 98, 115 19 | Hex: #627313
80%
RGB: 129, 143, 66 | Hex: #818F42
60%
RGB: 161, 171, 113 | Hex: #A1AB71
40%
RGB: 192, 199, 161 | Hex: #C0C7A1
20%
RGB: 224, 227, 208 | Hex: #E0E3D0
10%
RGB: 239, 241, 231 | Hex: #EFF1E7
120%
RGB: 54, 82, 19 | Hex: #365213
ETH Bronze
The following seven colour options for ETH Bronze are provided:
100%
80%
60%
40%
20%
10%
120%
100%
RGB: 142, 103, 19 | Hex: #8E6713
80%
RGB: 165, 133, 66 | Hex: #A58542
60%
RGB: 187, 164, 113 | Hex: #BBA471
40%
RGB: 210, 194, 161 | Hex: #D2C2A1
20%
RGB: 232, 225, 208 | Hex: #E8E1D0
10%
RGB: 244, 240, 231 | Hex: #F4F0E7
120%
RGB: 112, 79, 18 | Hex: #704F12
ETH Red
The following seven colour options for ETH Red are provided:
100%
80%
60%
40%
20%
10%
120%
100%
RGB: 183, 53, 45 | Hex: #B7352D
80%
RGB: 197, 93, 87 | Hex: #C55D57
60%
RGB: 212, 134, 129 | Hex: #D48681
40%
RGB: 226, 174, 171 | Hex: #E2AEAB
20%
RGB: 241, 215, 213 | Hex: #F1D7D5
10%
RGB: 248, 235, 234 | Hex: #F8EBEA
120%
RGB: 150, 39, 45 | Hex: #96272D
ETH Magenta
The following seven colour options for ETH Magenta are provided:
100%
80%
60%
40%
20%
10%
120%
100%
RGB: 167, 17, 122 | Hex: #A7117A
80%
RGB: 183, 59, 146 | Hex: #B73B92
60%
RGB: 202, 108, 174 | Hex: #CA6CAE
40%
RGB: 220, 158, 201 | Hex: #DC9EC9
20%
RGB: 239, 208, 227 | Hex: #EFD0E3
10%
RGB: 248, 232, 243 | Hex: #F8E8F3
120%
RGB: 140, 10, 89 | Hex: #8C0A59
ETH Grey
The following seven colour options for ETH Grey are provided:
100%
80%
60%
40%
20%
10%
120%
100%
RGB: 111, 111, 111 | Hex: #6F6F6F
80%
RGB: 140, 140, 140 | Hex: #8C8C8C
60%
RGB: 169, 169, 169 | Hex: #A9A9A9
40%
RGB: 197, 197, 197 | Hex: #C5C5C5
20%
RGB: 226, 226, 226 | Hex: #E2E2E2
10%
RGB: 241, 241, 241 | Hex: #F1F1F1
120%
RGB: 87, 87, 87 | Hex: #575757