@@ -137,6 +137,79 @@ A minimum level of contrast is essential to help users with vision impairments c
137
137
138
138
<br />
139
139
140
+ ### Theme colors (blue) with neutral colors
141
+
142
+ <table >
143
+ <tr >
144
+ <td style =" color :white ; background-color :#004578 " >themeDarker: #004578</td >
145
+ <td style =" color :white ; background-color :#000000 " >black: #000000</td >
146
+ </tr >
147
+ <tr >
148
+ <td style =" color :white ; background-color :#005a9e " >themeDark: #005a9e</td >
149
+ <td style =" color :white ; background-color :#212121 " >neutralDark: #212121</td >
150
+ </tr >
151
+ <tr >
152
+ <td style =" color :white ; background-color :#106ebe " >themeDarkAlt: #106ebe</td >
153
+ <td style =" color :white ; background-color :#333 " >neutralPrimary: #333</td >
154
+ </tr >
155
+ <tr >
156
+ <td rowspan =" 3 " style =" font-weight :bold ; vertical-align :middle ; color :white ; background-color :#0078d7 " >themePrimary: #0078d7</td >
157
+ <td style =" color :white ; background-color :#3c3c3c " >neutralPrimaryAlt: #3c3c3c</td >
158
+ </tr >
159
+ <tr >
160
+ <td style =" color :white ; background-color :#666666 " >neutralSecondary: #666666</td >
161
+ </tr >
162
+ <tr >
163
+ <td style =" color :black ; background-color :#a6a6a6 " >neutralTertiary: #a6a6a6</td >
164
+ </tr >
165
+ <tr >
166
+ <td style =" color :white ; background-color :#2b88d8 " >themeSecondary: #2b88d8</td >
167
+ <td style =" color :black ; background-color :#c8c8c8 " >neutralTertiaryAlt: #c8c8c8</td >
168
+ </tr >
169
+ <tr >
170
+ <td style =" color :black ; background-color :#71afe5 " >themeTertiary: #71afe5</td >
171
+ <td style =" color :black ; background-color :#eaeaea " >neutralLight: #eaeaea</td >
172
+ </tr >
173
+ <tr >
174
+ <td style =" color :black ; background-color :#c7e0f4 " >themeLight: #c7e0f4</td >
175
+ <td style =" color :black ; background-color :#f4f4f4 " >neutralLighter: #f4f4f4</td >
176
+ </tr >
177
+ <tr >
178
+ <td style =" color :black ; background-color :#deecf9 " >themeLighter: #deecf9</td >
179
+ <td style =" color :black ; background-color :#f8f8f8 " >neutralLighterAlt: #f8f8f8</td >
180
+ </tr >
181
+ <tr >
182
+ <td style =" color :black ; background-color :#eff6fc " >themeLighterAlt: #eff6fc</td >
183
+ <td style =" color :black ; background-color :#fff " >white: #fff</td >
184
+ </tr >
185
+ </table >
186
+
187
+ ### Alert colors
188
+
189
+ <table >
190
+ <tr >
191
+ <td style =" color :white ; background-color :#952226 " >themeDark: #952226</td >
192
+ </tr >
193
+ <tr >
194
+ <td style =" color :black ; background-color :#f6d6d8 " >themeLight: #f6d6d8</td >
195
+ </tr >
196
+ <tr >
197
+ <td style =" color :white ; background-color :#e55c12 " >themeSecondary: #e55c12</td >
198
+ </tr >
199
+ </table >
200
+
201
+ <br />
202
+
203
+ <table >
204
+ <tr >
205
+ <td style =" color :white ; background-color :#0f7c39 " >themeDarkAlt: #0f7c39</td >
206
+ </tr >
207
+ <tr >
208
+ <td style =" color :black ; background-color :#bff7d5 " >themeLight: #bff7d5</td >
209
+ </tr >
210
+ </table >
211
+
212
+
140
213
## High contrast
141
214
142
215
Use high contrast colors as a guide for color choices for components and states on the web. Windows computers only have the ability to detect whether a PC is running high contrast, or high contrast white. For this reason, use the default high contrast black setting for any high contrast, non-white theme.
0 commit comments