Colors

The base color options that will be allowed within this theme. It is important for Web Accessibility that foreground text colors properly contrast with their background colors. Acceptable contrast ratios are based on font size. Colors can be tested for contrast at https://webaim.org/resources/contrastchecker/.

• WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal size text.
• WCAG 2.0 level AA requires a contrast ratio of at least 3:1 for large text.
• WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
• WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Primary Colors

The primary brand color and it's variants

• 900
  #004b8d
• 800
  #7e868c
• 700
  #0076bb
• 600
  #000000
• 500
  #202020
• 400
  #436eff
• 300
  #ebebeb
• 200
  #909090

Background Colors

The color of the background for the component or page this theme is applied to.

• Background
  #ffffff

Fonts

Settings for each typographic element of a page or component (e.g. headings, paragraph text, etc). Google font names are allowed for each section. The font name should be entered as it appears on https://fonts.google.com/. (e.g. Roboto, Open Sans, Source Sans Pro, Arimo, Bitter etc.)
NOTE: Font Family rules are only applicable to page level themes.

Links

• Link Color
  Primary Color (600)
• Link Hover/Focus Color
  Primary Color (600)
• Focus / Underline Color
  Primary Color (800)

Buttons

Primary Button

• Background Color
  Primary Color (900)
• Text Color
  White (#FFFFFF)
• Border Color
  Primary Color (900)
• Focus / Hover Background Color
  Primary Color (700)
• Focus / Hover Text Color
  White (#FFFFFF)
• Focus / Hover Border Color
  Primary Color (700)

Secondary Button

• Background Color
  White (#FFFFFF)
• Text Color
  Black (#000000)
• Border Color
  Primary Color (500)
• Focus / Hover Background Color
  Primary Color (700)
• Focus / Hover Text Color
  White (#FFFFFF)
• Focus / Hover Border Color
  Primary Color (700)

Tertiary Button

• Text Color
  Primary Color (900)
• Focus / Hover Text Color
  Primary Color (900)
• Focus / Underline Color
  Primary Color (400)

Sub Heading

Tabs

• Text Color
  Primary Color (200)
• Background Color
  White (#FFFFFF)
• Underline Color
  Primary Color (300)
• Active Text Color
  Primary Color (600)
• Active Underline Color
  Black (#000000)
• Active Background Color
  White (#FFFFFF)

Web Content Accessibility Guidelines (WCAG)

Introduction

Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page. There is a great deal of fine print and complexity within the Web Content Accessibility Guidelines (WCAG) 2 that can easily confuse web content creators and web accessibility evaluators. This article pulls together the terms and principles needed to understand WCAG 2 requirements for contrast and color.

WCAG 2 "Contrast Ratio"

In WCAG 2, contrast is a measure of the difference in perceived "luminance" or brightness between two colors (the phrase "color contrast" is never used). This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white text on a white background) to 21:1 (e.g., black text on a white background). To give a frame of reference, on a white background…

• Pure red [#FF0000 / rgb(255, 0, 0)] has a ratio of 4:1. I am red text.
• Pure green [#00FF00/ rgb(0, 255, 0)] has a very low ratio of 1.4:1. I am green text.
• Pure blue [#0000FF / rgb(0, 0, 255)] has a contrast ratio of 8.6:1. I am blue text.

Three success criteria in WCAG 2 address contrast:

• 1.4.3 Contrast (Minimum)
• 1.4.6 Contrast (Enhanced)
• 1.4.11 Non-text Contrast

Test Theme

Color blindness filter