Color & styling

Best practices

  • Check that any text smaller than 18 pts has a minimum color-contrast ratio of 4.5:1
  • Verify that any text larger than 18 pts has a ratio of 3:1
  • Confirm any information conveyed through the use of color is also communicated via other accessible means

Checking for correct usage

  • Use a color-contrast checker so that content meets the minimum color-contrast requirements.
    • There are many free color-contrast checkers available online.
  • Turn off all style sheets.
    • If all of the information remains clear, no information is conveyed solely through the use of color.

Relevant standards

The Web Content Accessibility Guidelines (WCAG) are part of a larger accessibility initiative from the World Wide Web Consortium, the primary international standards organization for the Internet. These guidelines should be followed to strive for the best possible common accessibility.

WCAG 2.0 SC 1.4.1 - Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

WCAG 2.0 SC 1.4.3 - Contrast (Minimum)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Section 508 §1194.22 (c)
Web pages shall be designed so that all information conveyed with color is also available without color, for example, from context or markup.