Color Contrast
Color Contrast Guidelines
Contrast and color use are vital to accessibility. Users, including users with visual disabilities, and colorblindness must be able to perceive content on the page. These guidelines help us provide a better ux for all.
WCAG 2.0 Contrast Ratios
All of the content on our sites must meet AA standards.
All important information must pass AAA standards ( paragraphs, button )
Normal Text Ratio: AA-4.5:1/AAA-7:1
Large Text Ratio: AA-3:1/AAA-4.5:1
(18pt or higher, 14pt of higher if bold)**
How to Deal with Difficult Brand Colors:
When we have a super light brand color that is not easily visible on a white background we have to find different solutions and ways to work that color into the site template. Great ways to work those colors in are in illustrations, icons, accent elements, branded photos or on a dark background.
Color Contrast Tools for Web:
https://wave.webaim.org (opens in a new tab)
https://webaim.org/resources/contrastchecker (opens in a new tab)
https://color.adobe.com/create/color-contrast-analyzer (opens in a new tab)
Color Contrast Tools for Design Programs: