Close
Close
Search this website

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

White text

Text color: #FFFFFF

Background color: #081E3F

 Pass: AA and AAA for normal and large text

Gray text

Text color: #333333

Background color: #FFCC00

 Pass: AA and AAA for normal and large text

White text

Text color: #FFFFFF

Background color: #E6E6E6

  Fail: AA and AAA for normal and large text

White text

Text color: #F2F2F2

Background color: #FFFFFF

  Fail: AA and AAA for normal and large text

Blue text

Text color: #081E3F

Background color: #CC0066

  Fail: AA and AAA for normal and large text

White text

Text color: #FFFFFF

Background color: #00FFFF

  Fail: AA and AAA for normal and large text

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.

  • Black

    HEX: #000000

  • White

    HEX: #FFFFFF

  • Gold

    HEX: #B6862C

  • Blue

    HEX: #081E3F

  • Blue Shade #1

    HEX: #0C2B5A

  • Blue Shade #2

    HEX: #0C2B5A

Examples

  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.