SKIP TO MAIN

Color and Contrast

Listed below are some of the finer details regarding color and contrast choices that will lend towards a more accessible site.

Color Contrast

This is the difference in color between background and foreground. It affects the readability of text and icons, but should also be taken into account when creating images.

Contrast ratio

This is how the color contrast is measured. Comcast strives to meet WCAG's AA standard. Luckily there are numerous plugins available so that you don't have to manually calculate the ratio.

WCAG AA Standards

  • Normal Text - 4.5: 1
  • Large Text (18pt or higher, or bolded 14pt or higher) - 3:1
  • Incidental text such as inactive elements, decorative, or non-visible text does not need to meet any ratio
  • Logotypes do not need to meet any ratio

Plugins

There are plugins available for most design and development environments, so check around for your preferred one. Here are a few that are browser based.