WCAG audit for colors
What needs to be changed
1. Colors we use that don't meet WCAG when on white background
- Green change to HEX 235046
- Red change to TBD
- Yellow change to TBD
Example: https://www.valuepenguin.com/best-auto-insurance
Shortcodes it applies to:
- Format
- Pullquote
- Icon
- List
- Line
2. Solve for blue elements on backgrounds
Background colors
- ice (panel)
- butter (panel)
- gray (panel, inset)
Shortcodes it applies to:
- Pullquotes with default blue
- Icons in blue
- Calloutquote (ice with blue)
Examples:
Pullquote in default color
Pullquote in default color
Pullquote in default color
3. Solve for yellow elements on backgrounds
Background colors
- ice (panel)
- butter (panel)
- gray (panel, inset)
- blue (inset)
Shortcodes it applies to:
- Plain list bullets
Examples:
- plain list
- plain list
- plain list
- plain list
Testing individual shortcodes
Format shortcode
Main colors
blackblue
green
red
yellow
Used on blue backgrounds
Used on ice background
blue
Used on butter background
blue
Used on gray background
blue
Archive
purpleorange
lightgrey
Pullquote shortcode
"Pullquote" allows the same color modifiers as "format"
Example of a standard pullquote
Icon shortcode
"Icon" allows the same color modifiers as "format"
Line shortcode
"Line" allows the same color modifiers as "format"
List shortcode
- pros
- cons
- plain list
CalloutQuote
Methology metric shortcode
No color modifiers, but has blue text on a gray background
Table with alternating row color
Rank | Name | Value | Another Column |
|---|---|---|---|
| 1 | Alaska | 120 | X |
| 2 | Idaho | 102 | Y |
| 3 | Wyoming | 100 | Z |
| 4 | California | 80 | A |
| 5 | Florida | 12 | B |
About the Author
Analyst
Stephanie Guinan is an Analyst for ValuePenguin/LendingTree. She specializes in simplifying complex insurance topics for consumers.
She’s also worked as an award-winning data journalist and content marketing writer. Stephanie’s work has been cited by Wall Street Journal, New York Times, Rolling Stone and more.
Expertise
- Health insurance and Medicare
- Home and auto insurance
- Crunching numbers
Referenced by
- Wall Street Journal
- New York Times
- Rolling Stone
Editorial Note: The content of this article is based on the author's opinions and recommendations alone. It has not been previewed, commissioned or otherwise endorsed by any of our network partners.
