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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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<\/strong> with its background. The higher the number, the higher the contrast and the easier it is to read.<\/p>\n\n\n\n However, there are exceptions to this rule. <\/p>\n\n\n\n Large text<\/a>\u00a0(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.\u00a0<\/p>\n\n\n\n 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,\u201d does not need to meet any minimum color contrast requirement. <\/p>\n\n\n\n Brand logos with text, including logos with taglines or slogans, do not need to meet any color contrast requirement.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Below is a list of basic but effective color contrast checkers:<\/p>\n\n\n\n In addition to these basic color contrast calculators, Allyant recommends Color Check<\/a> 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.<\/p>\n\n\n\n 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. <\/p>\n\n\n\nHow do I check if my website meets color contrast requirements?<\/h2>\n\n\n\n
\n
Conclusion<\/h2>\n\n\n\n