Contrast

Contrast as defined as being in a 'strikingly' different state from something else.

WCAG (Web Content Accessibility Guidelines) 2.0 Contrast Guidelines

Minimum AA The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for large text which should have a contrast ration of at least 3:1.

Enhanced AAA The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for large text which should have a contrast ration of at least 4.5:1.

Contrast Checking Tools

• Browser Plugins (Chrome, Firefox)

• Websites

• UI Designs Applicaiton Plugins

Old Design

contrast-old-design

• Sub Headline - 1.82:1 ratio (min 4.5:1)

• Explore button - 2.46:1

New Design

contrast-new-design

• Sub Headline - 7.6:1 ratio (min 4.5:1)

• Explore button - 5.3:1