What is acceptable color contrast, and how do you measure it?
Appropriate color contrast is an essential component of digital accessibility. The right color contrast is especially helpful to people with low vision or color blindness.
Though you can check the contrast ratio between anything in the foreground, including graphics, tables, etc., we focus on text in the foreground for this article.
What is good color contrast?
Good color contrast is achieved when the contrast between the text in the foreground and the background color is greater than the recommended WCAG standard. For WCAG 2.1 AA (the standard Allyant and many other digital accessibility organizations test against), the contrast ratio must be at least 4.5:1 with its background. The higher the number, the higher the contrast and the easier it is to read.
However, there are exceptions to this rule.
Large text (at least regular 18 pt font or bold 14 pt font) only needs a contrast ratio of 3:1 since large text is generally easier to see than standard text.
Incidental text, defined as “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,” does not need to meet any minimum color contrast requirement.
Brand logos with text, including logos with taglines or slogans, do not need to meet any color contrast requirement.
WCAG 2.1 AA requires non-text elements, including checkboxes, icon buttons, infographics, charts, and graphs) must have a contrast ratio of at least 3:1. This rule does not apply to elements such as focus indicators on text fields, logos, flags, photos, and screenshots.
How do I check if my website meets color contrast requirements?
There are various tools available to assess color contrast. Although Allyant suggests a few, all these tools are comparable, so it ultimately comes down to personal preference.
Below is a list of basic but effective color contrast checkers:
- WebAIMContrast Checker (recommended by Allyant): This is considered the gold standard of contrast checkers. It has a simple interface with real-time contrast ratio calculation. This contrast checker is directly integrated into WebAIM’s WAVE (Web Accessibility Evaluation Tool) browser extension for Google Chrome, Mozilla Firefox, and Microsoft Edge.
- Color.review (recommended by Allyant): A highly visual, interactive interface that allows you to quickly find WCAG-compliant color combinations after entering foreground and background colors. This tool also calculates contrast ratios in real-time.
- Who Can Use (recommended by Allyant): A simple but in-depth interface with real-time contrast calculation and visual simulations of 12 different forms of colorblindness and two types of situational vision conditions.
- Contrast Checker (by Acart Communications): A simple interface with real-time contrast calculation and the ability to save multiple checks in a history. It includes an image color extraction feature directly integrated into the contrast analyzer.
- Contrast checker (by Nick Colley and Dave House): A simple interface with real-time contrast calculation. Checks for contrast requirements of text and non-text components.
- Contrast Ratio: A clean interface with real-time contrast calculation. It supports many color formats and allows for real-time adjustment of individual color components using a keyboard.
In addition to these basic color contrast calculators, Allyant recommends Color Check when testing the contrast of text over images. The Color Check tool lets you upload an image or screenshot, and it precisely selects two colors and provides the contrast ratio.
Conclusion
These are just a few tools to assess color contrast. Having web elements that conform to international color contrast standards can go a long way toward helping not only people with low vision or who are colorblind but also others, like people using smartphones in bright sunlight.
Please contact us if you have color contrast questions for your website or other digital properties.
