Transcript for Video: WebAIM Color Contrast Checker (2:14)
Color contrast is an important factor to consider when developing content. Many individuals benefit when a resource is designed with high color contrast between the foreground (e.g. text) and background colors. For instance, high contrasting color combinations (e.g. black text on a white background) make text easier to read for users with a wide-variety of visual impairments, including but not limited to partial sight, low vision, color-blindness, etc. High color contrast requirements can vary depending on the text size and type of content.
Here are few high color contrast combinations:
- Foreground/Text: #000000; Background: #FFFFFF
- Foreground/Text: #0D2A03; Background: #F0F0F0
- Foreground/Text: #3C14FF; Background: #FFFFFF
Typically, the best color choices to achieve a high color contrast are dark foreground colors and light background colors. It is considered a best practice to verify the color contrast using a color contrast checker to ensure accessibility.
WebAIM’s (Web Accessibility in Mind) color contrast checker is one of several free color contrast checkers available to assist in the development of compliant content. WGAC Color Contrast Checker by Acart Communications, is another free color contrast checker and functions similarly to WebAIM’s color contrast checker. Both of these tools provide options for verifying color contrast by entering the RGB codes, in hexadecimal format, into the foreground and background text boxes or by selecting colors from an available color palette.
Mozilla offers a WCAG Contrast Checker as a free add-on to its Firefox Browser. This contrast checker functions differently in that it does not require the RGB codes in hexadecimal format to verify color contrast. Firefox’s add-on allows users to go to any website, right click anywhere on the site, and select the WCAG Contrast Checker to obtain a list of all color contrasts on the site. A green checkmark identifies when the color contrast has met WCAG guidelines and a red x identifies when the guidelines have not been met.
Visit the following websites for more information on these free color contrast checkers.