Skip to content

Commit 65ba0d3

Browse files
MartinBraquetMartinBraquet
committed
Increase contrast for better accessibility
1 parent ed07031 commit 65ba0d3

9 files changed

Lines changed: 124 additions & 93 deletions

File tree

‎web/components/answers/answer-compatibility-question-content.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@ type ImportanceColorsType = {
3636
}
3737

3838
export const IMPORTANCE_RADIO_COLORS: ImportanceColorsType = {
39-
0: `bg-teal-300 ring-teal-200`,
40-
1: `bg-teal-500 ring-teal-200`,
41-
2: `bg-teal-700 ring-teal-300`,
42-
3: `bg-teal-900 ring-teal-400`,
39+
0: `bg-teal-700 ring-teal-200`,
40+
1: `bg-teal-800 ring-teal-200`,
41+
2: `bg-teal-900 ring-teal-300`,
42+
3: `bg-teal-950 ring-teal-400`,
4343
}
4444

4545
export const IMPORTANCE_DISPLAY_COLORS: ImportanceColorsType = {

‎web/components/buttons/button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export function buttonClass(size: SizeType, color: ColorType) {
6969
color === 'gradient' && [gradient, 'from-primary-500 to-blue-400'],
7070
color === 'gradient-pink' && [gradient, 'from-primary-500 to-fuchsia-500'],
7171
color === 'gray-white' &&
72-
'text-ink-600 hover:text-ink-900 disabled:text-ink-300 disabled:bg-transparent',
72+
'text-ink-500 hover:text-ink-900 disabled:text-ink-300 disabled:bg-transparent',
7373
color === 'gold' && [
7474
gradient,
7575
'enabled:!bg-gradient-to-br from-yellow-400 via-yellow-100 to-yellow-300 dark:from-yellow-600 dark:via-yellow-200 dark:to-yellow-400 !text-gray-900',

‎web/components/comments/dropdown-menu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export default function DropdownMenu(props: {
9090
className={clsx(
9191
selectedItemName && item.name == selectedItemName
9292
? 'bg-primary-100'
93-
: 'hover:bg-ink-100 hover:text-ink-900',
93+
: 'hover:bg-ink-300 hover:text-ink-900',
9494
'text-ink-700',
9595
'flex w-full gap-2 px-4 py-2 text-left text-sm'
9696
)}

‎web/components/filters/desktop-filters.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,7 @@ export function DesktopFilters(props: {
249249
{/* menuWidth="w-40"*/}
250250
{/*/>*/}
251251
<button
252-
className="text-ink-500 hover:text-primary-500 underline"
252+
className="text-ink-900 hover:text-primary-500 underline"
253253
onClick={clearFilters}
254254
>
255255
Clear filters

‎web/components/votes/vote-info.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export function VoteComponent() {
3939
<Row className="items-center justify-between flex-col xxs:flex-row mb-4 xxs:mb-0 gap-2">
4040
<Title className="text-3xl">Proposals</Title>
4141
<div className="flex items-center gap-2 text-sm justify-end">
42-
<label htmlFor="orderBy" className="text-gray-600">Order by:</label>
42+
<label htmlFor="orderBy" className="text-ink-700">Order by:</label>
4343
<select
4444
id="orderBy"
4545
value={orderBy}
@@ -71,7 +71,7 @@ export function VoteComponent() {
7171
<VoteCreator
7272
onEditor={(e) => setEditor(e)}
7373
/>
74-
<Row className="mx-2 mb-2 items-center gap-2 text-sm text-gray-500">
74+
<Row className="mx-2 mb-2 items-center gap-2 text-sm">
7575
<input
7676
type="checkbox"
7777
id="anonymous"

‎web/components/votes/vote-item.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ export function VoteItem(props: {
2626
}, [vote.creator_id])
2727
// console.debug('creator', creator)
2828
return (
29-
<Col className={'mb-4 rounded-lg border border-ink-200 p-4'}>
29+
<Col className={'mb-4 rounded-lg border border-canvas-200 p-4'}>
3030
<Row className={'mb-2'}>
3131
<Col className={'flex-grow'}>
3232
<p className={'text-2xl'}>{vote.title}</p>
33-
<Col className='text-sm text-gray-500 italic'>
33+
<Col className='text-sm italic'>
3434
<Content className="w-full" content={vote.description as JSONContent}/>
3535
</Col>
3636
<Row className={'gap-2 mt-2 items-center justify-between w-full custom-link flex-wrap'}>

‎web/components/widgets/radio-toggle-group.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function RadioToggleGroup(props: {
2727

2828
const length = orderedChoicesMap.length
2929
return (
30-
<Row className="text-ink-500 dark:text-ink-500 mb-6 items-center gap-3 text-sm">
30+
<Row className="text-ink-600 mb-6 items-center gap-3 text-sm">
3131
{orderedChoicesMap[0][0]}
3232
<RadioGroup
3333
className={clsx(

‎web/components/widgets/show-more.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function ShowMore(props: ShowMoreProps) {
1616
<button
1717
type="button"
1818
onClick={() => setShowMoreInfo(!showMoreInfo)}
19-
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 flex items-center"
19+
className="text-primary-600 hover:text-primary-800 flex items-center"
2020
>
2121
{showMoreInfo ? labelOpen : labelClosed}
2222
<svg

‎web/styles/globals.css‎

Lines changed: 111 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
.main-font {
1111
font-family: var(--font-main), serif;
1212
}
13+
1314
.main-font a,
1415
.main-font label,
1516
.main-font button {
@@ -35,20 +36,36 @@
3536

3637
:root {
3738
/* Text / Ink Grey Scale */
39+
/* High Contrast */
3840
--color-ink-0: 255 255 255; /* white */
39-
--color-ink-50: 245 245 245;
40-
--color-ink-100: 230 230 230;
41-
--color-ink-200: 200 200 200;
42-
--color-ink-300: 170 170 170;
43-
--color-ink-400: 140 140 140;
44-
--color-ink-500: 110 110 110;
45-
--color-ink-600: 85 85 85;
46-
--color-ink-700: 60 60 60;
47-
--color-ink-800: 40 40 40;
48-
--color-ink-900: 25 25 25;
49-
--color-ink-950: 12 12 12;
41+
--color-ink-50: 255 255 255;
42+
--color-ink-100: 255 255 255;
43+
--color-ink-200: 255 255 255;
44+
--color-ink-300: 160 160 160;
45+
--color-ink-400: 160 160 160;
46+
--color-ink-500: 80 80 80;
47+
--color-ink-600: 0 0 0;
48+
--color-ink-700: 0 0 0;
49+
--color-ink-800: 0 0 0;
50+
--color-ink-900: 0 0 0;
51+
--color-ink-950: 0 0 0;
5052
--color-ink-1000: 0 0 0; /* black */
5153

54+
/* Medium Contrast */
55+
/*--color-ink-0: 255 255 255; !* white *!*/
56+
/*--color-ink-50: 245 245 245;*/
57+
/*--color-ink-100: 230 230 230;*/
58+
/*--color-ink-200: 200 200 200;*/
59+
/*--color-ink-300: 170 170 170;*/
60+
/*--color-ink-400: 140 140 140;*/
61+
/*--color-ink-500: 110 110 110;*/
62+
/*--color-ink-600: 85 85 85;*/
63+
/*--color-ink-700: 60 60 60;*/
64+
/*--color-ink-800: 40 40 40;*/
65+
/*--color-ink-900: 25 25 25;*/
66+
/*--color-ink-950: 12 12 12;*/
67+
/*--color-ink-1000: 0 0 0; !* black *!*/
68+
5269
/* Background / Canvas Grey Scale */
5370
--color-canvas-0: 255 255 255; /* white */
5471
--color-canvas-25: 245 245 245;
@@ -69,7 +86,7 @@
6986
--color-primary-900: 30 58 138;
7087
--color-primary-800: 30 64 175;
7188
--color-primary-700: 29 78 216;
72-
--color-primary-600: 37 99 235;
89+
--color-primary-600: 29 78 216;
7390
--color-primary-500: 59 130 246; /* standard blue */
7491
--color-primary-400: 96 165 250;
7592
--color-primary-300: 147 197 253;
@@ -115,19 +132,7 @@
115132
--color-green-300: 110 231 183; /* vibrant but not neon */
116133
--color-green-200: 167 243 208; /* gentle mid-light tone */
117134
--color-green-100: 209 260 229; /* soft and airy */
118-
--color-green-50: 240 263 245; /* subtle, barely tinted background */
119-
120-
--color-red-950: 69 10 10; /* darkest red */
121-
--color-red-900: 127 29 29;
122-
--color-red-800: 153 27 27;
123-
--color-red-700: 185 28 28;
124-
--color-red-600: 220 38 38;
125-
--color-red-500: 239 68 68; /* standard red */
126-
--color-red-400: 248 113 113;
127-
--color-red-300: 252 165 165;
128-
--color-red-200: 254 202 202;
129-
--color-red-100: 254 226 226;
130-
--color-red-50: 254 242 242; /* lightest red */
135+
--color-green-50: 240 263 245; /* subtle, barely tinted background */
131136

132137
--color-yellow-950: 66 50 3; /* darkest yellow */
133138
--color-yellow-900: 113 63 18;
@@ -140,60 +145,51 @@
140145
--color-yellow-200: 253 230 138;
141146
--color-yellow-100: 254 243 199;
142147
--color-yellow-50: 255 251 235; /* lightest yellow */
148+
149+
--color-red-950: 69 10 10; /* darkest red */
150+
--color-red-900: 127 29 29;
151+
--color-red-800: 153 27 27;
152+
--color-red-700: 185 28 28;
153+
--color-red-600: 220 38 38;
154+
--color-red-500: 239 68 68; /* standard red */
155+
--color-red-400: 248 113 113;
156+
--color-red-300: 252 165 165;
157+
--color-red-200: 254 202 202;
158+
--color-red-100: 254 226 226;
159+
--color-red-50: 254 242 242; /* lightest red */
143160
}
144161

145162
.dark {
146163
color-scheme: dark;
147164

148-
--color-green-50: 240 253 244; /* lightest green */
149-
--color-green-100: 220 252 231;
150-
--color-green-200: 187 247 208;
151-
--color-green-300: 134 239 172;
152-
--color-green-400: 74 222 128;
153-
--color-green-500: 34 197 94; /* standard green */
154-
--color-green-600: 22 163 74;
155-
--color-green-700: 21 128 61;
156-
--color-green-800: 22 101 52;
157-
--color-green-900: 20 83 45;
158-
--color-green-950: 5 46 22; /* darkest green */
159-
160-
--color-red-50: 254 242 242; /* lightest red */
161-
--color-red-100: 254 226 226;
162-
--color-red-200: 254 202 202;
163-
--color-red-300: 252 165 165;
164-
--color-red-400: 248 113 113;
165-
--color-red-500: 239 68 68; /* standard red */
166-
--color-red-600: 220 38 38;
167-
--color-red-700: 185 28 28;
168-
--color-red-800: 153 27 27;
169-
--color-red-900: 127 29 29;
170-
--color-red-950: 69 10 10; /* darkest red */
171-
172-
--color-yellow-50: 255 251 235; /* lightest yellow */
173-
--color-yellow-100: 254 243 199;
174-
--color-yellow-200: 253 230 138;
175-
--color-yellow-300: 252 211 77;
176-
--color-yellow-400: 251 191 36;
177-
--color-yellow-500: 245 158 11; /* standard yellow */
178-
--color-yellow-600: 217 119 6;
179-
--color-yellow-700: 180 83 9;
180-
--color-yellow-800: 146 64 14;
181-
--color-yellow-900: 113 63 18;
182-
--color-yellow-950: 66 50 3; /* darkest yellow */
183-
165+
/* High Contrast */
184166
--color-ink-1000: 255 255 255; /* white */
185-
--color-ink-950: 250 250 250; /* #FAFAFA */
186-
--color-ink-900: 242 242 242; /* #F2F2F2 */
187-
--color-ink-800: 217 217 217; /* #D9D9D9 */
188-
--color-ink-700: 191 191 191; /* #BFBFBF */
189-
--color-ink-600: 166 166 166; /* #A6A6A6 */
190-
--color-ink-500: 140 140 140; /* #8C8C8C */
191-
--color-ink-400: 115 115 115; /* #737373 */
192-
--color-ink-300: 89 89 89; /* #595959 */
193-
--color-ink-200: 64 64 64; /* #404040 */
194-
--color-ink-100: 34 34 34; /* #222222 */
195-
--color-ink-50: 17 17 17; /* #111111 */
167+
--color-ink-950: 255 255 255;
168+
--color-ink-900: 255 255 255;
169+
--color-ink-800: 255 255 255;
170+
--color-ink-700: 255 255 255;
171+
--color-ink-600: 255 255 255;
172+
--color-ink-500: 200 200 200;
173+
--color-ink-400: 100 100 100;
174+
--color-ink-300: 100 100 100;
175+
--color-ink-200: 0 0 0;
176+
--color-ink-100: 0 0 0;
177+
--color-ink-50: 0 0 0;
196178
--color-ink-0: 0 0 0; /* black */
179+
/* Medium Contrast */
180+
/*--color-ink-1000: 255 255 255; !* white *!*/
181+
/*--color-ink-950: 250 250 250; !* #FAFAFA *!*/
182+
/*--color-ink-900: 242 242 242; !* #F2F2F2 *!*/
183+
/*--color-ink-800: 217 217 217; !* #D9D9D9 *!*/
184+
/*--color-ink-700: 191 191 191; !* #BFBFBF *!*/
185+
/*--color-ink-600: 166 166 166; !* #A6A6A6 *!*/
186+
/*--color-ink-500: 140 140 140; !* #8C8C8C *!*/
187+
/*--color-ink-400: 115 115 115; !* #737373 *!*/
188+
/*--color-ink-300: 89 89 89; !* #595959 *!*/
189+
/*--color-ink-200: 64 64 64; !* #404040 *!*/
190+
/*--color-ink-100: 34 34 34; !* #222222 *!*/
191+
/*--color-ink-50: 17 17 17; !* #111111 *!*/
192+
/*--color-ink-0: 0 0 0; !* black *!*/
197193

198194
--color-canvas-25: 0 0 0;
199195
--color-canvas-0: 20 20 20;
@@ -204,17 +200,16 @@
204200

205201
--color-primary-950: 255 255 255;
206202
--color-primary-900: 255 255 255;
207-
--color-primary-800: 255 255 255;
203+
--color-primary-800: 170 220 250;
208204
--color-primary-700: 255 255 255;
209-
--color-primary-600: 96 165 250;
205+
--color-primary-600: 150 200 250;
210206
--color-primary-500: 59 130 246; /* standard blue */
211207
--color-primary-400: 37 99 235;
212208
--color-primary-300: 29 78 216;
213209
--color-primary-200: 30 64 175;
214210
--color-primary-100: 30 58 138;
215211
--color-primary-50: 23 37 84; /* very dark navy */
216212

217-
218213
--color-no-950: 255 255 255; /* white */
219214
--color-no-900: 242 242 242;
220215
--color-no-800: 217 217 217;
@@ -228,7 +223,6 @@
228223
--color-no-50: 17 17 17;
229224
--color-no-0: 0 0 0; /* black */
230225

231-
232226
--color-yes-950: 255 255 255; /* white */
233227
--color-yes-900: 242 242 242;
234228
--color-yes-800: 217 217 217;
@@ -242,6 +236,42 @@
242236
--color-yes-50: 17 17 17;
243237
--color-yes-0: 0 0 0; /* black */
244238

239+
--color-green-50: 240 253 244; /* lightest green */
240+
--color-green-100: 220 252 231;
241+
--color-green-200: 187 247 208;
242+
--color-green-300: 134 239 172;
243+
--color-green-400: 74 222 128;
244+
--color-green-500: 34 197 94; /* standard green */
245+
--color-green-600: 22 163 74;
246+
--color-green-700: 21 128 61;
247+
--color-green-800: 22 101 52;
248+
--color-green-900: 20 83 45;
249+
--color-green-950: 5 46 22; /* darkest green */
250+
251+
--color-yellow-50: 255 251 235; /* lightest yellow */
252+
--color-yellow-100: 254 243 199;
253+
--color-yellow-200: 253 230 138;
254+
--color-yellow-300: 252 211 77;
255+
--color-yellow-400: 251 191 36;
256+
--color-yellow-500: 245 158 11; /* standard yellow */
257+
--color-yellow-600: 217 119 6;
258+
--color-yellow-700: 180 83 9;
259+
--color-yellow-800: 146 64 14;
260+
--color-yellow-900: 113 63 18;
261+
--color-yellow-950: 66 50 3; /* darkest yellow */
262+
263+
--color-red-50: 254 242 242; /* lightest red */
264+
--color-red-100: 254 226 226;
265+
--color-red-200: 254 202 202;
266+
--color-red-300: 252 165 165;
267+
--color-red-400: 248 113 113;
268+
--color-red-500: 239 68 68; /* standard red */
269+
--color-red-600: 220 38 38;
270+
--color-red-700: 185 28 28;
271+
--color-red-800: 153 27 27;
272+
--color-red-900: 127 29 29;
273+
--color-red-950: 69 10 10; /* darkest red */
274+
245275
}
246276
}
247277

@@ -365,9 +395,10 @@ ul {
365395
padding-left: 1.25rem;
366396
margin-top: 0.5rem;
367397
}
398+
368399
.custom-link a,
369-
.custom-link button{
370-
color: rgb(var(--color-primary-500));
400+
.custom-link button {
401+
color: rgb(var(--color-primary-600));
371402
text-decoration: none;
372403
font-family: var(--font-main), serif;
373404
}
@@ -402,12 +433,12 @@ ol {
402433
list-style-position: inside; /* or 'inside' if you prefer */
403434
/*margin: 0 0 1rem 0;*/
404435
list-style: decimal;
405-
padding-left: 0.5rem; /* space for numbers */
436+
padding-left: 0.5rem; /* space for numbers */
406437
}
407438

408439
/* Ensure li behaves as a list item (some resets or flex can break markers) */
409440
ol > li {
410-
display: list-item; /* prevents flex from removing marker layout */
441+
display: list-item; /* prevents flex from removing marker layout */
411442
/*padding-left: 0rem; !* extra spacing after number *!*/
412443
/*text-indent: -0rem; !* pull first line back so text aligns *!*/
413444
}

0 commit comments

Comments
 (0)