Color Combo's Do's and Don'ts
These are some examples of color combinations that meet or do not meet the Web Content Accessibility Guidelines 2.1.x
Color tints on images
When using graphics as a background be sure to use a solid color tint over the image to ensure the text is legible.
When using a solid color as a background be sure to validate the colors using webaim.org’s contrast checker.
Recommended tint colors
These recommended tint colors can be used with an 80% opacity.
- Blue Shade #1
- Blue Shade #2
Image with text and no tint
Without a tint on top of the image the text is difficult to read.
Image with text and tint
With a tint on top of the image the text is easier to read.