--- title: "Text color must provide high contrast with its background" date: "2024-08-19T04:37:50+00:00" summary: "Ensure optimal readability with high-contrast text colors. Learn how to meet WCAG 2.1 Level AAA standards, benefiting users with low vision and improving overall accessibility in various lighting conditions." image: type: "page" url: "/web-governance/text-color-must-provide-high-contrast-its-background" id: "e5d81ef3-8ef1-4a89-8d0c-55f16775bf7e" --- Table of contents will be added **1.4.6 Contrast (Enhanced)** Introduction ------------ This document provides information about the related accessibility check: * Text color must provide high contrast with its background. What ---- Text should have good contrast ratio between the foreground color of the text and the background color. The contrast ratio must be at least 7:1 for regular text and at least 4.5:1 for large text. That is, large text requires slightly lower contrast than regular text for satisfying this check. Large text is defined as; 18pt (24 CSS pixels) or 14pt (19 CSS pixels) bold text or above. For comparison, the maximum contrast ratio, for example black text on a white background, would be 21:1. Why --- Text is easier to read when there is a good contrast ratio between the text and the background. People with low vision often have difficulty reading text that does not contrast enough with the background. Some types of color deficiencies can lower the contrast ratio even further, which makes the problem worse. ### This check affects the following users who have: * Low Vision: including many elderly due to natural age related vision loss. * Color Blindness: Individuals who are color blind have a better ability to distinguish text when there is good contrast. * No impairments: All users benefit from good contrast when they view content under special lighting conditions, such as in bright sunlight or on a screen that is dimmed due to low battery mode.  ### User story ![A woman sitting outside looking at her mobile telephone on a bright day.](https://acquia.widen.net/content/853c036f-3efa-47ba-a23f-2449a4a9c5f0/web/Mon_AccessibilityHelpCenter-UserStory-WomanLlookingAtPhone.png) Emily, 63 years: _“When I forget to bring my glasses, there are many websites that are hard for me to read. – When they use light gray text color it is also hard to see anything on my smartphone when I am outside in sunlight”._ Examples -------- This section gives some examples of the issue. ### Example 1: Insufficient contrast ration A web page that has a text box with important information. The text in the box is written in green, but hard to read because it is a green shade on a slightly lighter green background. The two greens are too similar, which makes it difficult to see the text clearly. ![A web page displays the garbage disposal policy of a local community. A written notice on how to properly dispose of plastic waste appears with a dark green font color on a lighter green background, making it difficult to read](https://acquia.widen.net/content/50196b90-30f0-4da9-9b01-aa85a139eb5e/web/Mon_AccessibilityHelpCenter-page_example_contrast_incorrect.png) #### Example 2: Good contrast ratio In this next example, the colors are adjusted to white text on dark green background for better contrast. ![A web page displays the garbage disposal policy of a local community. A written notice on how to properly dispose of plastic waste appears with a white font color on a dark green background, making it easy to read.](https://acquia.widen.net/content/9d4a371e-61c3-47cf-85f8-7ab297551687/web/Mon_AccessibilityHelpCenter-page_example_contrast_correct.png) How --- This section provides information on how to identify and fix this type of error. 1. Click **Accessibilit**y (icon of a human with arms outstretched) on the menu bar. 2. Click **Checklist** from the from the menu on the left. 3. Select the appropriate compliance level to filter for on the _Accessibility Checklist_ page. The filters are located directly above the list. 4. Find the desired check in the list (you can use the search bar to assist with this). 5. Click on the number of pages on the same row as the check on the far right. The _pages with errors_ pane opens. 6. Choose a page to open with the browser extension (magnifying glass icon.) 7. On the page in the web browser extension view, highlight one of the errors using the magnifying glass button. After you do so, click “Cancel” so the yellow box disappears. 8. Calculate the contrast ratio between the text and the background color. To do this: 1. Open the free [Acquia Color Contrast Checker.](https://www.acquia.com/products/acquia-optimize/tools/color-contrast-checker) 2. Use a color picker like [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en) (Google Chrome extension) to “pick” the text color from the issued text. 3. Paste the color code into the “Foreground color picker” on the Contrast Checker. (If you are using ColorZilla, the color code automatically copies to your clipboard.) 4. Repeat the process for the background color. 9. In your CMS, adjust the contrast so that it is at least 7:1 for regular text and at least 4.5:1 for large text. Large text is defined as; 18pt (24 CSS pixels) or 14pt (19 CSS pixels) bold text or above. Tip! You can use the [Acquia Color Contrast Checker](https://www.acquia.com/products/acquia-optimize/tools/color-contrast-checker) to identify a color that increases the contrast! ### Who in your team can typically fix this? * Web team: (Visual Design and front-end developer) for changes in your CMS/website template. * Content Authoring; when special styling is applied via the content. Additional resources -------------------- This section contains useful resources for this subject. ### WCAG success criteria * [1.4.6 Contrast (Enhanced)](/web-governance/146-contrast-enhanced "1.4.6 Contrast (Enhanced)") ### Other resources * [Color Contrast Checker](https://www.acquia.com/products/acquia-optimize/tools/color-contrast-checker) * * * Related Articles ---------------- * [Provide sufficient contrast between text and background colors](/web-governance/provide-sufficient-contrast-between-text-and-background-colors "Provide sufficient contrast between text and background colors") * [The visual presentation of UI and graphics components have a contrast ratio of at least 3:1 against adjacent color(s)](/web-governance/are-important-ui-and-graphical-components-distinguishable#h_b6331ad06d "Are important UI and graphical components distinguishable?")