---
title: "Provide sufficient contrast between text and background colors"
date: "2024-08-19T03:54:46+00:00"
summary: "Ensure your website's text is easily readable with our guide on color contrast. Learn how to meet WCAG standards, improve accessibility for all users, and create visually appealing designs that work in various lighting conditions."
image:
type: "page"
url: "/web-governance/provide-sufficient-contrast-between-text-and-background-colors"
id: "f40cc19d-362c-4b0e-ad9a-5e241bb3f2bf"
---

Table of contents will be added

**1.4.3 Contrast (Minimum)**

This document provides information about the related Acquia Web Governance accessibility check:

*   Provide sufficient contrast between text and background colors.
    

What
----

Text should have a good contrast ratio between the foreground color of the text and the background color. The contrast ratio must be at least 4.5:1 for regular text and at least 3: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, is 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.

Who
---

### Affected users

This check affects individuals with:

*   Low vision: Who struggle to distinguish text from complex backgrounds. This category includes users with natural age-related vision loss.
*   Color blindness: Who 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

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?w=720&itok=5GBnb9C0)

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?w=720&itok=m6JWaqa6)

How
---

This section provides instructions on how to fix the issue.

### How to fix it

1.  Click **Accessibility** (icon of a human with arms outstretched) on the menu bar. The _Accessibility_ dashboard opens.
    
    ![The location of the Accessibility button on the domain menu bar.](https://acquia.widen.net/content/92f298d5-56bc-4ba1-9520-489b45eeefdf/web/WebGov_DomainToolbar-AccessibilityButton.png)
    
2.  Click **Checklist** from the from the menu on the left.
    
    ![The location of the Checklist option on the left menu on the Accessibility Checklist page.](https://acquia.widen.net/content/b5adcfdf-9dba-48ec-9655-21704d8c762b/web/Mon_Opt_Accessibility-LeftMenu-Checklist.png)
    
3.  Select the **AA** compliance level to filter for on the _Accessibility Checklist_ page. The filters are located directly above the list.
    
4.  Find the check in the list called, “Provide sufficient contrast between text and background colors” (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.
    
    ![The location of the Pages link, on the far right side of a row in the checks list.](https://acquia.widen.net/content/d37e31b4-1e71-4725-b92c-0693e30b9f9b/web/Mon_AccessibilityChecklist_number_of_pages.png)
    
6.  On the same row as a page, click **Inspect page with Browser Extension** (magnifying glass icon).
    
    ![The location of the Inspect Page with Web Browser Extension button on the far right side of a row in the Pages with Errors list,](https://acquia.widen.net/content/fd886b0c-08cd-4124-bc77-7de982fe398f/web/Mon_AccessibilityChecklist_provide_sufficient_contrast_inspect_button.png)
    
7.  On the page in the Web Governance Browser Extension, click **Highlight** (magnifying glass icon).
    
8.  Click **Cancel** to remove the yellow highlight.
    
    ![The location of the Cancel button, just below a highlighted error in the web browser extension list.](https://acquia.widen.net/content/a6a1bf16-cfcf-4342-8041-7a2f5b2e459f/web/Mon_AccessibilityChecklist_page_example_provide_sufficient_contrast_cancel_button.png?w=720&itok=zXYQ7fXL)
    
9.  Calculate the luminosity contrast ratio between the text and the background color. To do this:
    
    1.  Open the free [Acquia 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.
        
        ![Using a color picker like ColorZilla (Google Chrome extension) to “pick” the text color from the issued text.](https://acquia.widen.net/content/f18219e7-ebc7-4663-be87-ebf8d8f0f4f4/web/Mon_AccessibilityChecklist_page_example_colorzilla_pick_text_color.png?w=720&itok=V_k0Q9CP)
        
    3.  Paste the color code into the “Foreground color picker” on the contrast checker.
        
    
10.  Repeat the process for the background color.
     
11.  In your CMS, adjust the contrast so that it is at least 4.5:1 for regular text and at least 3:1 for large text. Large text is defined as 18pt (24 CSS pixels) or 14pt (19 CSS pixels) bold text or above.
     

### Who in your team can typically fix this?

*   Web team: Who have competencies in visual design or front-end development for changes in your CMS/website template.
    
*   Content authoring: Who can update the content and adjust the styling.
    

Additional resources
--------------------

This section contains useful resources for this subject.

### WCAG success criteria

[1.4.3 Contrast (Minimum) (W3C website)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html#:~:text=The%20minimum%20contrast%20success%20criterion,needs%20to%20provide%20sufficient%20contrast.)

### Related articles

*   [Text color must provide high contrast with its background](/web-governance/text-color-must-provide-high-contrast-its-background "Text color must provide high contrast with its background")
    
*   [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 "Are important UI and graphical components distinguishable?")