Accessibility Style Guide

This is heading 1. Font size: 40px. Color: #00205b

This is heading 2. Font size: 32px. Color: #006fba

This is heading 3. Font size: 28px. Color: #006fba

This is heading 4. Font size: 24px. Color: #00205b

This is a paragraph. It has font size of 18px.

Emphasis Text – Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Preofrmated Text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

Blockquote – Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

List Item

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  • incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
  2. architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
  3. qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
  4. sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

 

Hyperlink

This is a sentence with hyperlink. A hyperlink has text color: #00205b, font weight: 700 i.e. bold and underlined. On hover, the text color will be #0047BB.

 

Colors Used

Color 1: #021b33
Color 2: #00205b
Color 3: #2e4878
Color 4: #006fba
Color 5: #5bc2e7

 

Button

Type 1: button

Background color: #00205b
Text color: #fff
Font weight: 400

Type 2: button
<spanstyle=”font-weight: bold;”>Background color: #E7EAEE
Text color: #00205b

Type 3: button
Background color: #008900
Text color: #fff

On hover;

Type 1 will change from #00205b Dark Button Image to #006fba Dark Button on Hover Image

Type 2 will change from #e7eaee  Grey Button Image to rgba(183, 228, 247, 0.4) Grey Button Hover Image

Type 3 will change from #008900 Donate Button Icon to #33CC33 Green Button on Hover Image

 

Breadcrumbs

Type 1

Background color: #fff
Text color: #00205b
White Breadcrumbs Bg Image

Type 2

Background color: #00205b
Text color: #fff
Breadcrumbs dark Bg Image

Breadcrumb on hover

Hover Text color for dark background: #5bc2e7
Diabetes NSW Hover Breadcrumbs
Hover Text color for light background: #006fba
Breadcrumbs white bg on hover image

 

Icons Used

Type 1 (For dark background):
Icon color: #5bc2e7
Social Media Icons Diabetes NSW

Type 2 (For light background):
Icon color: #00205b

Social Media Icons

Alternative Icons

Alternative Icons

 

Form

Newsletter Form Image

Label color: #00205b
Text color: #00205b
Button background color: #00205b
Button text color: #ffffff
Button on hover background color: #006fba Subscribe Button Image

Homepage Banner Section

Title font size: 61px
Paragraph font size: 27px
Button text font size: 27px

Banner bubble
Background color: #00205b with opacity of 90%
Text color: #fff
Color Contrast – 14.49:1

Button
Background color: #fff
Text color: #021b33
Color Contrast – 17.39:1

Join our community of over 45,000 people living with diabetes