このサイトは、WCAGの「適合レベルAA」に準拠することを目的に、基本的なウェブアクセシビリティ対応を施したコンテンツの基礎です。
「適合レベルAA」に準拠するウェブサイトを作成する際に、このサイトをベースとして利用することで、効率的に構築が可能です。
カラーパレット
| Color |
Value |
Variable |
|
#005ea2 |
primary |
|
#d9e8f6 |
primary-light |
|
#d83933 |
secondary |
|
#f8dfe2 |
secondary-light |
|
#fa9441 |
accent |
|
#f2e4d4 |
accent-light |
|
#ffffff |
white |
|
#f0f0f0 |
gray-light |
|
#adadad |
gray |
|
#454545 |
gray-dark |
|
#000000 |
black |
|
#000000 |
text-primary |
|
#454545 |
text-secondary |
|
#005ea2 |
text-link |
|
#1a4480 |
text-hover |
|
#d54309 |
critical |
|
#f4e3db |
critical-light |
|
#C85000 |
warning |
|
#00bde3 |
info |
|
#00a91c |
success |
|
#eaeff2 |
disabled |
レスポンシブスケール
| View |
Value |
Variable |
| sm |
640px |
smart |
| md |
768px |
tablet |
| lg |
1280px |
desktop |
| max-view |
1920px |
max-desktop |
フォントスケール
| Size |
Value |
Variable |
| 1,A,あ,ア |
12px |
1 |
| 1,A,あ,ア |
14px |
2 |
| 1,A,あ,ア |
16px |
3 |
| 1,A,あ,ア |
18px |
4 |
| 1,A,あ,ア |
20px |
5 |
| 1,A,あ,ア |
28px |
6 |
| 1,A,あ,ア |
30px |
7 |
| 1,A,あ,ア |
60px |
8 |
クリアランススケール
| Size |
Value |
Variable |
|
|
0px |
0 |
|
|
4px |
half |
|
|
8px |
1 |
|
|
16px |
2 |
|
|
24px |
3 |
|
|
32px |
4 |
|
|
36px |
5 |
|
|
48px |
6 |
|
|
64px |
7 |
|
|
96px |
8 |