Skip to content

Commit

Permalink
docs(colors): fix swatches accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
Dora Anastasiou committed Sep 14, 2022
1 parent 2776be3 commit 306cb74
Show file tree
Hide file tree
Showing 9 changed files with 110 additions and 109 deletions.
6 changes: 3 additions & 3 deletions website/docs/webdev/3-Guidelines/1-typography.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ By adjusting letter spacing to the environment you are working with you will hel

#### Headings -0.015em (-1.5%)
#### Body 0%
#### Caption and Small text 0.01em (1%)
#### Caption and Small text 0.005em (0.5%)

<br/>

Expand Down Expand Up @@ -256,7 +256,7 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
| font-size-4 | 1.5 | 24 |
| font-size-5 | 1.625 | 26 |
| font-size-6 | 1.875 | 30 |
| font-size-7 | 2rem | 32 |
| font-size-7 | 2 | 32 |
| font-size-8 | 2.25 | 36 |
| font-size-9 | 2.5 | 40 |
| font-size-10 | 2.75 | 44 |
Expand All @@ -268,4 +268,4 @@ We set 16px (1rem) as the base font size for body text to ensure readability. It
| font-size-fluid-0 | clamp(1.125rem, 2vw, 1.25rem) |
| font-size-fluid-1 | clamp(1.25rem, 4vw, 1.625rem) |
| font-size-fluid-2 | clamp(1.5rem, 6vw, 2rem) |
| font-size-fluid-3 | clamp(1.875rem, 9vw, 2.75rem) |
| font-size-fluid-3 | clamp(1.875rem, 9vw, 2.75rem) |
20 changes: 10 additions & 10 deletions website/docs/webdev/3-Guidelines/2-colours.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#C8FFF8'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#C8FFF8</div>
<div style={{color:'black'}} className="small-color-box-70">#C8FFF8</div>
</td>
</tr>
</tbody>
Expand All @@ -58,7 +58,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#85FFF1'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#85FFF1</div>
<div style={{color:'black'}} className="small-color-box-70">#85FFF1</div>
</td>
</tr>
</tbody>
Expand All @@ -67,7 +67,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#00F5D8'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00F5D8</div>
<div style={{color:'black'}} className="small-color-box-70">#00F5D8</div>
</td>
</tr>
</tbody>
Expand All @@ -76,7 +76,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#00CCB4'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00CCB4</div>
<div style={{color:'black'}} className="small-color-box-70">#00CCB4</div>
</td>
</tr>
</tbody>
Expand All @@ -85,7 +85,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#00A390'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00A390</div>
<div style={{color:'black'}} className="small-color-box-70">#00A390</div>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -116,7 +116,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#A0D7FF'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#A0D7FF</div>
<div style={{color:'black'}} className="small-color-box-70">#A0D7FF</div>
</td>
</tr>
</tbody>
Expand All @@ -125,7 +125,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#47B3FF'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#47B3FF</div>
<div style={{color:'black'}} className="small-color-box-70">#47B3FF</div>
</td>
</tr>
</tbody>
Expand All @@ -134,7 +134,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#0D98FB'}} className="small-color-box-td-70">
<div style={{color:'white'}} className="small-color-box-70">#0D98FB</div>
<div style={{color:'black'}} className="small-color-box-70">#0D98FB</div>
</td>
</tr>
</tbody>
Expand All @@ -143,7 +143,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#0083E0'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#0083E0</div>
<div style={{color:'black'}} className="small-color-box-70">#0083E0</div>
</td>
</tr>
</tbody> </table>
Expand Down Expand Up @@ -187,7 +187,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<div style={{color:'white'}} className="large-color-box">#3D5265<br/>Text color</div>
</td>
<td style={{backgroundColor:'#FFFFFF'}} className="large-color-box-td">
<div style={{color:'#3D5265'}} className="large-color-box">#FFFFFF<br/>Background color</div>
<div style={{color:'black'}} className="large-color-box">#FFFFFF<br/>Background color</div>
</td>
<td style={{backgroundColor:'#007B6C'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#007B6C<br/>Highlight<br/>(EEA Green)</div>
Expand Down
28 changes: 14 additions & 14 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/Biodiversity.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#00A390'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#00A390 </div>
<div style={{color:'black'}} className="large-color-box">#00A390 </div>
</td>
</tr>
</tbody>
Expand All @@ -52,7 +52,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#C8FFF8'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#C8FFF8</div>
<div style={{color:'black'}} className="small-color-box-70">#C8FFF8</div>
</td>
</tr>
</tbody>
Expand All @@ -61,7 +61,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#85FFF1'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#85FFF1</div>
<div style={{color:'black'}} className="small-color-box-70">#85FFF1</div>
</td>
</tr>
</tbody>
Expand All @@ -70,7 +70,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#00F5D8'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00F5D8</div>
<div style={{color:'black'}} className="small-color-box-70">#00F5D8</div>
</td>
</tr>
</tbody>
Expand All @@ -79,7 +79,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#00CCB4'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00CCB4</div>
<div style={{color:'black'}} className="small-color-box-70">#00CCB4</div>
</td>
</tr>
</tbody>
Expand All @@ -88,7 +88,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#00A390'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00A390</div>
<div style={{color:'black'}} className="small-color-box-70">#00A390</div>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -119,7 +119,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#FEF6CD'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#FEF6CD</div>
<div style={{color:'black'}} className="small-color-box-70">#FEF6CD</div>
</td>
</tr>
</tbody>
Expand All @@ -128,7 +128,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#FBEC9B'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#FBEC9B</div>
<div style={{color:'black'}} className="small-color-box-70">#FBEC9B</div>
</td>
</tr>
</tbody>
Expand All @@ -137,7 +137,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#FAD936'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#FAD936</div>
<div style={{color:'black'}} className="small-color-box-70">#FAD936</div>
</td>
</tr>
</tbody>
Expand All @@ -146,15 +146,15 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#FAC50D'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#FAC50D</div>
<div style={{color:'black'}} className="small-color-box-70">#FAC50D</div>
</td>
</tr>
</tbody> </table>
<table style={{float:'left'}} >
<tbody>
<tr>
<td style={{backgroundColor:'#FDAF20'}} className="small-color-box-td-70">
<div style={{color:'white'}} className="small-color-box-70">#FDAF20</div>
<div style={{color:'black'}} className="small-color-box-70">#FDAF20</div>
</td>
</tr>
</tbody>
Expand All @@ -163,7 +163,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#FF9933'}} className="small-color-box-td-70">
<div style={{color:'white'}} className="small-color-box-70">#FF9933</div>
<div style={{color:'black'}} className="small-color-box-70">#FF9933</div>
</td>
</tr>
</tbody>
Expand All @@ -190,13 +190,13 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<div style={{color:'white'}} className="large-color-box">#3D5265 <br/>Text color</div>
</td>
<td style={{backgroundColor:'#FFFFFF'}} className="large-color-box-td">
<div style={{color:'#3D5265'}} className="large-color-box">#FFFFFF <br/>Background color</div>
<div style={{color:'black'}} className="large-color-box">#FFFFFF <br/>Background color</div>
</td>
<td style={{backgroundColor:'#005248'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#005248<br/> Elements </div>
</td>
<td style={{backgroundColor:'#00A390'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#00A390<br/> Highlight </div>
<div style={{color:'black'}} className="large-color-box">#00A390<br/> Highlight </div>
</td>
</tr>
</tbody>
Expand Down
6 changes: 3 additions & 3 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/Fise.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#00CCB4'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00CCB4</div>
<div style={{color:'black'}} className="small-color-box-70">#00CCB4</div>
</td>
</tr>
</tbody>
Expand All @@ -89,7 +89,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#00A390'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#00A390</div>
<div style={{color:'black'}} className="small-color-box-70">#00A390</div>
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -128,7 +128,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<div style={{color:'white'}} className="large-color-box">#3D5265 <br/>Text color</div>
</td>
<td style={{backgroundColor:'#FFFFFF'}} className="large-color-box-td">
<div style={{color:'#3D5265'}} className="large-color-box">#FFFFFF <br/>Background color</div>
<div style={{color:'black'}} className="large-color-box">#FFFFFF <br/>Background color</div>
</td>
<td style={{backgroundColor:'#005248'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#005248<br/> Elements </div>
Expand Down
12 changes: 6 additions & 6 deletions website/docs/webdev/3-Guidelines/Thematic Platforms/WiseFreshwater.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#0083E0'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#0083E0 </div>
<div style={{color:'black'}} className="large-color-box">#0083E0 </div>
</td>
</tr>
</tbody>
Expand All @@ -55,7 +55,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#A0D7FF'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#A0D7FF</div>
<div style={{color:'black'}} className="small-color-box-70">#A0D7FF</div>
</td>
</tr>
</tbody>
Expand All @@ -64,7 +64,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#47B3FF'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#47B3FF</div>
<div style={{color:'black'}} className="small-color-box-70">#47B3FF</div>
</td>
</tr>
</tbody>
Expand All @@ -73,7 +73,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#0A99FF'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#0A99FF</div>
<div style={{color:'black'}} className="small-color-box-70">#0A99FF</div>
</td>
</tr>
</tbody>
Expand All @@ -82,7 +82,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<tbody>
<tr>
<td style={{backgroundColor:'#0083E0'}} className="small-color-box-td-70">
<div style={{color:'#3D5265'}} className="small-color-box-70">#0083E0</div>
<div style={{color:'black'}} className="small-color-box-70">#0083E0</div>
</td>
</tr>
</tbody> </table>
Expand Down Expand Up @@ -131,7 +131,7 @@ This color should be eye-catching but not harsh. It can be liberally applied to
<div style={{color:'#3D5265'}} className="large-color-box">#FFFFFF <br/>Background color</div>
</td>
<td style={{backgroundColor:'#0083E0'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#0083E0<br/> Elements </div>
<div style={{color:'black'}} className="large-color-box">#0083E0<br/> Elements </div>
</td>
<td style={{backgroundColor:'#004B7F'}} className="large-color-box-td">
<div style={{color:'white'}} className="large-color-box">#004B7F<br/> Highlight </div>
Expand Down
Loading

0 comments on commit 306cb74

Please sign in to comment.